Javascript full version (source code) _ javascript skills

Source: Internet
Author: User
Tags getcolor
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.