原创JAVASCRIPT小游戏贪吃蛇详解

在火车上，为了打发时间，我开始了写JS小游戏的计划。就先从贪吃蛇这种最简单的开始写起吧。

那位用JAVASCRIPT写出超级玛丽的牛人，值得学习。我这里用li标记来模拟红白机中画面的像素点的想法，就是源于此。

贪吃蛇的游戏规则：

• 吃掉一个食物，蛇长自动+1；
• 蛇头撞到边缘或蛇身则游戏结束；
• 用方向键控制移动方向，需要有暂停游戏功能；

主要游戏元素：

• 蛇；
• 食物；
• 舞台；

主要思路及算法：

• 构造的舞台，很明显是一个固定大小的二维数组；
• 蛇通过不断吃食物可以改变自身长度，所以应该是一个长度可变的二维数组；
• 食物、蛇可以出现在整个舞台的任意地方，可以通过改变其坐标值来改变位置；

接下来看一部分代码：

snake.unshift([nextX,nextY])

if(aLi[nextX][nextY].className==_options.classFood){

    _createFood();

}else{

    aLi[snake[nSnakeLen][0]][snake[nSnakeLen][1]].className='';

    snake.pop();

}

 

这部分是整个游戏最核心的代码，snake数组在每次移动的时候，它的第一个节点都会占领这个像素点，所以这个数组就是unshift([蛇头像素点坐标])。如果这个点是食物那么，继续生成食物，蛇身则已经通过unshift自动+1；如果这个点不是食物，那么删除蛇尾的像素点，从而保持蛇身长度不变，实现了蛇的移动效果。

另外一部分比较重要的，通过方向键改变蛇身移动方向。考虑到蛇本身是包含一系列坐标值的二维数组，只需给它的值在横向或纵向上+1或-1，即可左右移动一个像素的位置。

//移动方向、预载移动方向

    var direction = preDirection = [0,1];

    var nextX = snake[0][0]+direction[0];

    var nextY = snake[0][1]+direction[1];

 

 

主要函数方法，我都在源代码里写上了注释。虽然游戏用了组件封装的写法，不过其实都是原生写法，所以还是有改进之处。有BUG欢迎提出来。

点此查看游戏演示DEMO