JavaScript implements a simple snake game

Updated: March 31, 2015 08:56:21 Submission: hebedich

This article is very simple. I share with you a code to implement a simple snake game using javascript. It is a small summary of my own learning of javascript. The code refers to some of the contents of netizens and recommends it to everyone. I hope it will be helpful to everyone.

JavaScript implements a simple snake game with simple functions and practical code. I won’t talk much nonsense. Please refer to the comments.

&lt;html&gt;
&lt;head&gt;
  &lt;meta http-equiv='content-type' content='text/html;charset=utf-8'&gt;
&lt;title&gt;Greedy snake&lt;/title&gt;
&lt;script type="text/javascript"&gt;
  var map;  //map  var snake; //snake  var food;  //food  var timer; //Timer  var initSpeed=200; //The initial timer time interval (milliseconds), indirectly represents the snake's movement speed  var nowSpeed=initSpeed; //The snake's movement speed while the game is in progress  var grade=0;  //integral  var flag=1;   // (can be regarded as indirectly) level  // Map Class  function Map(){
    =800;
    =400;
    ='absolute';
    ='#EEEEEE';
    this._map=null;
    //Generate a map    =function(){
      this._map=('div');
      this._map.=+'px';
      this._map.=+'px';
      this._map.=;
      this._map.=;
      ('body')[0].appendChild(this._map);
    }
  }
  //Food  function Food(){
    =20;
    =20;
    ='absolute';
    ='#00FF00';
    =0;
    =0;
    this._food;
    //Generate food    =function(){
      this._food=('div');
      this._food.=+'px';
      this._food.=+'px';
      this._food.=;
      this._food.=;
      =(()*/);
      =(()*/);
      this._food.=*;
      this._food.=*;
 
      map._map.appendChild(this._food);
    }
  }
  //Snakes  function Snake(){
    =20;
    =20;
    ='absolute';
    =null;//Movement direction    //The initial snake body    =new Array(
        [3,2,'red',null],//Snake Head        [2,2,'blue',null],
        [1,2,'blue',null]
      );
    //Generate a snake body    =function(){
      for(var i=0;i&lt;;i++){
        if([i][3]==null){
          [i][3]=('div');
          [i][3].=;
          [i][3].=;
          [i][3].=;
          [i][3].=[i][2];
          map._map.appendChild([i][3]);
        }
        [i][3].=[i][0]*+'px';
        [i][3].=[i][1]*+'px';
      }
    }
    //Control the snake movement    =function(){
       
      var length=-1;
      for(var i=length;i&gt;0;i--){
        [i][0]=[i-1][0];
        [i][1]=[i-1][1];
      }
 
      switch(){
        case 'right':
          [0][0]=[0][0]+1;
          break;
        case 'left':
          [0][0]=[0][0]-1;
          break;
        case 'up':
          [0][1]=[0][1]-1;
          break;
        case 'down':
          [0][1]=[0][1]+1;
          break;
      }
       
      ();
      ();
    }
    //Timer, when starting the game, call    =function(){
      timer=setInterval('()',initSpeed);
    }
    // Conditional processing    =function(){
      //Eat food      if([0][0]==&amp;&amp;[0][1]==){
        grade++;
        [[]]=[0,0,'blue',null];
        map._map.removeChild(food._food)
        ();
      }
      //Judge whether it hits the wall      if([0][0]&lt;0||[0][0]&gt;=/||[0][1]&lt;0||[0][1]&gt;=/){
        alert('game over');
        clearInterval(timer);
        return ;
      }
      //Judge whether it hits yourself      for(var i=1;i&lt;;i++){
        if([0][0]==[i][0]&amp;&amp;[0][1]==[i][1]){
          alert('game over');
          clearInterval(timer);
          return ;
        }
      }
      //Speed speed improvement processing, every 2 points for points, the speed is doubled      if(grade/2==flag){
        clearInterval(timer);
        flag++;
        nowSpeed=initSpeed/flag;
        timer=setInterval('()',nowSpeed);
      }
      ='Greedy Snake Points'+grade+'Speed level'+initSpeed/nowSpeed;
 
    }
  }
 
  =function(event){
    //Press any key to start the game    if(===null){
      ='right';
      ();
    }
    //Control direction, W S D A represents up, down, right, left, respectively    switch(?:){//Browser compatibility processing      case 87 :
        =[0][0]==[1][0]?:'up';//Avoid reverse movement and trigger death bug        break;
      case 83 :
        =[0][0]==[1][0]?:'down';
        break;
      case 68 :
        =[0][1]==[1][1]?:'right';
        break;
      case 65 :
        =[0][1]==[1][1]?:'left';
        break;
    }
  }
  //Automatically load the game  =function(){
    map=new Map();
    ();
    food=new Food();
    ();
    snake=new Snake();
    ();
     
  }
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;

The above is the entire content of this article, I hope you like it.

javascript
Greedy snake

JavaScript Event Learning Chapter 5 Advanced Event Registration Model

In this chapter, I will explain two advanced time registration models: W3C and Microsoft. Because neither of these methods can cross browsers, it seems that they don’t have many use occasions now.
2010-02-02
JavaScript anti-shake and throttling processing

This article introduces JavaScript anti-shake and throttling methods, and the article introduces it in detail through sample code. It has certain reference value for everyone's study or work. Friends who need it can refer to it.
2022-06-06
Unblocking loading script analysis [full]

The blocking behavior of script tags will have a negative impact on page performance. Most browsers will block the download of resources behind it while downloading or executing scripts, and will block the rendering of elements behind it.
2011-01-01
Layui custom plug-in citySelect realizes three-level linkage selection of province, city and district

This article mainly introduces in detail the layui custom plug-in citySelect to realize the three-level linkage selection of province, city and district, and has certain reference value. Interested friends can refer to it.
2019-07-07
setTimeout Analysis of the problem of constantly vomiting CPU

Sometimes when we use setTimeout, IE will specifically occupy CPU, which may cause crashes and other situations.
2009-04-04
Summary of the use of await function in JavaScript

The async function is an instance of the AsyncFunction constructor, and it allows the use of the await keyword, async and await keywords to allow us to write asynchronous behavior based on Promise in a more concise way without deliberately chaining the promise. This article mainly introduces await in JavaScript. Friends who need it can refer to it.
2024-01-01
How to export Excel on the front-end

This article mainly introduces the method of exporting Excel on the front-end of js, which has certain reference value. Interested friends can refer to it.
2017-11-11
EventBus implements communication between objects in JavaScript

This article mainly introduces the communication between EventBus objects in JavaScript. The example code is introduced in this article in detail, which has certain reference learning value for everyone's learning or work. Friends who need it, please learn with the editor below.
2020-10-10
Mobile terminal uses H5 to achieve compressed image upload function

This article mainly introduces in detail the use of H5 on the mobile terminal to achieve compressed image upload function, which has certain reference value. Interested friends can refer to it.
2017-03-03
PHP method of processing session based on Redis

This article mainly introduces the relevant information about PHP's method of redis processing session. Friends who need it can refer to it
2016-03-03

JavaScript implements a simple snake game

Related Articles

Latest Comments