This article shares the specific code of Javascript to implement the Snake mini game for your reference. The specific content is as follows
Preface
Native JavaScript implements the Snake-eating Game
GitHub address
Direct copy available
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Greedy snake</title> <link rel="stylesheet" href="CSS/" > <link rel="icon" href="" /> </head> <body> <div class="content"> <div class="btn startBtn"><button></button></div> <div class="btn pauseBtn"><button></button></div> <div > </div> </div> <script src="JS/"></script> <script> // = 'hidden'; </script> </body> </html>
.content {
width: 640px;
height: 640px;
margin: 100px auto;
position: relative;
}
.btn {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 2;
}
.btn button {
background: none;
border: none;
background-size: 100% 100%;
cursor: pointer;
outline: none;
position: absolute;
left: 50%;
top: 50%;
}
.startBtn button {
width: 200px;
height: 200px;
background-image: url(../images/);
margin-left: -100px;
margin-top: -100px;
}
.pauseBtn {
display: none;
}
.pauseBtn button {
width: 70px;
height: 70px;
background-image: url(../images/);
margin-top: -35px;
margin-left: -35px;
}
/* snakeWrap */
#snakeWrap {
width: 600px;
height: 600px;
background-color: #225675;
border: 20px solid #7dd9ff;
position: relative;
}
#snakeWrap div {
width: 20px;
height: 20px;
}
.snakeHead {
background-image: url(../images/);
background-size: cover;
border-top-right-radius: 30%;
border-bottom-right-radius: 30%;
}
.snakeBody {
background-color: #9ddbb1;
border-radius: 50%;
}
.food {
background-image: url(../images/);
background-size: cover;
}
(Core part)
var sw = 20, // The width of the block sh = 20, // The height of the block tr = 30, // Number of rows td = 30; // Number of columns
var snake = null, //Snake example food = null, //Food example game = null; //Game example
// Create a constructor for small blocks// x,y represents the coordinates of small squares// classname represents the style of small squares below.// According to pixel coordinates, the first one is 0,0, the second one is 20,0// But here x and y represent the first 0,0 and the second 1,0function Square(x, y, classname) {
// Convert coordinates to pixel coordinates = x * sw;
= y * sh;
= classname;
= ('div'); // The dom element corresponding to the small square = ;
= ('snakeWrap'); // The parent of the block}
= function () {
= 'absolute'; // Create a block DOM = sw + 'px';
= sh + 'px';
= + 'px';
= + 'px';
(); // Add small squares to the page};
= function () {
();
};
// snake
function Snake() {
= null; // Save the information about the snake head = null; // Save the information about the snake's tail = []; // Store the positions of each block on the snake's body. A two-dimensional array = {
left: {
x: -1,
y: 0,
rotate: 180 //The snake head should be rotated in different directions },
right: {
x: 1,
y: 0,
rotate: 0
},
up: {
x: 0,
y: -1,
rotate: -90
},
down: {
x: 0,
y: 1,
rotate: 90
}
}; //Storing the direction of the snake's walking and using an object to represent it}
= function () {
// Initialization // Create a snake head var snakeHead = new Square(2, 0, 'snakeHead');
();
= snakeHead; //Storing snake head information ([2, 0]); // Store the location of the snake head
// Create the Snake's Body 1 var snakeBody1 = new Square(1, 0, 'snakeBody');
();
([1, 0]); //Storing the coordinates of snake body 1
// Create the Snake's Body 2 var snakeBody2 = new Square(0, 0, 'snakeBody');
();
([0, 0]); //Storing the coordinates of snake body 2 = snakeBody2; //Storing snake tail information
// Form a linked list relationship = null;
= snakeBody1;
= snakeHead;
= snakeBody2;
= snakeBody1;
= null;
// Add an attribute to indicate the direction of the snake's walking = ; // Let the snake go right by default};
// This method is used to obtain the corresponding element of the next position of the snake head// Do different things according to the elements = function () {
var nextPos = [
// The coordinates of the next point where the snake head is about to go / sw + ,
/ sh +
];
// The next point is yourself, which means you bump into yourself and the game ends var selfCollied = false; //Does it hit yourself (function (value) {
// Arrays, objects, directly compare, and also compare reference values if (value[0] == nextPos[0] && value[1] == nextPos[1]) {
selfCollied = true; // It means that I bumped into myself }
});
if (selfCollied) {
// ('Crashed my own'); (this);
return;
}
// The next point is the wall, which means that the wall is hit and the game ends if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {
// ('It hit the wall'); (this);
return;
}
// The next order is food, which means eating big food,
if (food && [0] == nextPos[0] && [1] == nextPos[1]) {
//The next point where the snake head is going to go is the food point // ('eat food');
(this);
return;
}
// Use the return to end the code below the function to run. If all the above situations occur, the final situation will definitely be empty
// The next point is empty, go (this);
};
// Handle events after collision = {
move: function (format) { // This parameter is used to determine whether to delete the snake tail. When the operation (true) is passed, it is eaten. // Create a new body (in the position of the old snake head) var newBody = new Square( / sw, / sh, 'snakeBody');
// Update the relationship of the linked list = ;
= newBody;
= null;
(); // Delete the old snake head from its original location ();
// Create a new snake head, create it in (nextPos location) var newHead = new Square( / sw + , / sh + , 'snakeHead');
// Update the relationship of the linked list = null;
= newBody;
= newHead;
= 'rotate(' + + 'deg)';
();
// Every coordinate on the snake is updated (0, 0, [ / sw + , / sh + ]);
= newHead; //Update the information
// Delete the snake tail by judging whether to eat food. If you eat food, you will not delete it. If you don’t eat it, you will delete it.
if (!format) { //If the value of format is false, it means that it needs to be deleted (except for eating) ();
// Update the link list = ;
= null;
// Update the snake body coordinate array ();
}
},
eat: function () {
(this, true);
createFood();
++;
},
die: function () {
();
}
}
snake = new Snake();
// Create foodfunction createFood() {
// Random coordinates of small food squares var x = null,
y = null;
var include = true; // The condition that loops out, true means that the randomly generated coordinates are on the snake, continue to let it loop, false means that the food coordinates are not on the snake, and do not loop while (include) {
// 0~29 random number x = (() * (td - 1))
y = (() * (tr - 1))
(function (value) {
if (value[0] != x && value[1] != y) {
// This condition is true and indicates that the food coordinates that are randomly released are not on the snake include = false;
}
});
}
// Generate food food = new Square(x, y, 'food');
= [x, y]; //Storage the coordinates of the generated food to compare with the next point where the snake head is about to go var foodDom = ('.food');
if (foodDom) {
= x * sw + 'px';
= y * sh + 'px';
} else {
();
}
}
// Create game logic
function Game() {
= null;
= 0;
}
= function () {
();
// ();
createFood();
= function (ev) {
if ( == 37 && != ) { //When the user presses the left button, the snake cannot be moving to the right = ;
} else if ( == 38 && != ) {
= ;
} else if ( == 39 && != ) {
= ;
} else if ( == 40 && != ) {
= ;
}
}
();
}
= function () { // Start the game = setInterval(function () {
();
}, 200)
}
= function () {
clearInterval();
}
= function () {
clearInterval();
alert('Your score is:' + + 'point');
// The game returns to its initial state var snakeWrap = ('snakeWrap');
= '';
snake = new Snake();
game = new Game();
var startBtnWrap = ('.startBtn');
= 'block';
}
// Start the gamegame = new Game();
var startBtn = ('.startBtn button');
= function () {
= 'none';
();
};
// pausevar snakeWrap = ('snakeWrap');
var pauseBtn = ('.pauseBtn button');
= function () {
();
= 'block'
}
= function () {
();
= 'none';
}
More interesting classic game implementation topics, share with you:
Summary of C++ classic games
Summary of classic python games
python Tetris game collection
JavaScript classic game
Summary of classic java games
Summary of classic javascript games
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.