前言

本程序仅仅学习，顺便回忆小学玩的游戏。
项目初心为了验证一些对 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 对点击事件支持弱，获取不到绘制在上面的状态，我也没有找到完美的解决方法。

结尾