JavaScript greedy snake implements code _javascript skills

In the process of the exercises to try the snake game with JS to achieve. Had succeeded.
Idea: Use the 10px*10px div layer as "pixel" and then use the 40*40 matrix 160 "Pixels" to make up the game's interface.
Here's the code:

Copy Code code as follows:

JavaScript Document
Alert ("Keyboard key control direction, SPACEBAR paused.") \nlife making \nhttp://blog.csdn.net/anhulife ");
Add a basic block of graphics, a two-dimensional matrix consisting of 160 10 * 10 layers
var rowindex = new Array (40);
var Colindex;
var cell;
Definition of image Unit
var BackColor = "Black";
for (var i = 0; i < i + +)
{
Colindex = new Array (40);
for (var j = 0; J < J + +)
{
Set properties for each cell
Cell = document.createelement ("div");
Cell.style.backgroundColor = BackColor;
Cell.style.width = "10px";
Cell.style.height = "10px";
Cell.style.position = "absolute";
Cell.style.left = "" + (J * + +) + "px";
Cell.style.top = "" + (I * +) + "px";
Cell.style.overflow = "hidden";
Add a unit
Document.body.appendChild (cell);
Populating column Groups
COLINDEX[J] = cell;
}
Populating row Groups
Rowindex[i] = Colindex;
}
Definition of gluttonous snake, based on basic image unit
Function Snake ()
{
Define the body of the serpent, and initialize
This.bodycolor = "White";
This.bodys = new Array ();
for (var i = < i + +)
{
Rowindex[20][i].style.backgroundcolor = This.bodycolor;
The first coordinate of the rowindex is the row mark and the second is the column label
This.bodys.push (Rowindex[20][i]);
}
Define the head coordinates of the snake, the first is the row mark, the second is the column label
This.head = [20, 20];
Define the direction of the snake, 0 for the left, 1 for the next, 2 for the right, 3 on behalf of the
This.direct = 0;
}
Mobile Module
function Move ()
{
Calculate the coordinates of the head according to the forward direction
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
}
To determine whether or not to cross borders
if (This.head[0] < 0 | | this.head[0] > | | | this.head[1] < 0 | | this.head[1] > 39)
{
Returns False if the line is crossed
return false;
}
Else
If there is no crossing, check the properties of the next element, if the food is eaten, and then produce food. Returns False if it is itself
if (this.head[0] = = Food[0] && this.head[1] = = food[1])
{
If it's food,
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 it is its own
if (Rowindex[this.head[0]][this.head[1]].style.backgroundcolor = = This.bodycolor)
{
if (rowindex[this.head[0]][this.head[1]] = = This.bodys.pop ())//If it's the tail
{
This.bodys.unshift (Rowindex[this.head[0]][this.head[1]]);
return true;
}
If it's not the tail
return false;
}
None of the above is
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;
Generate Food Module
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 () *), Math.Round (Math.random () * 39)];
Tempelement = rowindex[tempfood[0]][tempfood[1]];
for (var i in S.bodys)
{
if (s.bodys[i] = = tempelement)
{
If the randomly generated food is on the snake's body, it jumps out and continues
Continue out;
}
Generate Food success
Break out;
}
}
food = Tempfood;
Rowindex[food[0]][food[1]].style.backgroundcolor = Foodcolor;
}
Steering module and Suspend module
Document.onkeydown = Turnorstop;
function Turnorstop (event)
{
if (window.event!= undefined)
{
if (parseint (window.event.keyCode) ==32)
{
Alert ("Rest");
}
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 ("Rest");
}
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
}
}
}
}
Start the game module
var s = new Snake ();
var time = Speed Index of the 60;//snake
function Startmove ()
{
if (S.move ())
{
SetTimeout (Startmove, time);
}
Else
{
Alert ("GAME over\n your score is:" +score+ "cent");
}
}
Score Settings
var score =-1;
Run the game
Startmove ();

The JS file can be connected to the Web page.