<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js Greedy Snake-practice </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 () {
This. up = 38;
This. right = 39;
This. down = 40;
This. left = 37;
};
var Common = new function () {
This.width = 20; /* Horizontal Square number * *
This.height = 20; * Number of vertical squares/*
This.speed = 250; /* Speed value smaller faster
This.workthread = null;
};
var Main = new function () {
var control = new control ();
Window.onload = function () {
Control. Init ("Pannel");
/* Start button * *
document.getElementById ("Btnstart"). onclick = function () {
Control. Start ();
This.disabled = true;
document.getElementById ("Selspeed"). Disabled = true;
document.getElementById ("Selsize"). Disabled = true;
};
/* Speed control button * *
document.getElementById ("Selspeed"). onchange = function () {
Common.speed = This.value;
}
/* Resize Button/*
document.getElementById ("Selsize"). onchange = function () {
Common.width = This.value;
Common.height = This.value;
Control. Init ("Pannel");
}
};
};
/* Controller */
function control () {
This.snake = new Snake ();
This.food = new food ();
/* Initialize function, create form * *
This. Init = function (PID) {
var html = [];
Html.push ("<table>");
for (var y = 0; y < common.height; y++) {
Html.push ("<tr>");
for (var x = 0; x < Common.width + +) {
Html.push (' <td id= ' box_ ' + x + ' _ ' + y + ' "> </td> ');
}
Html.push ("</tr>");
}
Html.push ("</table>");
This.pannel = document.getElementById (PID);
This.pannel.innerHTML = Html.join ("");
};
/* Start Game-Monitor keyboard, create food, refresh interface thread
This. Start = function () {
var me = this;
This. Movesnake = function (EV) {
var evt = window.event | | Ev
Me.snake.SetDir (Evt.keycode);
};
try {
Document.attachevent ("onkeydown", this. Movesnake);
catch (e) {
Document.addeventlistener ("KeyDown", this. Movesnake, false);
}
This.food.Create ();
Common.workthread = setinterval (function () {
Me.snake.Eat (Me.food); Me.snake.Move ();
}, Common.speed);
};
}
* * Snake * *
function Snake () {
This.isdone = false;
This.dir = Direction.right;
This.pos = new Array (new Position ());
/* Move-erase tail, move forward, judge the end of the game (bite yourself or move out of the boundary)
This. move = function () {
document.getElementById ("Box_" + this.pos[0]. X + "_" + this.pos[0]. Y). ClassName = "";
All move forward one step
for (var i = 0; i < this.pos.length-1; i++) {
This.pos[i]. X = this.pos[i + 1]. X
This.pos[i]. Y = this.pos[i + 1]. Y
}
Reset the position of the header
var head = this.pos[this.pos.length-1];
Switch (this.dir) {
Case DIRECTION.UP:
Head. y--;
Break
Case Direction.right:
Head. x + +;
Break
Case Direction.down:
Head. y++;
Break
Case Direction.left:
Head. x--;
Break
}
This.pos[this.pos.length-1] = head;
Traverse the snake and judge the end of the game
for (var i = 0; i < this.pos.length; i++) {
var isexits = false;
for (var j = i + 1; j < This.pos.length J + +)
if (this.pos[j). X = = This.pos[i]. X && This.pos[j]. Y = = This.pos[i]. Y) {
Isexits = true;
Break
}
if (isexits) {this. Over (); * * bite oneself/break; }
var obj = document.getElementById ("Box_" + this.pos[i]. X + "_" + this.pos[i]. Y);
if (obj) obj.classname = "Snake"; else {this. Over ();/* Move out boundary/break; }
}
This.isdone = true;
};
/* The game is over *
This. over = function () {
Clearinterval (Common.workthread);
Alert ("Game Over!") ");
}
* * Eat food/
This. Eat = function (food) {
var head = this.pos[this.pos.length-1];
var iseat = false;
Switch (this.dir) {
Case DIRECTION.UP:
if (head. X = = Food.pos.x && head. Y = = food.pos.y + 1) iseat = true;
Break
Case Direction.right:
if (head. Y = = Food.pos.y && head. X = = food.pos.x-1) Iseat = true;
Break
Case Direction.down:
if (head. X = = Food.pos.x && head. Y = = food.pos.y-1) Iseat = true;
Break
Case Direction.left:
if (head. Y = = Food.pos.y && head. X = = food.pos.x + 1) iseat = true;
Break
}
if (iseat) {
This.pos[this.pos.length] = new Position (food.pos.x, FOOD.POS.Y);
Food. Create (This.pos);
}
};
/* Control Movement direction *
This. Setdir = function (dir) {
Switch (dir) {
Case DIRECTION.UP:
if (this.isdone && this.dir!= direction.down) {this.dir = dir; this.isdone = false;}
Break
Case Direction.right:
if (this.isdone && this.dir!= direction.left) {this.dir = dir; this.isdone = false;}
Break
Case Direction.down:
if (this.isdone && this.dir!= direction.up) {this.dir = dir; this.isdone = false;}
Break
Case Direction.left:
if (this.isdone && this.dir!= direction.right) {this.dir = dir; this.isdone = false;}
Break
}
};
}
* * Food/
function Food () {
This.pos = new Position ();
/* Create food-random location creation * *
This. Create = function (POS) {
document.getElementById ("Box_" + this.pos.x + "_" + this.pos.y). ClassName = "";
var x = 0, y = 0, iscover = false;
/* Remove the position of the snake * *
do {
x = parseint (Math.random () * (common.width-1));
y = parseint (Math.random () * (common.height-1));
Iscover = false;
if (pos instanceof Array) {
for (var i = 0; i < pos.length; i++) {
if (x = = Pos[i]. X && y = = Pos[i]. Y) {
Iscover = true;
Break
}
}
}
while (Iscover);
This.pos = new Position (x, y);
document.getElementById ("Box_" + x + "_" + y). ClassName = "food";
};
}
function Position (x, y) {
This. X = 0;
This. Y = 0;
if (arguments.length >= 1) this. x = x;
if (arguments.length >= 2) this. y = y;
}
</script>
<body>
<div id= "Pannel" style= "margin-bottom:10px;" ></div>
<select id= "Selsize" >
<option value= ">20*20</option>"
<option value= ">30*30</option>"
<option value= ">40*40</option>"
</select>
<select id= "Selspeed" >
<option value= > Speed-Slow </option>
<option value= "selected=" "Selected" > Speed-Middle </option>
<option value= > Speed-Fast </option>
</select>
<input type= "button" id= "Btnstart" value= "Start"/>
</body>
