JS寫的貪吃蛇游戲_電腦知識網

　　JS貪吃蛇游戲個人練習之用放在這備份一下

復制代碼代碼如下:

　　
<!DOCTYPE html>
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>JS貪吃蛇練習</title>
<style type="text/css">
#pannel table {
bordercollapse: collapse;
}
#pannel table td {
border: px solid #;
width: px;
height: px;
fontsize: ;
lineheight: ;
overflow: hidden;
}
#pannel table snake {
backgroundcolor: green;
}
#pannel table food {
backgroundcolor: blue;
}
</style>
<script type="text/javascript">
var Direction = new function () {
thisUP = ;
thisRIGHT = ;
thisDOWN = ;
thisLEFT = ;
};
var Common = new function () {
thiswidth = ; /*水平方向方格數*/
thisheight = ; /*垂直方向方格數*/
thisspeed = ; /*速度值越小越快*/
thisworkThread = null;
};
var Main = new function () {
var control = new Control();
windowonload = function () {
controlInit("pannel");
/*開始按鈕*/
documentgetElementById("btnStart")onclick = function () {
controlStart();
thisdisabled = true;
documentgetElementById("selSpeed")disabled = true;
documentgetElementById("selSize")disabled = true;
};
/*調速度按鈕*/
documentgetElementById("selSpeed")onchange = function () {
Commonspeed = thisvalue;
}
/*調大小按鈕*/
documentgetElementById("selSize")onchange = function () {
Commonwidth = thisvalue;
Commonheight = thisvalue;
controlInit("pannel");
}
};
};
/*控制器*/
function Control() {
thissnake = new Snake();
thisfood = new Food();
/*初始化函數創建表格*/
thisInit = function (pid) {
var html = [];
htmlpush("<table>");
for (var y = ; y < Commonheight; y++) {
htmlpush("<tr>");
for (var x = ; x < Commonwidth; x++) {
htmlpush(<td id="box_ + x + "_" + y + "> </td>);
}
htmlpush("</tr>");
}
htmlpush("</table>");
thispannel = documentgetElementById(pid);
thispannelinnerHTML = htmljoin("");
};
/*開始游戲監聽鍵盤創建食物刷新界面線程*/
thisStart = function () {
var me = this;
thisMoveSnake = function (ev) {
var evt = windowevent || ev;
mesnakeSetDir(evtkeyCode);
};
try {
documentattachEvent("onkeydown" thisMoveSnake);
} catch (e) {
documentaddEventListener("keydown" thisMoveSnake false);
}
thisfoodCreate();
CommonworkThread = setInterval(function () {
mesnakeEat(mefood); mesnakeMove();
} Commonspeed);
};
}
/*蛇*/
function Snake() {
thisisDone = false;
thisdir = DirectionRIGHT;
thispos = new Array(new Position());
/*移動擦除尾部向前移動判斷游戲結束(咬到自己或者移出邊界)*/
thisMove = function () {
documentgetElementById("box_" + thispos[]X + "_" + thispos[]Y)className = "";
//所有向前移動一步
for (var i = ; i < thisposlength ; i++) {
thispos[i]X = thispos[i + ]X;
thispos[i]Y = thispos[i + ]Y;
}
//重新設置頭的位置
var head = thispos[thisposlength ];
switch (thisdir) {
case DirectionUP:
headY;
break;
case DirectionRIGHT:
headX++;
break;
case DirectionDOWN:
headY++;
break;
case DirectionLEFT:
headX;
break;
}
thispos[thisposlength ] = head;
//遍歷畫蛇同時判斷游戲結束
for (var i = ; i < thisposlength; i++) {
var isExits = false;
for (var j = i + ; j < thisposlength; j++)
if (thispos[j]X == thispos[i]X && thispos[j]Y == thispos[i]Y) {
isExits = true;
break;
}
if (isExits) { thisOver();/*咬自己*/ break; }
var obj = documentgetElementById("box_" + thispos[i]X + "_" + thispos[i]Y);
if (obj) objclassName = "snake"; else { thisOver();/*移出邊界*/ break; }
}
thisisDone = true;
};
/*游戲結束*/
thisOver = function () {
clearInterval(CommonworkThread);
alert("游戲結束！");
}
/*吃食物*/
thisEat = function (food) {
var head = thispos[thisposlength ];
var isEat = false;
switch (thisdir) {
case DirectionUP:
if (headX == foodposX && headY == foodposY + ) isEat = true;
break;
case DirectionRIGHT:
if (headY == foodposY && headX == foodposX ) isEat = true;
break;
case DirectionDOWN:
if (headX == foodposX && headY == foodposY ) isEat = true;
break;
case DirectionLEFT:
if (headY == foodposY && headX == foodposX + ) isEat = true;
break;
}
if (isEat) {
thispos[thisposlength] = new Position(foodposX foodposY);
foodCreate(thispos);
}
};
/*控制移動方向*/
thisSetDir = function (dir) {
switch (dir) {
case DirectionUP:
if (thisisDone && thisdir != DirectionDOWN) { thisdir = dir; thisisDone = false; }
break;
case DirectionRIGHT:
if (thisisDone && thisdir != DirectionLEFT) { thisdir = dir; thisisDone = false; }
break;
case DirectionDOWN:
if (thisisDone && thisdir != DirectionUP) { thisdir = dir; thisisDone = false; }
break;
case DirectionLEFT:
if (thisisDone && thisdir != DirectionRIGHT) { thisdir = dir; thisisDone = false; }
break;
}
};
}
/*食物*/
function Food() {
thispos = new Position();
/*創建食物隨機位置創建立*/
thisCreate = function (pos) {
documentgetElementById("box_" + thisposX + "_" + thisposY)className = "";
var x = y = isCover = false;
/*排除蛇的位置*/
do {
x = parseInt(Mathrandom() * (Commonwidth ));
y = parseInt(Mathrandom() * (Commonheight ));
isCover = false;
if (pos instanceof Array) {
for (var i = ; i < poslength; i++) {
if (x == pos[i]X && y == pos[i]Y) {
isCover = true;
break;
}
}
}
} while (isCover);
thispos = new Position(x y);
documentgetElementById("box_" + x + "_" + y)className = "food";
};
}
function Position(x y) {
thisX = ;
thisY = ;
if (argumentslength >= ) thisX = x;
if (argumentslength >= ) thisY = y;
}
</script>
</head>
<body>
<div id="pannel" style="marginbottom: px;"></div>
<select id="selSize">
<option value="">*</option>
<option value="">*</option>
<option value="">*</option>
</select>
<select id="selSpeed">
<option value="">速度慢</option>
<option value="" selected="selected">速度中</option>
<option value="">速度快</option>
</select>
<input type="button" id="btnStart" value="開始" />
</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19814.html