Js Snake Game Implementation ideas and source code _ javascript skills

This article mainly introduces how to implement the js Snake Game and shares the source code of the Snake game. Interested friends can refer to the examples in this article to share the code of the js Snake game, for your reference, the specific content is as follows:

  
   Snake games    
 
  
Snake games New Game
  
Score: 0
  
   
 
  
Your browser doesn' t support
  canvasElement.
 Script var CANVAS = document. getElementById ("canvas"); var CTX = CANVAS. getContext ("2d"); var SNAKE = new Array (); // use a queue to simulate the SNAKE body var DIR = "right"; // this parameter is used to control the direction of the SNAKE header var SIZE = 20; // The width of the snake body var FOODX = 0; // The x coordinate var FOODY of the food = 0; // The y coordinate var HEADX of the food = 0; // x coordinate var HEADY = 0 of the snake header; // y coordinate var MAXWIDTH = 200 of the snake header; // The height of the canvas var MAXHEIGHT = 200; // width of the CANVAS var TIME = 400; // speed of the snake var SCORE = 0; // calculate the player SCORE var interval = null; CANVAS. width = MAXWIDTH; CANVAS. height = MAXHEIGHT; window. onload = function () {newgame () ;}; document. getElementById ("newGameButton "). click (function () {newgame () ;}); function newgame () {SNAKE = []; // use a queue to simulate the SNAKE's DIR = "right "; // used to control the direction of the Snake Head HEADX = 0; // The x coordinate HEADY of the Snake Head = 0; // The y coordinate SCORE of the Snake Head = 0; window. clearInterval (interval); interval = null; // initialize the canvas CTX. clearRect (0, 0, MAXWIDTH, MAXHEIGHT); // draw a snake drawSnake (); // place the food setFo Od (); // mobile snake interval = window. setInterval (move, TIME);} function move () {switch (DIR) {case "up": HEADY = HEADY-SIZE; break; case "right ": HEADX = HEADX + SIZE; break; case "down": HEADY = HEADY + SIZE; break; case "left": HEADX = HEADX-SIZE; break ;} if (HEADX> MAXWIDTH-SIZE | HEADY> MAXHEIGHT-SIZE | HEADX <0 | HEADY <0) {alert ("your SCORE is:" + SCORE +, continue to work! Cause of failure: hitting the wall... "); window. location. reload () ;}for (var I = 1; I
 

:

Ideas:

Function newgame () {reset snake and Score data; clear interval; initialize canvas; draw a snake; place food; Use timer (setInterval) to move the snake (move function );} function move () {change the position where the next cell of the Snake Head will arrive Based on the direction; Determine whether the game is over and the reason why the game ends (including winning or losing); move the cell of the Snake (moveIn function );} monitors the direction keys of the keyboard. When the direction is changed, modifies the value of the global variable DIR (used to store the direction); function moveIn () {Add a grid in front of the Snake Head as the new Snake Head, and add the coordinates of the Snake Head as the first element to the array representing the snake; if (food not eaten) {delete a bucket, and change it in the canvas ;}}

Note that setting the width and height of the canvas in JS is slightly different from setting other CSS attributes.

CANVAS. width = MAXWIDTH; CANVAS. height = MAXHEIGHT;

The editor has also prepared a special topic for you: Summary of typical javascript games

The above is all the content of this article, and I hope it will help you learn javascript programming.