Javascript full version (source code) _ javascript skills

This article mainly analyzes and introduces the full version (Source Code) of javascript greedy snakes in detail. If you need it, you can refer to it and hope to help you understand the complete full version of javascript greedy snakes. It Is Object-Oriented.

The Code is as follows:

Snake v2.4


Script
Function $ (id) {return document. getElementById (id );}
/*************************************** ***********************
* Javascript v2.4

* V2.4 corrected the snake body color to move as the snake advances
**************************************** **********************/
// Snake
Var Snake = {
Tbl: null,
/**
* Body: the snake body. Each section of the array contains a snake,
* Data Structure {x: x0, y: y0, color: color0 },
* X and y represent coordinates, and color represent colors.
**/
Body: [],
// The direction of the current movement. The values are 0, 1, 2, and 3, respectively, indicating up, right, down, and left. You can press the keyboard arrow key to change it.
Direction: 0,
// Timer
Timer: null,
// Speed
Velocity: 250,
// Whether it has been paused
Paused: true,
// Number of rows
RowCount: 30,
// Number of Columns
ColCount: 30,
// Initialization
Init: function (){
Var colors = ['red', 'Orange ', 'yellow', 'green', 'Blue', 'purple ',' # ccc '];
This. tbl = $ ("main ");
Var x = 0;
Var y = 0;
Var colorIndex = 0;
// Generate the initial direction of movement
This. direction = Math. floor (Math. random () * 4 );
// Construct a table
For (var row = 0; row Var tr = this. tbl. insertRow (-1 );
For (var col = 0; col Var td = tr. insertCell (-1 );
}
}
// Generate 20 loose nodes
For (var I = 0; I <10; I ++ ){
X = Math. floor (Math. random () * this. colCount );
Y = Math. floor (Math. random () * this. rowCount );
ColorIndex = Math. floor (Math. random () * 7 );
If (! This. isCellFilled (x, y )){
This. tbl. rows [y]. cells [x]. style. backgroundColor = colors [colorIndex];
}
}
// Generate a Snake Head
While (true ){
X = Math. floor (Math. random () * this. colCount );
Y = Math. floor (Math. random () * this. rowCount );
If (! This. isCellFilled (x, y )){
This. tbl. rows [y]. cells [x]. style. backgroundColor = "black ";
This. body. push ({x: x, y: y, color: 'black '});
Break;
}
}
This. paused = true;
// Add a keyboard event
Document. onkeydown = function (e ){
If (! E) e = window. event;
Switch (e. keyCode | e. which | e. charCode ){
Case 13 :{
If (Snake. paused ){
Snake. move ();
Snake. paused = false;
}
Else {
// If it is not paused, stop moving
Snake. pause ();
Snake. paused = true;
}
Break;
}
Case 37: {// left
// Stop the snake from going backwards
If (Snake. direction = 1 ){
Break;
}
Snake. direction = 3;
Break;
}
Case 38: {// up
// The shortcut key works here
If (event. ctrlKey ){
Snake. speedUp (-20 );
Break;
}
If (Snake. direction = 2) {// stop the Snake from going backwards
Break;
}
Snake. direction = 0;
Break;
}
Case 39: {// right
If (Snake. direction = 3) {// stop the Snake from going backwards
Break;
}
Snake. direction = 1;
Break;
}
Case 40: {// down
If (event. ctrlKey ){
Snake. speedUp (20 );
Break;
}
If (Snake. direction = 0) {// prevents the Snake from going backwards
Break;
}
Snake. direction = 2;
Break;
}
}
}
},
// Move
Move: function (){
This. timer = setInterval (function (){
Snake. erase ();
Snake. moveOneStep ();
Snake. paint ();
}, This. speed );
},
// Move a body
MoveOneStep: function (){
If (this. checkNextStep () =-1 ){
ClearInterval (this. timer );
Alert ("Game over! /NPress Restart to continue .");
Return;
}
If (this. checkNextStep () = 1 ){
Var _ point = this. getNextPos ();
Var _ x = _ point. x;
Var _ y = _ point. y;
Var _ color = this. getColor (_ x, _ y );
This. body. unshift ({x: _ x, y: _ y, color: _ color });
// Because I have eaten a food, I have produced another food.
This. generateDood ();
Return;
}
// Window. status = this. toString ();
Var point = this. getNextPos ();
// Retain the color of the First Section
Var color = this. body [0]. color;
// Move the color forward
For (var I = 0; I This. body [I]. color = this. body [I + 1]. color;
}
// Subtract a section from the end of the snake, and add a section from the end of the snake to show the effect of snake forward
This. body. pop ();
This. body. unshift ({x: point. x, y: point. y, color: color });
// Window. status = this. toString ();
},
// Find the next step
Pause: function (){
ClearInterval (Snake. timer );
This. paint ();
},
GetNextPos: function (){
Var x = this. body [0]. x;
Var y = this. body [0]. y;
Var color = this. body [0]. color;
// Up
If (this. direction = 0 ){
Y --;
}
// Right
Else if (this. direction = 1 ){
X ++;
}
// Downward
Else if (this. direction = 2 ){
Y ++;
}
// Left
Else {
X --;
}
// Returns a coordinate.
Return {x: x, y: y };
},
// Check what is to be moved to the next step
CheckNextStep: function (){
Var point = this. getNextPos ();
Var x = point. x;
Var y = point. y;
If (x <0 | x> = this. colCount | y <0 | y> = this. rowCount ){
Return-1; // touch the boundary and the game ends
}
For (var I = 0; I If (this. body [I]. x = x & this. body [I]. y = y ){
Return-1; // when you touch your own body, the game ends.
}
}
If (this. isCellFilled (x, y )){
Return 1; // something
}
Return 0; // Open Space
},
// Erase the snake body
Erase: function (){
For (var I = 0; I This. eraseDot (this. body [I]. x, this. body [I]. y );
}
},
// Draw a snake body
Paint: function (){
For (var I = 0; I This. paintDot (this. body [I]. x, this. body [I]. y, this. body [I]. color );
}
},
// Erase
EraseDot: function (x, y ){
This. tbl. rows [y]. cells [x]. style. backgroundColor = "";
},
PaintDot: function (x, y, color ){
This. tbl. rows [y]. cells [x]. style. backgroundColor = color;
},
// Obtain the color of a coordinate.
GetColor: function (x, y ){
Return this. tbl. rows [y]. cells [x]. style. backgroundColor;
},
// Used for debugging
ToString: function (){
Var str = "";
For (var I = 0; I Str + = "x:" + this. body [I]. x + "y:" + this. body [I]. y + "color:" + this. body [I]. color + "-";
}
Return str;
},
// Check whether a coordinate point is filled
IsCellFilled: function (x, y ){
If (this. tbl. rows [y]. cells [x]. style. backgroundColor = ""){
Return false;
}
Return true;
},
// Start again
Restart: function (){
If (this. timer ){
ClearInterval (this. timer );
}
For (var I = 0; I This. tbl. deleteRow (0 );
}
This. body = [];
This. init ();
This. speed = 250;
},
// Acceleration
SpeedUp: function (time ){
If (! This. paused ){
If (this. speed + time <10 | this. speed + time> 2000 ){
Return;
}
This. speed + = time;
This. pause ();
This. move ();
}
},
// Produce food.
GenerateDood: function (){
Var colors = ['red', 'Orange ', 'yellow', 'green', 'Blue', 'purple ',' # ccc '];
Var x = Math. floor (Math. random () * this. colCount );
Var y = Math. floor (Math. random () * this. rowCount );
Var colorIndex = Math. floor (Math. random () * 7 );
If (! This. isCellFilled (x, y )){
This. tbl. rows [y]. cells [x]. style. backgroundColor = colors [colorIndex];
}
}
};
Script

/*************************************** **********************

* Javascript v2.4

**************************************** **********************/

Click the button on the left or press Enter to start/stop the game.



Click the button on the left or press Ctrl + ← to accelerate

Click the button on the left or press Ctrl + ← to slow down
Script
$ ('Btn '). onclick = function (){
If (Snake. paused ){
Snake. move ();
Snake. paused = false;
}
Else {
Snake. pause ();
Snake. paused = true;
}
};
$ ("Reset"). onclick = function (){
Snake. restart ();
This. blur ();
};
$ ("UpSpeed"). onclick = function (){
Snake. speedUp (-20 );
};
$ ("DownSpeed"). onclick = function (){
Snake. speedUp (20 );
};
Script