Ejcees對象化

by

前段時間，我製作了中國象棋打譜程式ejcees，它是個單頁面，html+css+js全部寫在一個文件裡。

一開始我確實想要把它對象化，但是因為過於複雜，難度很大，我不是很有把握。看著已經做好的單頁面，我可能考慮就做到這裡了。

後來在瀏覽了一些象棋網站之後（他們的網頁版程式都挺爛），我還是決定要把ejcees對象化，這樣就可以把它實例化並嵌入網頁中，同一頁面可加入多個實例。。

過程雖然有點複雜，好在gemini給出了具體的工作流程，加上我的充分思考以及測試排錯，經過幾日奮戰，終於實現ejcees的對象化。

下載地址

ejcees-obj

使用說明

ejcees-obj分成三種模式：main，single，mini。

single單個插入模式

當你只想講解和分析一盤棋局時，可以使用single模式。調用方法為：

    <div style="width: 840px;" class="ejcees" mode="single"></div>
    <script src="ejceesobj.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const containers = document.querySelectorAll('.ejcees');
        containers.forEach(container => {
          const mode = container.getAttribute('mode');
          new Ejcees(container, mode);
        });
      });
    </script>

其中，div.ejcees的寬度可任意改變，其內容可以是各種格式的棋譜，如<div class="ejcees" mode="single">炮二平五 馬8進7</div>。當div.ejcees的內容為空時，它將用localStorage記錄上一次關掉頁面時的數據。

mini多窗口模式

一個頁面上可以存在多個mini模式，其調用方法是把上方代碼中的mode值改成"mini"。div.ejcees的寬度宜調成480px至640px。

使用mini模式進行實例化時，div.ejcees內應有棋譜內容，因為它的棋子不能點擊，無法在頁面上增加數據。

