当前栏目
如何用原生 JS,快速写一个贪吃蛇小游戏
前言
贪吃蛇算是小游戏里面比较好写的,没有什么难点,基本上需要实现的功能,都能很顺利的用代码敲出来。
1、绘制游戏区域和游戏元素
仍然是用 16 * 16 的二维数组来绘制,对这个数组进行遍历。第一层遍历的时候创建 tr,第二层遍历的时候创建 td。然后添加一些 CSS 样式,游戏区域就写好了。
CSS&HTML:
游戏元素的话一共有 3 个,蛇头,身体和苹果。就用 3 个构造函数来生成坐标,以及给对应坐标的那个对象里面添加不同的属性。用构造函数写既方便查找,也方便修改。然后写个渲染函数,格子里面对应的不同的属性,就渲染出不同的样式。
2、移动功能
移动功能要分两个步骤来写。一个是蛇头的移动,一个是身体的移动。贪吃蛇的身体它不是一个整理,是不能写成一块的。蛇头动的时候,身体它得扭来扭去,这才像个蛇。
蛇头移动很简单,上下左右键对应着蛇头 X 和 Y 两个值的加减。X 和 Y 超出范围,代码就会报错。就可以直接用 try catch 来判断边界。报错了就说明出界了,直接走 catch 的游戏结束。
注意: 这个游戏唯一麻烦一点的地方来了,怎么让蛇身体能扭起来。相通一个逻辑,这个问题就迎刃而解了。
蛇身体怎么移动,是身体里的每个元素都往前移动一格吗,显然不是。仔细观察你会发现,蛇移动时,身体的中间部分其实是不动的。动的只有最前端和最末端的两格。也就是说蛇移动时,其实就是把身体最末端的格子移动到了身体最前端,其他的都不需要动。前面声明的身体元素数组就是这个时候用的。把身体的最后一个元素移动到头部,同时数组里的最后一个元素也要移动到最前面去。
3、写键盘事件
写键盘事件的时候要加一个判断,让这个蛇只能够相对它自身左右移动。不能掉头,也不能向前冲,向前冲很容易就撞到墙了。
4、吃苹果功能
吃苹果功能分为 3 个步骤
1.判断头部和苹果有没有重合,重合的话,就让这个苹果消失,让分数 +1。
2.生成随机坐标来渲染苹果,判断一下这个坐标上是否与蛇身体重合了,重合的话就要重新生成坐标。
3.生成一个新的身体实例,并且把这个新实例添加到身体数组中。
5、头部碰到身体游戏失败的功能
和吃苹果的逻辑一样,就判断头部和身体是不是重合的。
6、自动移动的功能
自动移动可以通过间歇函数来实现,然后不能单纯的在间歇函数的回调里面写上下左右的某一个,要判断一下蛇当前的移动方向是什么。然后来一个分数越高速度越快的功能。
7、暂停功能和判断游戏胜利
这两个比较简单,就一起说了。暂停功能就是让定时器停止,并且让flag变量变为false。这样就不能再去控制蛇了。这个游戏一共有256个格子,胜利的条件就是身体有255个元素,因为要减去一个头部。
写在最后
游戏到这里就写完了,代码虽然看起来多,但是并没有什么难的地方,想到就能写。唯一麻烦一点的就是那个身体的移动,相通了就很简单了。
相关文章
- 【译】15 个有用的 JavaScript 技巧
- Node.js躬行记(25)——Web自动化测试
- Node.js躬行记(24)——低代码
- Node.js躬行记(23)——Worker threads
- Node.js躬行记(22)——Node环境升级日志
- Node.js精进(11)——Socket.IO
- Node.js精进(10)——性能监控(下)
- Node.js精进(9)——性能监控(上)
- Node.js精进(8)——错误处理
- Node.js精进(7)——日志
- Node.js精进(6)——文件
- Node.js精进(5)——HTTP
- Node.js精进(4)——事件触发器
- Node.js精进(3)——流
- Node.js精进(2)——异步编程
- Node.js精进(1)——模块化
- Node.js躬行记(21)——花10分钟入门Node.js
- Node.js躬行记(20)——KOA源码分析(下)
- Node.js躬行记(19)——KOA源码分析(上)
- Node.js躬行记(18)——半吊子的可视化搭建系统