JavaScript implementation of classic snake game
|
This article shares the specific code of JavaScript to implement the classic snake game for your reference. The specific content is as follows Mainly uses the singleton mode, all elements are created dynamically; 1. Create a map
var Map;
function map(){
this.mapp=null;
this.makemap=function(){
this.mapp = document.createElement ("div");
this.mapp.className = "mymap";
document.body.appendChild(this.mapp);
}
}2. Create a Snake Model Create a collection to store the first three sections of the snake, traverse the collection, create the size and color of the snake, set the width and height of each section to 30px; initialize the direction of the snake head to the right
var Snack;
function snack(){
this.snackk=[["red",3,1,null],["pink",2,1,null],["pink",1,1,null]];
this.direct="right";
this.makesnack=function(){
for(var i=0;i<this.snackk.length;i++){
if (this.snackk[i][3]==null){
this.snackk[i][3]=document.createElement("div");
this.snackk[i][3].className = "eatsnack";
this.snackk[i][3].style.backgroundColor =this.snackk[i][0];
Map.mapp.appendChild(this.snackk[i][3]);
}
this.snackk[i][3].style.left=this.snackk[i][1]*30+"px";
this.snackk[i][3].style.top=this.snackk[i][2]*30+"px";
}
};3. Dynamic snake, traverse the set snackk that stores each section of the snake from back to front, pass the attributes of each section from back to front, and set the movement direction of the snake head. The left margin and top margin of the snake will change with the change of direction. Then set a timer to move the snake every 100ms;
this.movesnack=function(){
var long = this.snackk.length - 1;
for(var i=long; i>0; i--){
this.snackk[i][1]=this.snackk[i-1][1];
this.snackk[i][2]=this.snackk[i-1][2];
}
switch(this.direct){
case "right": //right this.snackk[0][1] +=1;
break;
case "left": //left this.snackk[0][1] -=1;
break;
case "down": //down this.snackk[0][2] +=1;
break;
case "up": //up this.snackk[0][2] -=1;
break;
}
4. Create food. Food is randomly generated on the map. The size of the food is the same as the size of each section of the snake.
var Guoguo;
function guozi(){
this.guoo=null;
this.x;
this.y;
this.makeguozi=function(){
this.x = Math.floor( Math.random() * 30); //0-29
this.y=Math.floor( Math.random() * 20); //0-19
if(this.guoo==null){
this.guoo=document.createElement("div");
this.guoo.className = "guozi";
Map.mapp.appendChild(this.guoo);
}
this.guoo.style.left=this.x * 30+"px";
this.guoo.style.top =this.y * 30+"px";
}
}5. Set keyboard events, and use the up, down, left, and right keys to control the direction of the snake head.
document.body.onkeyup=function(e){
// console.log(e);
switch(e.keyCode){
case 37: //leftif(Snack.direct!="right"){
Snack.direct = "left";
}
break;
case 39:// rightif(Snack.direct!="left"){
Snack.direct = "right";
}
break;
case 38: //up if(Snack.direct!="down"){
Snack.direct = "up";
}
break;
case 40: //Nextif(Snack.direct!="up"){
Snack.direct = "down";
}
break;
case 87:
if (Snack.direct != "down") {
Snack.direct = "up";
}
break;
case 65:
if (Snack.direct != "right") {
Snack.direct = "left";
}
break;
case 68:
if (Snack.direct != "left") {
Snack.direct = "right";
}
break;
case 83:
if (Snack.direct != "up") {
Snack.direct = "down";
}
break;
}
};6. Detect the position of the snake head and the food. When the snake head eats the food, the length of the snake increases, and elements are added to the snackk set. Then, food is randomly created, the position of the food is detected, and the food is eaten again.
if(this.snackk[0][1]==Guoguo.x && this.snackk[0][2]==Guoguo.y ){
this.snackk.push([
"pink",
this.snackk[this.snackk.length-1][1],
this.snackk[this.snackk.length-1][2],
null
]);
Guoguo.makeguozi ();
}7. Set the snake body to pass through the wall. If the upper, lower, left, and right margins of the snake head are equal to 0, change the margins to the maximum value;
if(this.snackk[0][1]>29){
this.snackk[0][1]=0 ; //Go through the wall from the right}
if(this.snackk[0][1]<0){
this.snackk[0][1]=29; //Go through the wall from the right}
if(this.snackk[0][2]>19){
this.snackk[0][2]=0 ; //Go through the wall from the right}
if(this.snackk[0][2]<0){
this.snackk[0][2]=19; //Go through the wall from the right}
this.makesnack();
this.stopsnack();
};8. Design the game to end. The snake dies when it hits its own body. The game ends and the timer is turned off. When the top and left margins of the snake's head are equal to the top and left margins of a part of the snake's body, the game ends and a prompt image pops up to indicate the end of the game.
this.stopsnack=function(){
for(var k=this.snackk.length-1;k>0;k--){
if (this.snackk[0][1]==this.snackk [k][1] && this.snackk[0][2]==this.snackk [k][2]) {
clearInterval(time);
var gameover = document.createElement ("div");
gameover.className = "over";
gameover.style.display = "block";
Map.mapp.appendChild (gameover);
}
}
}
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of the correct way to install opencv on ubuntu
>>: How to elegantly back up MySQL account information
Recommend
HTML tag default style arrangement
html, address,blockquote,body, dd, div,dl, dt, fie...
202 Free High Quality XHTML Templates (1)
Here 123WORDPRESS.COM presents the first part of ...
A brief discussion on the lazy loading attribute pattern in JavaScript
Table of contents 1. Introduction 2. On-demand at...
Examples of preview functions for various types of files in vue3
Table of contents Preface 1. Preview of office do...
Detailed explanation of docker compose usage
Table of contents Docker Compose usage scenarios ...
Introduction to container of() function in Linux kernel programming
Preface In Linux kernel programming, you will oft...
Echarts legend component properties and source code
The legend component is a commonly used component...
Secondary encapsulation of element el-table table (with table height adaptation)
Preface During my internship at the company, I us...
Solve the problem that the name of the type=file file modification form cannot be echoed normally
The code under the easyui framework is as follows...
Steps for importing tens of millions of data into MySQL using .Net Core
Table of contents Preliminary preparation Impleme...
Database SQL statement optimization
Why optimize: With the launch of the actual proje...
Vue implements anchor positioning function
This article example shares the specific code of ...
Detailed explanation of display modes in CSS tags
Label display mode (important) div and span tags ...
MySQL 5.7.19 (tar.gz) installation graphic tutorial under Linux
The first tutorial for installing MySQL-5.7.19 ve...
Solution to mysql error when modifying sql_mode
Table of contents A murder caused by ERR 1067 The...