寡人對戰網友 1. 炮二平五 馬８進７ 2. 馬二進三 卒７進１ 3. 車一進一 馬２進１ ① 邊馬會使中路薄弱 4. 車一平六 開局横車略虧 4. ………… 士６進５ ② 5. 馬八進七 砲２平４ 6. 車九平八 車１平２ 7. 炮八進四 ③ 象７進５ 8. 兵七進一 車９平６ 9. 兵五進一 ④ 馬７進６ ⑤ 10. 車六進二 ⑥ 砲８平７ ⑦ 11. 炮五進四 馬６進７ 12. 兵五進一 車６進７ 13. 馬七進五 卒１進１ ⑧ 14. 仕四進五 ⑨ 車６退１ 15. 車六進一 車２進２ 16. 車八進二 卒９進１ 17. 車六平二 將５平６ ⑩ 18. 車二進五 砲７退２ 19. 炮五平一 將６平５ 20. 兵七進一 砲４進１ ⑪ 21. 兵七進一 砲４平２ 22. 兵七平八 車２平３ 23. 兵八進一 車３進７ 24. 兵八平九 象３進１ 25. 炮一進三 士５退６ 26. 炮一平三 象５退７ 27. 車二平三 車３退７ 28. 車三退四 卒９進１ 29. 馬五進六 車３平６ 30. 車八進二 卒９進１ 31. 馬三進一 馬７進９ 32. 馬一進二 前車平８ 33. 相三進一 黑方認負 ① 3. ………… 馬２進３ 4. 兵七進一 象３進５ 5. 馬八進七 馬７進８ ⑫ 6. 馬七進六 車９進１ 7. 馬六進五 馬３進５ 8. 炮五進四 士４進５ 9. 炮八平九 車９平７ 10. 相三進五 馬８進７ 11. 炮五平九 車１平４ 12. 車九平八 卒７進１ 13. 前炮進三 車４進６ 14. 兵九進一 ② 4. ………… 象７進５ 34層23分 5. 馬八進七 士６進５ 6. 兵七進一 砲２平３ 7. 馬七進八 車９平６ 8. 車六進三 馬７進６ 9. 車六進一 馬１退３ 10. 車九進一 砲３平４ 11. 車九平四 砲８進２ 12. 車六退四 馬３進４ 13. 車六平七 砲４平３ 14. 兵七進一 卒３進１ 15. 車七進四 砲３平２ 16. 炮八進五 馬４退２ 17. 車七退一 馬２進３ 18. 仕六進五 馬６進７ 19. 車四進八 士５退６ ③ 7. 炮八進五 18層-24 7. ………… 象７進５ 8. 車六平二 馬７進６ 9. 兵七進一 車９平７ 10. 車二進三 馬６進７ 11. 炮五進四 車７進３ 12. 馬七進六 卒７進１ 13. 車二進一 卒７平６ 14. 車二退二 卒１進１ ④ 9. 車六平二 20層-24 9. ………… 砲８進２ 10. 馬七進六 車６進７ 11. 馬六進五 馬７進５ 12. 炮五進四 砲８退２ 13. 馬三退一 車６退４ 14. 車八進一 馬１退３ 15. 相三進五 砲８平６ 16. 仕四進五 砲６退２ 17. 兵五進一 馬３進２ 18. 車八進五 車２進３ 19. 炮五平八 卒３進１ ⑤ 9. ………… 車６進７ 19層52 10. 車六平二 砲８進２ 11. 馬七進五 車２進２ 12. 仕四進五 車６退１ 13. 車二進三 卒１進１ 14. 車八進二 車６平７ 15. 兵一進一 砲４進１ 16. 炮八退三 砲４進３ 17. 炮八進三 車７平６ 18. 相七進九 砲４退３ 19. 炮八退三 車６退６ 20. 炮五平四 砲４進２ ⑥ 10. 炮五進四 75 10. ………… 馬６退７ 11. 兵五進一 車６進７ 12. 馬七進五 馬７進５ 13. 兵五進一 砲８進４ 14. 仕四進五 車６退１ 15. 相三進五 卒７進１ 16. 兵三進一 砲８平５ 17. 車六進二 車６進１ 18. 車六平五 車６平７ 19. 兵五平六 馬１退３ 20. 炮八進一 砲４進７ 21. 仕五退六 馬３進４ 22. 車五進三 馬４進３ 23. 相五進七 車７進２ 24. 帥五進一 ⑦ 10. ………… 馬１退３ 107分。妙著，下一步連環馬炮打車 11. 炮八進一 馬３進４ 12. 車六平四 砲４進７ 13. 車八進五 車２進２ 14. 車八平四 車６進４ 15. 車四進二 卒５進１ 16. 車四退四 卒５進１ 17. 馬七退六 車２進４ 18. 車四平二 砲８平７ 19. 炮五平七 馬４進３ 20. 仕四進五 馬３進２ 21. 車二進八 士５退６ 22. 車二退五 車２平７ ⑧ 13. ………… 馬１退３ 紅175 14. 仕四進五 車６退１ 15. 炮八進一 將５平６ 16. 車六進一 砲４進７ 17. 車六退四 車２進２ 18. 車八進七 砲７平２ 19. 車六進八 馬３進１ 20. 炮五平六 砲２平４ 21. 炮六退三 車６退１ 22. 兵五進一 車６平５ 23. 兵五進一 馬７退６ 24. 兵五平六 馬６進５ 25. 馬三進五 車５進１ 26. 兵六平七 車５退４ 27. 車六退三 車５平３ 28. 車六平三 車３平４ 29. 車三進四 將６進１ ⑨ 14. 車六進一 262 14. ………… 車２進２ 15. 仕四進五 車６退５ 16. 車六平二 砲７退２ 17. 車二進五 砲７平６ 18. 車八進三 車６平８ 19. 車二平一 砲４進１ 20. 炮八退二 車２進２ 21. 馬五進六 馬７退８ ⑩ 17. ………… 砲７退２ 18. 馬五進六 砲４退１ 19. 車二進五 砲７平６ 20. 車八進二 車２平４ 21. 馬三進五 砲４平２ 22. 炮八平九 砲２平３ 23. 炮五平一 車６退４ 24. 炮一進三 馬７退５ 25. 車八退一 車６平７ 26. 車二退五 車７退２ ⑪ 20. ………… 砲４平３ -389分 21. 馬五進六 砲３退１ 22. 相七進五 砲３進３ 23. 兵五進一 車６進２ 24. 相五退七 砲７平６ 25. 馬三進五 車６退６ 26. 炮一進三 馬７退５ 27. 車八進二 馬５進３ 28. 相三進五 馬３退４ 29. 馬五進六 車６平７ 30. 馬六進四 砲３平２ 31. 兵五進一 象３進５ 32. 車二退一 象５退７ 33. 馬四進三 車７退１ 34. 車二平三 砲６平９ 35. 車三進一 士５退６ ⑫ 5. ………… 車９進１ 6. 車一平二 砲８進２ 7. 車二進三 砲２退１ 8. 炮五平六 砲２平８ 9. 車二平四 車１平２ 10. 車九平八 卒３進１ 11. 兵七進一 前砲平３ 12. 馬七進八 砲３平２ 13. 炮八進三 車２進４ 14. 車四平七 馬３進４ 15. 車七平六 馬４進２ 16. 車八進四

main單頁面模式

如果整個HTML頁面只包含本程式，則可使用main模式。使用方法為：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejcees Object</title>
  </head>
  <body>
    <div class="ejcees" mode="main"></div>
    <script src="ejceesobj.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const containers = document.querySelectorAll('.ejcees');
        containers.forEach(container => {
          const mode = container.getAttribute('mode');
          new Ejcees(container, mode);
        });
      });
    </script>
  </body>
</html>

下面是我的實作筆記，有興趣可翻至第二頁。

歡迎下載

文檔名
大小
Pages: 1 2

Leave a Comment