周六一早，正在被窝窝着睡，突然觉得少了点什么，才意识到自己在校内实验室报名的全天 Learn Smart 编程活动早已开始 —— 这么有趣的活动怎么可以因此不去了呢，火速前往。
图片取材自 Bit Blaster XL
今天这场 Learn Smart 活动，便要做一个基于 Canvas 的太空船游戏。
一、需求确认 (´◑ω◐`)
方便起见，这里给该游戏起名为 JSpace-Ship，今天要完成的任务是：
- 白块代表飞船
- 红块代表碎片
- 碎片自动下落
- 飞船躲避碎片
太空垃圾真是多 (ಢധಢ)
二、功能探索 ( _ ͡° ͜ʖ ͡° )_
功能探索即是先一起玩玩这个游戏，感悟游戏背后的功能。
在 JSpace-Ship 的体验中，发现其实背后的逻辑很简单，无非是：
- 上上下下左左右右躲避碎片 Gay 木偶喔 :-)
哈哈，幽默一下，就到了干货的环节了，做好准备！
三、分解任务 ☍ (¦3ꇤ[▓▓]
任何问题都是可以穷尽的，小游戏编程亦是如此。如果有了对实现 JSpace-Ship 游戏功能这个大任务的详细分解步骤作为接下来编程的参考指南，抽象逻辑便也能具体化。
任务分解如下 (๑´∀｀๑)
- 填写游戏介绍
- 产生一个画布
- 产生飞船并静止
- 随机产生一个碎片
- 让一个碎片自动下落
- 随机产生多个碎片
- 让多个碎片自动下落
- 让飞船上下左右移动
- 飞船靠近上下边界静止
- 飞船靠近左边界跳转右边界，反之跳转左边界
- 飞船碰撞碎片后游戏结束
- 游戏结束时产生 Game Over 字样
制作原型图 (๑´ڡ`๑)
刚才已经能看到黑色背景，白色飞船，红色碎片的界面图了，画出来即可。
绘制事件列表 (ﾉTwT)ﾉ ┫
界面上的每一个操作，都是事件，都能产生用户故事与需求。
画出组件图 ー=≡Σ( ε¦) 0
和下面的数据结构放一起了。
规定数据结构 (´థ౪థ )
JSON 格式好简洁好棒的。
四、概念学习 ☉☯☉
到了代码实战环节，怎能无法对 Web 概念有所了解并阐述。
什么是 Canvas (๑•́ ₃ •̀๑)ｴｰ
因为这次是团队合作解决的，基于石墨在线协作编辑，我们对 Canvas 的共同认知如下：
<canvas></canvas>是 HTML5 中出现的新标签，像所有的 Dom 对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，JS 能够调用它来进行绘图。在Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
简而言之，HTML5 的新特性 Canvas 画布逐像素绘制图片，绘制完成后不再得到浏览器关注，改动时重新绘制。
为什么不用 SVG (⊃_⊂)
SVG ，可缩放矢量图形，支持 DOM 操作也不仅仅存在于 Web 开发中。
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
可见，如果使用 SVG 的话，就要生成足够多的对象来持续操作，也会因为这些操作而影响性能。
上图直观说明了 Canvas 能作为图片存储，是像素化的。而 SVG 矢量图形如下，如论缩放多大依旧清晰，却无法图片存储。
Flash 不高兴了 (/´ △ `＼ )
HTML5 的时代啦，那 FLASH 就继续不高兴吧~
五、DEMO预研 q(´･ω･`)p
依据分解过的任务，依据事件列表，正式开始DEMO预研。在我们小组的石墨合作编辑中，快速产出快速分享敏捷开发~
全程在线开发基于校内实验室的 JS Bin。国内还没有太普及哦~
六、功能实现 ૢ(⌯･ω･`⌯)
当每一个功能都有了独立可执行的 Demo 后，再完成一步稍稍逼死强迫症（涉及各种风格不统一）的代码合并就可以正式上线我们的 JSpace-Ship 了。
合并完成，本次功能实现完成，左手右手慢动作。
七、反馈 (✿´ ꒳ ` )
什么？！有人说我是标题党，这篇文章甚至这个游戏和太空船有什么关系？我只想 Say 一天时间当然不够加入太空元素，但下去自己不会去改装嘛~~
反馈表对于这场活动的举办成功与否能起到一定的参考价值。填写之。
Oh，对了，本次改装链接来源于学姐，哈哈。同时对于自己处女座和强迫症的性格来说，今天从团队开发里学到的最深刻的便是——注重功能，不要过于追求完美。|д・)
- Hello，我是韩亦乐，现任本科软工男一枚。软件工程专业的一路学习中，我有很多感悟，也享受持续分享的过程。如果想了解更多或能及时收到我的最新文章，欢迎订阅我的个人微信号：韩亦乐。我的简书个人主页中，有我的订阅号二维码和 Github 主页地址；我的知乎主页 中也会坚持产出，欢迎关注。
- 本文内部编号经由我的 Github 相关仓库统一管理；本文可能发布在多个平台但仅在上述仓库中长期维护；本文同时采用【知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议】进行许可。
网友评论