Home > Web Front-end > JS Tutorial > javascript snake implementation code_javascript skills

javascript snake implementation code_javascript skills

WBOY
Release: 2016-05-16 18:58:19
Original
1002 people have browsed it

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 < 40; i )
{
colindex = new Array(40);
for(var j = 0; j < 40; 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 < 25; 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] < 0 || this.head[0] > 39 || this.head[1] < 0 || 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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template