Home > Developer > JavaScript
This is a backup of the JS Snake game for personal exercises,
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JS snake-exercises </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;/* Number of squares in the horizontal direction */
This. height = 20;/* Number of squares in the vertical direction */
This. speed = 250;/* the smaller the speed value, the 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 adjustment button */
Document. getElementById ("selSpeed"). onchange = function (){
Common. speed = this. value;
}
/* Adjust the size 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 the function and create a table */
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; x ++ ){
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 the game-Listen to the keyboard, create food, and refresh the 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 the tail and move forward to determine whether the game is over (bite yourself or remove the boundary )*/
This. Move = function (){
Document. getElementById ("box _" + this. pos [0]. X + "_" + this. pos [0]. Y). className = "";
// All steps forward
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 header position
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 determine 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 ();/* bit yourself */break ;}
Var obj = document. getElementById ("box _" + this. pos [I]. X + "_" + this. pos [I]. Y );
If (obj) obj. className = "snake"; else {this. Over ();/* remove boundary */break ;}
}
This. isDone = true;
};
/* Game end */
This. Over = function (){
ClearInterval (Common. workThread );
Alert ("the game is 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 the 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-create food at random locations */
This. Create = function (pos ){
Document. getElementById ("box _" + this. pos. X + "_" + this. pos. Y). className = "";
Var x = 0, y = 0, isCover = false;
/* Exclude the location 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>
</Head>
<Body>
<Div id = "pannel" style = "margin-bottom: 10px;"> </div>
<Select id = "selSize">
<Option value = "20"> 20*20 </option>
<Option value = "30"> 30*30 </option>
<Option value = "40"> 40*40 </option>
</Select>
<Select id = "selSpeed">
<Option value = "500"> speed-slow </option>
<Option value = "250" selected = "selected"> speed-medium </option>
<Option value = "100"> speed-fast </option>
</Select>
<Input type = "button" id = "btnStart" value = "start"/>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
