This article shares the specific code of JavaScript to implement the Snake Game for your reference. The specific content is as follows
map
Map: width, height, background color, because the snake and food are displayed relative to the map, here the snake and food are sub-elements of the map, random locations are displayed, separated from the document stream, and the map also needs to be separated from the document stream relative, ----CSS needs to be set: width, height, background color, de-marking
Food—div elements
elements---->Array of storing divs (when deleting food divs in the future, first delete divs from map, and then remove divs from array)
Food: width, height, background color, horizontal coordinate, vertical coordinate
A food is an object. This object has corresponding properties. This object needs to be displayed on the map.
Finally, to create the food object, the constructor first, and the corresponding value is passed into the constructor as a parameter.
If food wants to be displayed on the map, the initialization of food is a behavior.
1. Food constructor—>Create food object
2. Methods for displaying food—> Calling methods through objects to display food and set corresponding styles
2.1.1 Because the food is to be eaten by the snake, the food should appear again after eating it, and the original food is deleted.
2.1.2 Every time you initialize the food, delete the original food first, and then restart the food
2.1.3 Delete the food on the map through a private function (a function that cannot be called outside). At the same time, the initial food is saved to an array accordingly, and then delete the food from this array.
Little snake
The little snake is an object
Attributes: Each body has width, height, and direction
Attribute: The body is divided into three parts, each part is an object, each part has horizontal and vertical coordinates, background color
Method: If the little snake wants to be displayed on the map, first delete the previous little snake, and then initialize the little snake (the little snake needs to move)
Movement idea: Give the coordinates of the head of the little snake to the body of the first part of the snake, and the coordinates of the body of the first part of the body to the next part of the body, and need to be set separately: Direction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.map {
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<div class="map"></div>
<script src="Snake Case.js"></script>
</body>
</html>
js
//Self-call function-food(function () {
var elements = [];// Used to save each small square element // Create a small square object, you need to first construct the function. The small square has width and height color. Horizontal and vertical coordinate attributes. function Food(x, y, width, height, color) {
//The horizontal and vertical coordinates of small squares = x || 0;
= y || 0;
//The width and height of the small squares = width || 20;
= height || 20;
= color || 'green';
}
//Add initialization method for prototype (function: display food on the page) //Because the food needs to display the food on the map, the map parameter is needed (map--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = function (map) {
//Delete this little food first //This function cannot be accessed externally remove();
//Create a div (i.e. small squares) var div = ("div");
//Add div to map (div);
//Set the style of the div = + 'px';
= + 'px';
= ;
//The horizontal and vertical coordinates need to be generated randomly. Stop here first // Make div small blocks separate from the document stream = 'absolute';
//Random horizontal and vertical coordinates generated = parseInt(() * ( / )) * ;
= parseInt(() * ( / )) * ;
= + 'px';
= + 'px';
//Add div to array elements (div);
};
//Private function----Delete food function remove() {
for (var i = 0; i < ; i++) {
var ele = elements[i];
//Find the parent element of the child element and delete the child element (ele);
// Delete the child elements in elements again (0, 1);//Drop 1 from position 0 }
}
//Expose food to top-level objects, external use = Food;
}());
//Self-calling function--Little Snake(function () {
//Each part of the snake var elements = [];
//Create a constructor for the snake function Snake(width, height, direction) {
//The width and height of each part of the snake = width || 20;
= height || 20;
//The body of the little snake = [
{x: 3, y: 2, color: 'red'},
{x: 2, y: 2, color: 'orange'},
{x: 1, y: 2, color: 'orange'}
];
//The direction of the little snake moving = direction || 'right';
//Add initialization method for the prototype = function (map) {
//Delete the original snake before initialization remove();
//Create div by looping through to create for (var i = 0; i < ; i++) {
//Each element in the array is an array object var obj = [i];
//Create a div var div = ('div');
//Add div to map (div);
//Set the style of the div = 'absolute';
= + 'px';
= + 'px';
//Horizontal and vertical coordinates = * + 'px';
= * + 'px';
//The color of each part of the snake = ;
//Add each part of the snake into the array (div);
}
};
//Add a prototype method to make the snake move = function (food, map) {
//Change the position of the little snake's body movement first var i = - 1;//2
for (; i > 0; i--) {
//i>0 does not include the head [i].x = [i - 1].x;//Let the horizontal coordinate of the third part of the body be equal to the horizontal coordinate of the second part of the body be equal to the horizontal coordinate of the second part of the body be [i].y = [i - 1].y;//Let the vertical coordinate of the third part of the body be equal to the vertical coordinate of the second part of the body be equal to the vertical coordinate of the second part of the body be }
//Judge the direction--Change the direction of the head of the snake switch () {
case 'right':
[0].x += 1;
break;
case 'left':
[0].x -= 1;
break;
case 'top':
[0].y -= 1;
break;
case 'bottom':
[0].y += 1;
break;
}
//Judge whether you have eaten food // Get the coordinates of the head of the snake and the food var headX=[0].x*;
var headY=[0].y*;
//Judge whether the coordinates of the head and food of the snake are the same if(headX==&&headY==){
//Get the tail of the snake var last=[-1];
//Copy the last tail to the last body ({
x:,
y:,
color:
});
//Delete the food and re-initialize the food (map);
}
};
//Delete the private function of the snake function remove() {
//Get the array var i = - 1;
for (; i >= 0; i--) {
//First find the parent of the element from the current child element, and then delete the child element (i>=0 because the header is included) var ele = elements[i];
//Delete this child element from the map map (ele);
//Delete each element in the array again (i, 1);
}
}
}
//Expose Snake to window = Snake;
}());
//Self-call function-game object(function () {
var that = null;
//The game's constructor function Game(map) {
= new Food();//Food object = new Snake();//The little snake object = map;// Map Object that = this;
}
//Add game initialization method for the prototype object = function () {
();//Food Initialization ();//Initialize the snake //Call the method of automatically moving the snake (, );
//The little snake calls the keyboard method after moving ();
};
//A method for adding small snakes to automatically move the prototype object = function (food, map) {
//Originally move //This here points to window var timeID = setInterval(function () {
//Moving little snake (food, map);
//Initialize the snake (map);
//The maximum value of horizontal coordinate var maxX = / ;
//The maximum value of the vertical coordinate var maxY = / ;
//The coordinates of the head of the snake var headX = [0].x;
var headY = [0].y;
if (headX < 0 || headX >= maxX) {
clearInterval(timeID);
alert('game over')
}
if (headY < 0 || headY >= maxY) {
clearInterval(timeID);
alert('game over')
}
}.bind(that), 150)
};
//Prototype object--Set user button, the direction of the snake changes =function(){
//Get the user's button and change the direction of the snake ('keydown',function(e){
//This here should be the event object that triggers keydown ---document //So this here refers to document switch(){
case 37:='left';break;
case 38:='top';break;
case 39:='right';break;
case 40:='bottom';break;
}
}.bind(that),false)
};
= Game;
}());
//Instantiate the game objectvar gm = new Game(('.map'));
//Initialize the game to start();
//Instantiate the food object// var fd = new Food();
// var map = ('.map');
// (map);
// // Instantiate the snake object// var snake = new Snake();
// (map);//See the little snake on the map first// setInterval(function () {
// (map);
// (fd, map);
// }, 150);
// (map);//See the little snake on the map first// (fd,map);// Take a step// (map);//initialization--Draw a little snake again（Delete the previous snake first，Show the current little snake）
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.