canvas画布的使用_教你做一枚小游戏

Created a Game

2016年11月26日
天气：晴 （特别适合出去玩）
地点：西安邮电大学联合创新实验室

早上九点开工，开始了小游戏的筹划，不只是为了做出一个小游戏，更多的是熟悉学习方法，锻炼团队协作能力。
游戏名称：太空船躲避碎片

“游戏链接,快戳进来！！！”
这个是我们的成品图：

游戏界面

它是怎么实现的呢？
第一步： 拆分任务（将任务细化，比如初始化一个黑色画布，在固定位置显示一个白色方块）
第二步： 概念学习（领取拆分好的任务，查阅资料学习相关概念）
canvas入门教程(English)
官网入门教程
玩转canvas
第三步： 抽取独立demo（放下整个游戏，只实现其中一个功能）
小组共同实现这些demo分工合作效率不是一般的高，以下链接是demo的实现，不过时间太久链接失效了，如果你也想实现这个游戏的话可以参考一下需要考虑的方面。

画一个带颜色的确定大小的方块

如何画两个带颜色的方块

如何让一个方块垂直下落

如何获取键盘按键

方块按照按键方向移动

如何让一个方块从一个边界穿出到另对面边界（左右）

如何让一个方块碰到上（下）边界之后被挡住

如何在js中生成一个随机数

如何随机生成一个方块（位置随机）

随机生成多个方块（数量随机）

随机从顶部生成多个方块

如何判断两个方块相碰

画布上显示一个字符串

第四步：开始实现这个游戏吧

Harvest：

一开始觉得不可能完成这个任务，毕竟要用到的东西还没有接触过，而且以前觉得做一个游戏很难，很神奇，但是把它划分成小模块，一个一个去攻克就觉得没有那么难了，能够完成一个作品真的特别有成就感，而且还是在一天之内完成的。

附上照片：

team

ps：游戏动画实现原理
动画其实是一张张的图片快速播放形成的视觉上的体验，制作游戏动图也是如此，在JavaScript中使用setInterval函数可以在每隔规定时间调用一次其中的函数，实现多次清空画布，重新画图的功能，表现出动态游戏效果

setInterval(function(){
    函数调用     //多个函数调用可以用“，”隔开
},毫秒数);