javascript snake implementation code_javascript skills

During the practice process, I tried to implement the snake game using JS. It actually worked.
Idea: Use a 10px*10px div layer to act as the "pixel", and then use a 40*40 matrix of 160 "pixels" to form the game interface.
The following is the code:

Copy the code The code is as follows:

// JavaScript Document
alert("The arrow keys of the keyboard control the direction, and the space bar pauses. LIFE production nhttp://blog.csdn.net/anhulife");
// Add basic graphics blocks, that is, a two-dimensional matrix composed 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 {
colindex = new Array(40);
for(var j = 0; j {
// Set the attributes of 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 * 10 100) "px";
cell.style.top = "" (i * 10 100) " px";
cell.style.overflow = "hidden";
// Add cell
document.body.appendChild(cell);
// Fill column group
colindex[j] = cell;
}
// Fill row group
rowindex[i] = colindex;
}
// Definition of snake type, based on basic image unit
function snake()
{
// Define the body of the snake and initialize
this.bodycolor = "white";
this.bodys = new Array();
for(var i = 20; i {
rowindex[20][i].style.backgroundColor = this.bodycolor;
//The first coordinate of rowindex is the row index, and the second is Column index
this.bodys.push(rowindex[20][i]);
}
// Define the coordinates of the snake’s head, the first one is the row index, the second one is the column index
this.head = [20, 20];
// Define the direction of the snake, 0 represents left, 1 represents down, 2 represents right, 3 represents up
this.direct = 0;
}
//Move 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;
}
// Determine whether Out of bounds
if(this.head[0] 39 || this.head[1] 39)
{
// If it is out of bounds, return false
return false;
}
else
// If it is not out of bounds, check the properties of the next element, and eat it if it is food. and regenerated into food.If it is itself, return false
if(this.head[0] == food[0] && this.head[1] == food[1])
{
// If it is 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 itself
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 is its tail
{
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
return true;
}
// If not the tail
return false;
}
// None of the above
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() * 39), 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, jump out and continue
continue out;
}
// Generate food successfully
break out;
}
}
food = tempfood;
rowindex[food[0]][food[1]].style.backgroundColor = foodcolor;
}
// Turning module and pausing module
document.onkeydown = turnorstop;
function turnorstop(event)
{
if(window.event != undefined)
{
if(parseInt(window .event.keyCode)==32)
{
alert("Take a break");
}
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("Take a break");
}
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 = 60;//Snake’s speed index
function startmove()
{
if(s.move())
{
setTimeout(startmove, time);
}
else
{
alert("GAME OVERn Your score is:" score "point");
}
}
//Score setting
var score = -1;
//Run the game
startmove();

Just connect the JS file in the web page.