JavaScript 贪吃蛇游戏完整实现代码

JavaScript 贪吃蛇游戏实现

在尝试开发的过程中，使用 JavaScript 实现了贪吃蛇游戏，并成功运行。

思路：利用10px*10px的div层作为“像素”，通过40*40矩阵包含160个“像素”构建游戏界面。

具体代码实现如下：

// JavaScript Document
alert("键盘的方向键控制方向，空格键暂停。\nLIFE制作\nhttp://blog.csdn.net/anhulife");
// 添加基本的图形块，即160个10 * 10的层组成的二维矩阵
var rowindex = new Array(40);
var colindex;
var cell;
// 图像单元的定义
var backcolor = "black";
for(var i = 0; i < 40; i ++ )
{ 
colindex = new Array(40);
for(var j = 0; j < 40; j ++ )
{ 
// 设置每个单元的属性
cell = document.createElement("div");
cell.style.backgroundColor = backcolor;
cell.style.width = "10px";
cell.style.height = "10px";
cell.style.position = "absolute";
cell.style.left = "" + (j * 10 + 100) + "px";
cell.style.top = "" + (i * 10 + 100) + "px";
cell.style.overflow = "hidden";
// 添加单元
document.body.appendChild(cell);
// 填充列组
colindex[j] = cell;
} 
// 填充行组
rowindex[i] = colindex;
} 
// 贪吃蛇类的定义，基于基本的图像单元
function snake()
{ 
// 定义蛇的身体，并初始化
this.bodycolor = "white";
this.bodys = new Array();
for(var i = 20; i < 25; i ++ )
{ 
rowindex[20][i].style.backgroundColor = this.bodycolor;
// rowindex的第一个坐标是行标，第二是列标
this.bodys.push(rowindex[20][i]);
} 
// 定义蛇的头部坐标，第一个是行标, 第二个是列标
this.head = [20, 20];
// 定义蛇的前进方向，0代表左、1代表下、2代表右、3代表上
this.direct = 0;
} 
// 移动模块
function move()
{ 
// 根据前进方向计算头部的坐标
switch(this.direct)
{ 
case 0 :
this.head[1] -= 1;
break;
case 1 :
this.head[0] += 1;
break;
case 2 :
this.head[1] += 1;
break;
case 3 :
this.head[0] -= 1;
break;
} 
// 判断是否越界
if(this.head[0] < 0 || this.head[0] > 39 || this.head[1] < 0 || this.head[1] > 39)
{ 
// 如果越界则返回false
return false;
} 
else
// 如果没有越界则检查下一个元素的性质，如果是食物则吃掉，并再生成食物。如果是其自身则返回false
if(this.head[0] == food[0] && this.head[1] == food[1])
{ 
// 如果是食物
rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor;
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
score++;
makefood();
return true;
} 
else
// 如果是它自身
if(rowindex[this.head[0]][this.head[1]].style.backgroundColor == this.bodycolor)
{ 
if(rowindex[this.head[0]][this.head[1]] == this.bodys.pop())// 如果是它的尾部
{ 
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
return true;
} 
// 如果不是尾部
return false;
} 
// 以上情况都不是
this.bodys.pop().style.backgroundColor = backcolor;
rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor;
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
return true;
} 
snake.prototype.move = move;
// 生成食物模块
var foodcolor = "blue";
var food = [20, 17];
rowindex[food[0]][food[1]].style.backgroundColor = foodcolor;
function makefood()
{ 
var tempfood;
var tempelement;
out :
while(true)
{ 
tempfood = [Math.round(Math.random() * 39), Math.round(Math.random() * 39)];
tempelement = rowindex[tempfood[0]][tempfood[1]];
for(var i in s.bodys)
{ 
if(s.bodys[i] == tempelement)
{ 
// 如果随机生成的食物在蛇的身体上，则跳出继续
continue out;
} 
// 生成食物成功
break out;
} 
} 
food = tempfood;
rowindex[food[0]][food[1]].style.backgroundColor = foodcolor;
} 
// 转向模块和暂停模块
document.onkeydown = turnorstop;
function turnorstop(event)
{ 
if(window.event != undefined)
{ 
if(parseInt(window.event.keyCode)==32)
{ 
alert("休息一下");
} 
else
{ 
switch(parseInt(window.event.keyCode))
{ 
case 37 :
if(s.direct!=2)
s.direct = 0;
break;
case 38 :
if(s.direct!=1)
s.direct = 3;
break;
case 39 :
if(s.direct!=0)
s.direct = 2;
break;
case 40 :
if(s.direct!=3)
s.direct = 1;
break;
} 
} 
} 
else
{ 
if(parseInt(event.which)==32)
{ 
alert("休息一下");
} 
else
{ 
switch(parseInt(event.which))
{ 
case 37 :
if(s.direct!=2)
s.direct = 0;
break;
case 38 :
if(s.direct!=1)
s.direct = 3;
break;
case 39 :
if(s.direct!=0)
s.direct = 2;
break;
case 40 :
if(s.direct!=3)
s.direct = 1;
break;
} 
} 
} 
} 
// 启动游戏模块
var s = new snake();
var time = 60;//蛇的速度指数
function startmove()
{ 
if(s.move())
{ 
setTimeout(startmove, time);
} 
else
{ 
alert("GAME OVER\n您的分数是:"+score+"分");
} 
} 
//分数设置
var score = -1;
//运行游戏
startmove();

在网页中连接该JS文件即可。