Javascript 面向对象编程特训 - 4

Javascript 特训-5

加上回国，前前后后拖了2个月，我第一个面向对象的程序终于完成了，撒花。

游戏名：大战篮球场

Game Screenshot

Github 线上地址：请点这里

JS 结构：

• resources.js - 用于预加载图片
• app.js - 用于定义游戏对象
• engine.js - 用于控制游戏规则

下面梳理一下我设计该项目的思路：

数月前，看到一群老年人和年轻人为争夺一篮球场，发生言语争执，继而上升为肢体冲突。媒体上遂一片哗然，多数指责老年人的素质不够。由于此社会热点，遂想出了该游戏的规则。

游戏规则：控制人物移动来收集篮球，同时躲避大妈，篮球收集完获胜，生命值消耗完则失败。

接下来是用 Sketch 画了游戏草图，定下各项尺寸，方便之后使用代码定位图片位置。

Sketch 草图

接下来便是通过代码实现游戏的各项规则，难点主要是面向对象的思路和 Canvas 技术 (以前都没接触过)。下面以 Player 进行举例。

属性：

1. Player 有 x, y, width, height, image, life 等基本属性
2. 由于要还原游戏，则还需 originalX, originalY, originalLife 属性
3. 由于需要通过 Player 串联整个游戏，还需要有 success, score, gameOver 等控制游戏的属性

方法：

1. move(), 控制 Player 的上下左右，需要有函数判断是否碰撞和是否有障碍物阻挡
2. reset(), 还原一切 Player 属性
3. update(), 规定时间内更新 Player 的一切属性
4. 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