JavaScript to achieve the idea of snake game
|
The implementation idea of the javascript game Snake is explained (complete code implementation) for your reference. The specific content is as follows Effect Process1. First, we need to operate the canvas
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Snake</title>
</head>
<body>
<canvas id="canvas"></canvas> <!-- The canvas we want to operate -->
<input type="button" value="Start Game" /><!-- Start Game Button-->
<script>
//Get the element var canvas = document.getElementById("canvas"); //Find the canvas we want to operate
var context = canvas.getContext("2d"); //Specify that the environment for operations on canvas is 2d
var but = document.getElementsByTagName("input")[0]; //Find the start button</script>2. During initialization canvas.width = 500; //Define canvas width canvas.height = 500; //Define canvas height canvas.style.border = "5px solid #000"; //Define canvas border var times = 100; //Default time 200 milliseconds var long = 10; //Number of snake bodies relative to step length var x = y =8; //Initial coordinates of the snake var direction = 3; // 1 up 2 right 3 down 0 left var size = 8; //Length of each movement of the snake (step length) var map = []; //Used to record the coordinates of each movement of the snake var foodx = 0; //The initial X-axis coordinate of the food var foody = 0; //The initial Y-axis coordinate of the food var onOff = true; var foodT = true; var timer = null; 3. Control the snake's coordinates according to the direction, determine whether the snake's coordinates exceed the canvas boundary, and determine whether the snake has touched itself
//Control the snake's coordinates according to the direction switch(direction){
case 1: y = y - size; break; //upper case 2: x = x + size; break; //right case 3: y = y + size; break; //lower case 0: x = x - size; break; //left}
//Judge whether the snake's coordinates exceed the canvas boundary. If so, a wall collision prompt will appear and the game ends if(x>500 || x<0 || y>500 || y<0){
// alert("You hit a wall! Keep trying...");
window.location.reload();
}
//Judge whether the snake has touched you. If it has touched you, the game ends for(var i=0; i<map.length; i++){
if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
// alert("You hit yourself and died! Keep trying...");
window.location.reload(); //Reload}
}4. Then draw the snake
//Draw the snake if(map.length>long){
var cl = map.shift();
context.clearRect(cl['x'],cl['y'],size,size);
}
map.push({'x':x,'y':y});
context.fillStyle = "#777"; //Fill the snake's color context.fillRect(x,y,size,size); //Draw the snake5. When the coordinates of the food are equal to the coordinates of the snake (the snake eats the food)
//When judging that the coordinates of the food are equal to the coordinates of the snake (the snake eats the food)
if(foodx*8 == x && foody*8 == y ){
food(); //Draw food again long++; //The length of the snake increases times = times - 10; //Speed up clearInterval(timer);
onOff = true;
setTimeout(goto,times); //Start a new round}6. Determine the random display coordinates of food and draw the food
//Determine the random display coordinates of food and draw food function food(){
foodx = Math.ceil(Math.random()*40); //Random coordinates of the food on the X axis foody = Math.ceil(Math.random()*40); //Random coordinates of the food on the Y axis context.fillStyle = "mediumvioletred"; //Fill color of the food context.fillRect(foodx*8,foody*8,8,8); //Draw food }7. Listen for pressing the direction key to get the direction the snake is moving
//Listen to the direction key pressed to get the direction of the snake document.onkeydown = function(ev){
var ev = ev || event;
var cod = ev.keyCode - 37;
switch(cod){
case 1: direction = 1; break; //up case 2: direction = 2; break; //right case 3: direction = 3; break; //down case 0: direction = 0; break; //left }
}Complete code implementation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Snake</title>
</head>
<body>
<canvas id="canvas"></canvas> <!-- The canvas we want to operate -->
<input type="button" value="Start Game" /><!-- Start Game Button-->
<script>
//Get the element var canvas = document.getElementById("canvas"); //Find the canvas we want to operate
var context = canvas.getContext("2d"); //Specify that the environment for operations on canvas is 2d
var but = document.getElementsByTagName("input")[0]; //Find the start button//Initialize canvas.width = 500; //Define canvas width canvas.height = 500; //Define canvas height canvas.style.border = "5px solid #000"; //Define canvas border var times = 100; //Default time 200 milliseconds var long = 10; //Number of snake bodies relative to step length var x = y =8; //Initial coordinates of the snake var direction = 3; // 1 up 2 right 3 down 0 left var size = 8; //Length of each movement of the snake (step length)
var map = []; //Used to record the coordinates of each movement of the snake var foodx = 0; //The initial X-axis coordinate of the food var foody = 0; //The initial Y-axis coordinate of the food var onOff = true;
var foodT = true;
var timer = null;
function star(){
//Control the snake's coordinates according to the direction switch(direction){
case 1: y = y - size; break; //upper case 2: x = x + size; break; //right case 3: y = y + size; break; //lower case 0: x = x - size; break; //left}
//Judge whether the snake's coordinates exceed the canvas boundary. If so, a wall collision prompt will appear and the game ends if(x>500 || x<0 || y>500 || y<0){
// alert("You hit a wall! Keep trying...");
window.location.reload();
}
//Judge whether the snake has touched you. If it has touched you, the game ends for(var i=0; i<map.length; i++){
if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
// alert("You hit yourself and died! Keep trying...");
window.location.reload(); //Reload}
}
//Draw the snake if(map.length>long){
var cl = map.shift();
context.clearRect(cl['x'],cl['y'],size,size);
}
map.push({'x':x,'y':y});
context.fillStyle = "#777"; //Fill the snake's color context.fillRect(x,y,size,size); //Draw the snake //When the food coordinates are equal to the snake's coordinates (the snake eats the food)
if(foodx*8 == x && foody*8 == y ){
food(); //Draw food again long++; //The length of the snake increases times = times - 10; //Speed up clearInterval(timer);
onOff = true;
setTimeout(goto,times); //Start a new round}
}
//Determine the random display coordinates of food and draw food function food(){
foodx = Math.ceil(Math.random()*40); //Random coordinates of the food on the X axis foody = Math.ceil(Math.random()*40); //Random coordinates of the food on the Y axis context.fillStyle = "mediumvioletred"; //Fill color of the food context.fillRect(foodx*8,foody*8,8,8); //Draw food }
//Start the game function goto(){
if(onOff){
timer = setInterval(star,times);
onOff = false;
}
if(foodT){
food();
foodT = false;
}
}
//Click the button to start the gamebut.onclick = goto;//Click the button to start the game//Listen to the direction the direction key is pressed to get the direction the snake is movingdocument.onkeydown = function(ev){
var ev = ev || event;
var cod = ev.keyCode - 37;
switch(cod){
case 1: direction = 1; break; //up case 2: direction = 2; break; //right case 3: direction = 3; break; //down case 0: direction = 0; break; //left }
}
</script>
</body>
</html>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 principle of creating tomcat in Eclipse
>>: How to check if a table exists in MySQL and then delete it in batches
Recommend
MySQL online deadlock analysis practice
Preface I believe that everyone has had a simple ...
HTML uses marquee to achieve text scrolling left and right
Copy code The code is as follows: <BODY> //...
Detailed explanation of how to use CMD command to operate MySql database
First: Start and stop the mysql service net stop ...
XHTML Tutorial: The Difference Between Transitional and Strict
In fact, XHTML 1.0 is divided into two types (thr...
10 bad habits to avoid in Docker container applications
There is no doubt that containers have become an ...
Javascript closure usage scenario principle detailed
Table of contents 1. Closure 2. Closure usage sce...
Essential for front-end development: 12 browser compatibility testing tools recommended
For front-end developers, ensuring that the code ...
Detailed tutorial on building a private Git server on Linux
1. Server setup The remote repository is actually...
A brief discussion on the concat function in MySQL. How to add a string before or after a field in MySQL
How to use the concat function in MySQL: CONCAT(s...
Introduction to cloud native technology kubernetes (K8S)
Table of contents 01 What is Kubernetes? 02 The d...
How to add vector icons to web font files in web page production
As we all know, there are two types of images in c...
The latest mysql-5.7.21 installation and configuration method
1. Unzip the downloaded MySQL compressed package ...
Detailed explanation of Nginx Location configuration (Location matching order)
Location means "positioning", which is ...
Upgrade MySQL 5.1 to 5.5.36 in CentOS
This article records the process of upgrading MyS...
Detailed tutorial on configuring nginx for https encrypted access
environment: 1 CentOS Linux release 7.5.1804 (Cor...