最近在家玩了贪吃蛇大作战，突发兴致下就想到用JS来写一个贪吃蛇的简单Dome，这里并没有用canvas来编写，有空我也会尝试。
从游戏规则开始入手，游戏包括，场景，蛇，食物。
场景使用了一个500*500的div来限制蛇的活动范围，同时我创建了一个同样大小的div来作为食物的容器（自己在最开始编写的时候没有考虑全面，所以这里自己觉得并不是最好的方案）；
接下来我把蛇作为一个对象先进行分析：
蛇的属性包括：长度，移动速度，移动方向
蛇的方法包括：吃食物，移动
在游戏中最主要是环节便是蛇在场景（坐标）的移动，蛇每移动一次，后面的身体部分就在原来的轨迹上前进一次，这是我认为制作这个游戏的关键，我的想法是，把蛇拆分成每一的小块，用数组记录每一个小块的坐标，如下所示：
var positions = [[50,25],[25,25],[0,25]];
由此组成了一个二维数组，思路便是，使用数组的unshift和pop方法。每移动一次就在原来的数组的前面加上最新的坐标（最新的坐标根据方向来在原本的第一个坐标加减相应的移动数据）然后删除最后一个坐标。当吃掉食物的时候，就只是在原来的数组上加上坐标并不用删除就完成了蛇移动的基本思路。蛇的自动移动和监听移动原理相同，只是自动移动加入了定时器。
在原本的基础上我们开始加入判断，也就是规则，判断蛇是否已经移出了场景，在这个版本上我并没有加入很多规则，只有一个规则是头部不能跑出场景，所以只需要每次移动的时候判断蛇的第一个坐标是否已经不在场景的最大的四个坐标中即可。
现在大概架构有了，就可以开始编写了。这里我做的是网页版，所以监听的是键盘的上下左右，这里需要在每次移动的时候去改变移动的方向。全部代码在我的github上：
希望各位能给一些意见让我可以进行改进。谢谢。
网友评论