开发贪吃蛇游戏每吃一次食物左上角就会闪一下身体格子

开发贪吃蛇游戏每吃一次食物左上角就会闪一下身体格子

笔者用JavaSE开发过贪吃蛇小游戏,也用HTML5+CSS3+JavaScript开发过贪吃蛇,处理问题的思路大同小异,只是函数和方法调用会有不同,但是这两种开发方式,我都遇到过一个相同的问题,如题,蛇每吃到食物后的一瞬间,游戏界面的左上角都会闪一下一个格子(这个格子就是蛇吃掉食物后多出来的一节身体)

1.问题现象(附图–Java SE开发的):

2.根据现象,分析问题:

从颜色上发现闪烁的色块的绿色,那它就是蛇的身体(食物是蓝色),
去源代码中寻找身体是怎么定义的,我把身体坐标以数组的方式放在整形数组中

回顾Java基础知识,我们知道这种声明数组的方式固定了数组的长度,没有赋初值,但是它是会有默认值的,默认值0.

3.问题的根源:

每次掉一次食物,身体长出一节,长出的这一节身体从以上数组中去取,那横纵坐标都是0,对应着游戏界面的左上角,随着程序的执行,长出的那一节身体迅速被定为到蛇屁股最后,蛇就变长了,反映在程序中,我只是让蛇的长度lenth增加了而已,并没有给增加的那一节身体定位坐标.由此可见,才会出现身体在左上角闪现一下的情况

4.解决办法:

知道了问题的根源,解决起来也就变得很简单
每次蛇吃完食物,身体增加后,马上给增加出的身体定位坐标,坐标就是前一节蛇屁股的坐标
贴代码:

换成用原生JavaScript开发的也是一样的思路,每一个div元素就是一节身体,
这么做就行,直接上代码:

5.小结:

制作贪吃蛇游戏主要是攻克这几个难点

1.坐标计算(边界要多大,每个格子要多大)
2.怎么让蛇动起来(每节身体都跟着前一节走)
3.怎么让食物随机出现,怎么判断吃了食物(随机种子,蛇头和食物坐标重合)
4.判断死亡的条件(自定义)