如何用HTML5制作贪吃蛇游戏
如何用HTML5制作贪吃蛇游戏?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联建站专注于柳北企业网站建设,响应式网站建设,成都做商城网站。柳北网站建设公司,为柳北等地区提供建站服务。全流程按需设计,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务
本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下:
实现效果如下
实现思路:
ps:这个只是思路,详细可看代码注释
一、先把蛇画出来
定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇头(红)和蛇身(灰)。
画蛇(初始状态)
二、蛇能动(重点)
蛇移动方式:自始至终都只有蛇头在动
画一个灰色的方块,位置与蛇头重叠
将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)
砍去末尾的方块array.pop()
将蛇头向设定方向移动一格
需要一个保存方向的变量(direction)
根据方向进行移动,一次移动一个格
根据按键改方向
三、随机投放食物
需要随机食物的位置
需要判断食物在不在蛇身上。
四、吃食物
判断食物是否与蛇头重叠
数组加一个元素(少删除一个元素就是加一个元素)
生成新的食物
五、gameover
撞墙判定
装自己判定
Document
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
网站栏目:如何用HTML5制作贪吃蛇游戏
文章URL:http://scyanting.com/article/iiseec.html