Javascript 特训-5
加上回国，前前后后拖了2个月，我第一个面向对象的程序终于完成了，撒花。
游戏名：大战篮球场
Game Screenshot
Github 线上地址：请点这里
JS 结构：
- resources.js - 用于预加载图片
- app.js - 用于定义游戏对象
- engine.js - 用于控制游戏规则
下面梳理一下我设计该项目的思路：
数月前，看到一群老年人和年轻人为争夺一篮球场，发生言语争执，继而上升为肢体冲突。媒体上遂一片哗然，多数指责老年人的素质不够。由于此社会热点，遂想出了该游戏的规则。
游戏规则：控制人物移动来收集篮球，同时躲避大妈，篮球收集完获胜，生命值消耗完则失败。
接下来是用 Sketch 画了游戏草图，定下各项尺寸，方便之后使用代码定位图片位置。
Sketch 草图
接下来便是通过代码实现游戏的各项规则，难点主要是面向对象的思路和 Canvas 技术 (以前都没接触过)。下面以 Player 进行举例。
属性：
- Player 有 x, y, width, height, image, life 等基本属性
- 由于要还原游戏，则还需 originalX, originalY, originalLife 属性
- 由于需要通过 Player 串联整个游戏，还需要有 success, score, gameOver 等控制游戏的属性
方法：
- move(), 控制 Player 的上下左右，需要有函数判断是否碰撞和是否有障碍物阻挡
- reset(), 还原一切 Player 属性
- update(), 规定时间内更新 Player 的一切属性
- render(), 更新属性后，重新渲染画面给予用户视觉反馈
接下来就是用代码把每个功能挨个实现。在这个过程中会遇到无数个 bug，切记耐心，多用 Google 搜索，多用 Chrome 设置断点 debug，相信问题最后终能解决的。
当游戏跑起来后，不要高兴的太早，还有最后一步，调整游戏的难度。难度太低用户会觉得没意思，难度太大用户没有动力。这时候就需要把自己带入游戏，反复的玩，根据反馈反复的改变障碍位置和大妈移动速率的参数，最后达到一个觉的合适的游戏难度。
Over, 放在 Github 上给同学朋友们玩吧。
最后的最后，如果有设计师想对该游戏美术方面 fork 一下的话，欢迎联系我，我们一起把它变得更有意思。
经过这个项目的锻炼，对自己的代码能力有了更多的信心。下一步打算试着使用 Vue.js 把自己的个人网站重构一遍。
Reference
Official Udacity Arcade Game: https://github.com/jshanks24/Udacity-Arcade-Game
Joey Udacity Arcade Game: https://github.com/JoeyQiang/udacity-arcade-game
网友评论