前言

本程式僅僅學習，順便回憶小學玩的遊戲。 專案初心為了驗證一些對 Canvas 想法。 專案大量運用 ES6，無 ";" 寫法。

目錄

• 檔案介紹
• 職責分類
• 缺點

檔案

• img
  • jxk（劍俠客圖片）
  • background（地圖圖片）
• js
  • base
    • runloop.js（迴圈）
  • view
    • jxk.js（劍俠客）
    • map_one.js（地圖）
  • game.js
  • index.js
• index.html

職責分類

    <script type="text/javascript" src="js/base/runloop.js"></script>
    <script type="text/javascript" src="js/view/map_one.js"></script>
    <script type="text/javascript" src="js/view/jxk.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
複製程式碼

js/base/runloop.js：主要負責 window.requestAnimationFrame 迴圈

js/view/map_one.js：地圖渲染

js/view/jxk.js：劍俠客渲染

js/game.js：初始化 Canvas ，處理擊事件

js/index.js：專案入口

缺點

1. 人物走在地圖邊界沒有站立狀態，這都怪我沒有拆分地圖與人物之間x，y關係。最近看到微信小程式打飛機原始碼，發現值得學習。
2. Canvas 對點選事件支援弱，獲取不到繪製在上面的狀態，我也沒有找到完美的解決方法。

結尾

GitHub: https://github.com/liangtongzhuo/game_web 本想做成聯網，大家一起在上面走，想了想，為了程式碼的乾淨，還是以後另外開專案再加把。

體驗地址：https://liangtongzhuo.github.io/game_web/

在GitHub 開啟速度非常慢，載入了50張以上的圖，另外記得開啟手機除錯，並沒有適配 PC，獲取不到點選事件