Created a Game
2016年11月26日
天气:晴 (特别适合出去玩)
地点:西安邮电大学联合创新实验室
早上九点开工,开始了小游戏的筹划,不只是为了做出一个小游戏,更多的是熟悉学习方法,锻炼团队协作能力。
游戏名称:太空船躲避碎片
“游戏链接,快戳进来!!!”
这个是我们的成品图:
它是怎么实现的呢?
第一步:拆分任务(将任务细化,比如初始化一个黑色画布,在固定位置显示一个白色方块)
第二步:概念学习(领取拆分好的任务,查阅资料学习相关概念)
canvas入门教程(English)
官网入门教程
玩转canvas
第三步:抽取独立demo(放下整个游戏,只实现其中一个功能)
小组共同实现这些demo分工合作效率不是一般的高,以下链接是demo的实现,不过时间太久链接失效了,如果你也想实现这个游戏的话可以参考一下需要考虑的方面。
画一个带颜色的确定大小的方块
如何画两个带颜色的方块
如何让一个方块垂直下落
如何获取键盘按键
方块按照按键方向移动
如何让一个方块从一个边界穿出到另对面边界(左右)
如何让一个方块碰到上(下)边界之后被挡住
如何在js中生成一个随机数
如何随机生成一个方块(位置随机)
随机生成多个方块(数量随机)
随机从顶部生成多个方块
如何判断两个方块相碰
画布上显示一个字符串
第四步:开始实现这个游戏吧
Harvest:
一开始觉得不可能完成这个任务,毕竟要用到的东西还没有接触过,而且以前觉得做一个游戏很难,很神奇,但是把它划分成小模块,一个一个去攻克就觉得没有那么难了,能够完成一个作品真的特别有成就感,而且还是在一天之内完成的。
附上照片:
ps:游戏动画实现原理
动画其实是一张张的图片快速播放形成的视觉上的体验,制作游戏动图也是如此,在JavaScript中使用setInterval函数可以在每隔规定时间调用一次其中的函数,实现多次清空画布,重新画图的功能,表现出动态游戏效果
setInterval(function(){
函数调用 //多个函数调用可以用“,”隔开
},毫秒数);