- 相關(guān)推薦
javascript實(shí)現(xiàn)貪吃蛇代碼
在習(xí)作的過(guò)程中嘗試著貪吃蛇游戲用JS實(shí)現(xiàn)了。竟然成功了。
思路：使用10px*10px的div層擔(dān)當(dāng)“像素”，然后使用40*40矩陣160個(gè)“像素”構(gòu)成了游戲的界面。
下面是代碼：
復(fù)制代碼 代碼如下:
// JavaScript Document
alert("鍵盤(pán)的方向鍵控制方向，空格鍵暫停。nLIFE制作nhttp://blog.csdn.net/anhulife");
// 添加基本的圖形塊，即160個(gè)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 ++ )
{
// 設(shè)置每個(gè)單元的屬性
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;
}
// 貪吃蛇類(lèi)的定義，基于基本的圖像單元
function snake()
{
// 定義蛇的身體，并初始化
this.bodycolor = "white";
this.bodys = new Array();
for(var i = 20; i < 25; i ++ )
{
rowindex[20][i].style.backgroundColor = this.bodycolor;
// rowindex的第一個(gè)坐標(biāo)是行標(biāo)，第二是列標(biāo)
this.bodys.push(rowindex[20][i]);
}
// 定義蛇的頭部坐標(biāo)，第一個(gè)是行標(biāo), 第二個(gè)是列標(biāo)
this.head = [20, 20];
// 定義蛇的前進(jìn)方向，0代表左、1代表下、2代表右、3代表上
this.direct = 0;
}
// 移動(dòng)模塊
function move()
{
// 根據(jù)前進(jìn)方向計(jì)算頭部的坐標(biāo)
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
// 如果沒(méi)有越界則檢查下一個(gè)元素的性質(zhì)，如果是食物則吃掉，并再生成食物。如果是其自身則返回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)
{
// 如果隨機(jī)生成的食物在蛇的身體上，則跳出繼續(xù)
continue out;
}
// 生成食物成功
break out;
}
}
food = tempfood;
rowindex[food[0]][food[1]].style.backgroundColor = foodcolor;
}
// 轉(zhuǎn)向模塊和暫停模塊
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;
}
}
}
}
// 啟動(dòng)游戲模塊
var s = new snake();
var time = 60;//蛇的速度指數(shù)
function startmove()
{
if(s.move())
{
setTimeout(startmove, time);
}
else
{
alert("GAME OVERn您的分?jǐn)?shù)是:"+score+"分");
}
}
//分?jǐn)?shù)設(shè)置
var score = -1;
//運(yùn)行游戲
startmove();
在網(wǎng)頁(yè)中連接該JS文件即可。
【javascript實(shí)現(xiàn)貪吃蛇代碼】相關(guān)文章：
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)刷新代碼段08-07
常用排序算法之JavaScript實(shí)現(xiàn)代碼段06-04
關(guān)jQuery彈出窗口簡(jiǎn)單實(shí)現(xiàn)代碼-javascript編程06-07
在Java中執(zhí)行JavaScript代碼07-14
關(guān)于ASP.NET使用JavaScript顯示信息提示窗口實(shí)現(xiàn)原理及代碼05-09
將php實(shí)現(xiàn)過(guò)濾UBB代碼09-11
網(wǎng)頁(yè)程序設(shè)計(jì)之實(shí)用JavaScript代碼段09-23