<!DOCTYPE html>
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Snake-Eating</title>
<style type="text/css">
#pannel table {
border-collapse: collapse;
}
#pannel table td {
border: 1px solid #808080;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
overflow: hidden;
}
#pannel table .snake {
background-color: green;
}
#pannel table .food {
background-color: blue;
}
</style>
<script type="text/javascript">
var Direction = new function () {
= 38;
= 39;
= 40;
= 37;
};
var Common = new function () {
= 20; /*Number of horizontal grids*/
= 20; /*Number of squares in vertical direction*/
= 250; /*Speed The smaller the value, the faster the*/
= null;
};
var Main = new function () {
var control = new Control();
= function () {
("pannel");
/*Start button*/
("btnStart").onclick = function () {
();
= true;
("selSpeed").disabled = true;
("selSize").disabled = true;
};
/*Speed button*/
("selSpeed").onchange = function () {
= ;
}
/*Resize button*/
("selSize").onchange = function () {
= ;
= ;
("pannel");
}
};
};
/*Controller*/
function Control() {
= new Snake();
= new Food();
/*Initialize the function, create the table*/
= function (pid) {
var html = [];
("<table>");
for (var y = 0; y < ; y++) {
("<tr>");
for (var x = 0; x < ; x++) {
('<td _" + y + '"> </td>');
}
("</tr>");
}
("</table>");
= (pid);
= ("");
};
/*Start the game - listen to the keyboard, create food, refresh the interface thread*/
= function () {
var me = this;
= function (ev) {
var evt = || ev;
();
};
try {
("onkeydown", );
} catch (e) {
("keydown", , false);
}
();
= setInterval(function () {
(); ();
}, );
};
}
/*snake*/
function Snake() {
= false;
= ;
= new Array(new Position());
/*Move - Erase the tail, move forward, and judge the end of the game (bite yourself or move out of the boundary)*/
= function () {
("box_" + [0].X + "_" + [0].Y).className = "";
//All Move forward one step
for (var i = 0; i < - 1; i++) {
[i].X = [i + 1].X;
[i].Y = [i + 1].Y;
}
//Reset the header position
var head = [ - 1];
switch () {
case :
--;
break;
case :
++;
break;
case :
++;
break;
case :
--;
break;
}
[ - 1] = head;
//Travel the snake and judge the end of the game at the same time
for (var i = 0; i < ; i++) {
var isExits = false;
for (var j = i + 1; j < ; j++)
if ([j].X == [i].X && [j].Y == [i].Y) {
isExits = true;
break;
}
if (isExits) { ();/*Bite yourself*/ break; }
var obj = ("box_" + [i].X + "_" + [i].Y);
if (obj) = "snake"; else { ();/*Move out of bounds*/ break; }
}
= true;
};
/*game over*/
= function () {
clearInterval();
alert("The game ends!");
}
/*Eat food*/
= function (food) {
var head = [ - 1];
var isEat = false;
switch () {
case :
if ( == && == + 1) isEat = true;
break;
case :
if ( == && == - 1) isEat = true;
break;
case :
if ( == && == - 1) isEat = true;
break;
case :
if ( == && == + 1) isEat = true;
break;
}
if (isEat) {
[] = new Position(, );
();
}
};
/*Control the direction of movement*/
= function (dir) {
switch (dir) {
case :
if ( && != ) { = dir; = false; }
break;
case :
if ( && != ) { = dir; = false; }
break;
case :
if ( && != ) { = dir; = false; }
break;
case :
if ( && != ) { = dir; = false; }
break;
}
};
}
/*food*/
function Food() {
= new Position();
/*Create food - Random location creation*/
= function (pos) {
("box_" + + "_" + ).className = "";
var x = 0, y = 0, isCover = false;
/*Exclude snake location*/
do {
x = parseInt(() * ( - 1));
y = parseInt(() * ( - 1));
isCover = false;
if (pos instanceof Array) {
for (var i = 0; i < ; i++) {
if (x == pos[i].X && y == pos[i].Y) {
isCover = true;
break;
}
}
}
} while (isCover);
= new Position(x, y);
("box_" + x + "_" + y).className = "food";
};
}
function Position(x, y) {
= 0;
= 0;
if ( >= 1) = x;
if ( >= 2) = y;
}
</script>
</head>
<body>
<div style="margin-bottom: 10px;"></div>
<select >
<option value="20">20*20</option>
<option value="30">30*30</option>
<option value="40">40*40</option>
</select>
<select >
<option value="500">Speed-slow</option>
<option value="250" selected="selected">Speed-Medium</option>
<option value="100">Speed-fast</option>
</select>
<input type="button" value="start" />
</body>
</html>