Javascript code _ javascript skills

Recently I spent half a month studying Javascript and finally completed the "Javascript authoritative guide" (recommended this book, entry level. In the course of learning, it is interesting to use JS to achieve dynamic results. In the course of study, I tried to use JS to implement the Snake game. It turned out to be successful.
Idea: Use the p layer of 10px * 10px to act as "pixels", and then use the 40*40 matrix with 160 "pixels" to form the game interface.
The following code is used:

The Code is as follows:

// JavaScript Document
Alert ("the direction key of the keyboard controls the direction. The space key is paused. Create \ nhttp: // blog.csdn.net/anhulife ");
// Add a basic graphic block, that is, a two-dimensional matrix consisting of 160 10*10 layers
Var rowindex = new Array (40 );
Var colindex;
Var cell;
// Definition of image units
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 unit
Cell = document. createElement ("p ");
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 a Unit
Document. body. appendChild (cell );
// Fill the column group
Colindex [j] = cell;
}
// Fill the row Group
Rowindex [I] = colindex;
}
// Definition of the snake category, based on basic image units
Function snake ()
{
// Define the snake body and initialize it
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 mark and the Second coordinate is the column mark.
This. bodys. push (rowindex [20] [I]);
}
// Defines the coordinates of the snake's header. The first is the row mark, and the second is the column mark.
This. head = [20, 20];
// Defines the forward direction of a snake. 0 indicates the left, 1 indicates the bottom, 2 indicates the right, and 3 indicates the top
This. direct = 0;
}
// Mobile Module
Function move ()
{
// Calculates the coordinates of the header Based on 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 the request is out of bounds
If (this. head [0] <0 | this. head [0]> 39 | this. head [1] <0 | this. head [1]> 39)
{
// If this parameter is exceeded, false is returned.
Return false;
}
Else
// If there is no cross-border, check the properties of the next element. If it is food, eat it and then generate food. If it is its own, false is returned.
If (this. head [0] = food [0] & this. head [1] = food [1])
{
// For 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 is its tail
{
This. bodys. unshift (rowindex [this. head [0] [this. head [1]);
Return true;
}
// If it is not the end
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 the 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, the jump continues.
Continue out;
}
// The food is successfully generated.
Break out;
}
}
Food = tempfood;
Rowindex [food [0] [food [1]. style. backgroundColor = foodcolor;
}
// Steering module and suspension 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; // speed index of the snake
Function startmove ()
{
If (s. move ())
{
SetTimeout (startmove, time );
}
Else
{
Alert ("game over \ n your score is:" + score + "score ");
}
}
// Set the score
Var score =-1;
// Run the game
Startmove ();

Connect to the JS file on the webpage.