在习作的过程中尝试着贪吃蛇游戏用JS实现了。竟然成功了。
思路：使用10px*10px的div层担当“像素”，然后使用40*40矩阵160个“像素”构成了游戏的界面。
下面是代码：
复制代码 代码如下:
// JavaScript Document
alert("键盘的方向键控制方向，空格键暂停。nLIFE制作n");
// 添加基本的图形块，即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 = teElement("div");
groundColor = backcolor;
h = "10px";
ht = "10px";
tion = "absolute";
= "" + (j * 10 + 100) + "px";
= "" + (i * 10 + 100) + "px";
flow = "hidden";
// 添加单元
ndChild(cell);
// 填充列组
colindex[j] = cell;
}
// 填充行组
rowindex[i] = colindex;
}
// 贪吃蛇类的'定义，基于基本的图像单元
function snake()
{
// 定义蛇的身体，并初始化
color = "white";
s = new Array();
for(var i = 20; i < 25; i ++ )
{
rowindex[20][i]groundColor = color;
// rowindex的第一个坐标是行标，第二是列标
(rowindex[20][i]);
}
// 定义蛇的头部坐标，第一个是行标, 第二个是列标
= [20, 20];
// 定义蛇的前进方向，0代表左、1代表下、2代表右、3代表上
ct = 0;
}
// 移动模块
function move()
{
// 根据前进方向计算头部的坐标
switch(ct)
{
case 0 :
[1] -= 1;
break;
case 1 :
[0] += 1;
break;
case 2 :
[1] += 1;
break;
case 3 :
[0] -= 1;
break;
}
// 判断是否越界
if([0] < 0 || [0] > 39 || [1] < 0 || [1] > 39)
{
// 如果越界则返回false
return false;
}
else
// 如果没有越界则检查下一个元素的性质，如果是食物则吃掉，并再生成食物。如果是其自身则返回false
if([0] == food[0] && [1] == food[1])
{
// 如果是食物
rowindex[[0]][[1]]groundColor = color;
ift(rowindex[[0]][[1]]);
score++;
makefood();
return true;
}
else
// 如果是它自身
if(rowindex[[0]][[1]]groundColor == color)
{
if(rowindex[[0]][[1]] == ())// 如果是它的尾部
{
ift(rowindex[[0]][[1]]);
return true;
}
// 如果不是尾部
return false;
}
// 以上情况都不是
()groundColor = backcolor;
rowindex[[0]][[1]]groundColor = color;
ift(rowindex[[0]][[1]]);
return true;
}
= move;
// 生成食物模块
var foodcolor = "blue";
var food = [20, 17];
rowindex[food[0]][food[1]]groundColor = foodcolor;
function makefood()
{
var tempfood;
var tempelement;
out :
while(true)
{
tempfood = [d(om() * 39), d(om() * 39)];
tempelement = rowindex[tempfood[0]][tempfood[1]];
for(var i in s)
{
if(s[i] == tempelement)
{
// 如果随机生成的食物在蛇的身体上，则跳出继续
continue out;
}
// 生成食物成功
break out;
}
}
food = tempfood;
rowindex[food[0]][food[1]]groundColor = foodcolor;
}
// 转向模块和暂停模块
ydown = turnorstop;
function turnorstop(event)
{
if(t != undefined)
{
if(parseInt(ode)==32)
{
alert("休息一下");
}
else
{
switch(parseInt(ode))
{
case 37 :
if(ct!=2)
ct = 0;
break;
case 38 :
if(ct!=1)
ct = 3;
break;
case 39 :
if(ct!=0)
ct = 2;
break;
case 40 :
if(ct!=3)
ct = 1;
break;
}
}
}
else
{
if(parseInt(h)==32)
{
alert("休息一下");
}
else
{
switch(parseInt(h))
{
case 37 :
if(ct!=2)
ct = 0;
break;
case 38 :
if(ct!=1)
ct = 3;
break;
case 39 :
if(ct!=0)
ct = 2;
break;
case 40 :
if(ct!=3)
ct = 1;
break;
}
}
}
}
// 启动游戏模块
var s = new snake();
var time = 60;//蛇的速度指数
function startmove()
{
if(())
{
setTimeout(startmove, time);
}
else
{
alert("GAME OVERn您的分数是:"+score+"分");
}
}
//分数设置
var score = -1;
//运行游戏
startmove();
在网页中连接该JS文件即可。
书香门第
