在習作的過程中嘗試著貪吃蛇遊戲用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檔案即可。
