前言
本程序仅仅学习, 顺便回忆小学玩的游戏.
项目初心为了验证一些对 Canvas 想法.
项目大量运用 ES6, 无 ";" 写法.
cover.gif
目录
文件介绍
职责分类
缺点
文件
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: 项目入口
缺点
人物走在地图边界没有站立状态, 这都怪我没有拆分地图与人物之间 x,y 关系. 最近看到微信小程序打飞机源码, 发现值得学习.
Canvas 对点击事件支持弱, 获取不到绘制在上面的状态, 我也没有找到完美的解决方法.
结尾
GitHub: https://github.com/liangtongzhuo/game_web (有用给个 Star, 别光 fork 泪奔)
本想做成联网, 大家一起在上面走, 想了想, 为了代码的干净, 还是以后另外开项目再加把.
体验地址: https://liangtongzhuo.github.io/game_web/
在 GitHub 打开速度非常慢, 加载了 50 张以上的图, 另外记得打开手机调试, 并没有适配 PC, 获取不到点击事件
来源: http://www.jianshu.com/p/1c631a2e29cb