前言
本程序僅僅學(xué)習(xí)乏梁，順便回憶小學(xué)玩的游戲次洼。
項(xiàng)目初心為了驗(yàn)證一些對(duì) Canvas 想法。
項(xiàng)目大量運(yùn)用 ES6遇骑，無(wú) ";" 寫法卖毁。
cover.gif
目錄
- 文件介紹
- 職責(zé)分類
- 缺點(diǎn)
文件
- img
- jxk（劍俠客圖片）
- background（地圖圖片）
- js
- base
- runloop.js（循環(huán)）
- view
- jxk.js（劍俠客）
- map_one.js（地圖）
- game.js
- index.js
- base
- index.html
職責(zé)分類
<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：主要負(fù)責(zé) window.requestAnimationFrame 循環(huán)
js/view/map_one.js：地圖渲染
js/view/jxk.js：劍俠客渲染
js/game.js：初始化 Canvas ，處理?yè)羰录?br>
js/index.js：項(xiàng)目入口
缺點(diǎn)
- 人物走在地圖邊界沒有站立狀態(tài)，這都怪我沒有拆分地圖與人物之間x亥啦，y關(guān)系炭剪。最近看到微信小程序打飛機(jī)源碼，發(fā)現(xiàn)值得學(xué)習(xí)翔脱。
- Canvas 對(duì)點(diǎn)擊事件支持弱奴拦，獲取不到繪制在上面的狀態(tài)，我也沒有找到完美的解決方法届吁。
結(jié)尾
GitHub: https://github.com/liangtongzhuo/game_web （有用給個(gè) Star错妖，別光 fork 淚奔）
本想做成聯(lián)網(wǎng)，大家一起在上面走疚沐，想了想暂氯，為了代碼的干凈，還是以后另外開項(xiàng)目再加把濒旦。
體驗(yàn)地址：https://liangtongzhuo.github.io/game_web/
在GitHub 打開速度非常慢株旷，加載了50張以上的圖再登，另外記得打開手機(jī)調(diào)試尔邓，并沒有適配 PC，獲取不到點(diǎn)擊事件
