js版贪吃蛇

之前没有写博客的习惯，这是我的第一个博客，有些的不好的地方，希望大家多多提意见

js版的贪吃蛇相对比较简单，废话不多说直接上代码，有需要注意的地方我会标红，github源码地址https://github.com/masterChunlinHan/snake.git

所有的代码都在一个文件中，因为总共就没多少代码

1，首先定义几个后面要用到的全局变量

地图定义为全局的是因为：后面的食物和蛇都要加到地图上，而添加的方法在食物和蛇各自的构造器中，需要地图是全局的才能被访问到

食物定义成全局的是因为：在蛇的移动方法中判断是否吃到食物，需要知道食物的坐标

蛇定义成全局的原因比较特殊：后面用键盘控制蛇头的方向，是window调用蛇的移动方法，在这个方法中this不再指向当前的对象(即蛇)，而是window，所以要把蛇提升为全局变量

定时器定义成全局的是因为：在别的方法中需要取消定时或开始定时，比如暂停，还有吃到食物后更新速度加快

         var map;//地图
         var food;//食物
         var snake;//蛇
         var timer;//定时器
         var time=500;//定时器定的时间，默认为500ms

2，地图构造器

function Map(){
         this.width= 600;                  //地图的宽
         this.height = 400;                //地图的高
         this.position = 'relative';       //地图定位方式，这里为相对定位
         this.backgroundColor = '#ccc';    //地图背景色
         this.map=null;                    //一来用来保存地图，二来可以判断地图是不是已经存在，以免重复创建
         //显示地图的方法
         this.showMap =  function(){
             if(this.map===null){
            //加个判断保证地图只会创建一次
             this.map = document.createElement('div');
             document.body.appendChild(this.map);
             }

             this.map.style.width = this.width+'px';
             this.map.style.height = this.height + 'px';
             this.map.style.backgroundColor = this.backgroundColor;
             this.map.style.position = this.position;

          }
         }

3，食物构造器,原理基本上跟地图构造器一样

     function Food(){
         this.width= 20;
         this.height = 20;
         this.x = 2;                  //这不是实际坐标，而是以食物的宽为单位
         this.y = 2;
         this.position = 'absolute';
         this.backgroundColor = 'red';
         this.food=null;
         this.showFood=function(){
             if(this.food===null){
               this.food = document.createElement('div');
               map.map.appendChild(this.food);            //把食物添加到地图上
             }
             this.x = Math.floor(Math.random()*30);       //食物的位置是随机的
             this.y = Math.floor(Math.random()*20);

             this.food.style.width = this.width+'px';
             this.food.style.height = this.height + 'px';
             this.food.style.backgroundColor = this.backgroundColor;
             this.food.style.position = this.position;
             this.food.style.left = this.width*this.x + 'px';
             this.food.style.top = this.height*this.y + 'px';

         }
     }

4，蛇的构造器

function Snake(){
         this.position = 'absolute';
         this.width = 20;
         this.height = 20;
         this.body = [[2,2,'red',null],[1,2,'blue',null],[0,2,'blue',null]];//蛇的身体，默认一个头，两个身体第一个为头，每个数组中的元素分别代表这节身体的x,y,颜色，以及负责显示这节身体的div
         this.directionKeyCode=39;      //键盘的keyCode，默认39代表右键
      //显示蛇
         this.showSnake = function(){
             for(var i=0;i<this.body.length;i++){
                 if(this.body[i][3]===null){
                 this.body[i][3] = document.createElement('div');//把
                 map.map.appendChild(this.body[i][3]);
                 }
                 this.body[i][3].style.width =this.width+'px';
                 this.body[i][3].style.height =this.height+'px';
                 this.body[i][3].style.position = this.position;
                 this.body[i][3].style.backgroundColor = this.body[i][2];
                 this.body[i][3].style.left = this.width*this.body[i][0]+'px';
                 this.body[i][3].style.top = this.width*this.body[i][1]+'px';

             }
         }

5，移动蛇的方法，需要写在蛇的构造器里面，注意这个方法里的snake不能用this代替,原因上面已经说明

在这个方法中需要判断蛇是否撞到了墙壁或者自身

this.moveSnake = function(){
         //这个方法里的snake不能用this代替,原因上面已经说明
         //更新每节身体的位置，除了蛇头外其他每节的位置更新为上一节的位置
         //注意要从最后一节更新，因为每节的新位置是上一节的老位置，需要在上一节更新之前才能获取它的老位置
         for(var i=snake.body.length-1;i>0;i--){
             snake.body[i][0] = snake.body[i-1][0];
             snake.body[i][1] = snake.body[i-1][1];
         }
         //设置蛇头位置
         switch (snake.directionKeyCode){
             case 37:                  //左
             snake.body[0][0] -=1;
             break;
             case 38:                  //上
             snake.body[0][1] -=1;
             break;
             case 39:                  //右
             snake.body[0][0] +=1;
             break;
             case 40:                  //下
             snake.body[0][1] +=1;
             break;
         }
         //吃到食物的判断
         if(snake.body[0][0]==food.x && snake.body[0][1]==food.y){
             var lastBody = snake.body[snake.body.length-1]
             snake.body.push([lastBody[0],lastBody[1],'blue',null]);
             //吃到食物后更新食物的位置
             food.showFood();
             if(time>=250){//减少更新时间，加快蛇的速度，减少到250ms以下后不再加快
                 time-=50;
                 clearInterval(timer);
                 timer = setInterval(snake.moveSnake,time);
             }

         }

         //判断边界
         if(snake.body[0][0]>29 || snake.body[0][0]<0||snake.body[0][1]>19||snake.body[0][1]<0){
              confirm("GameOver,点确定重新开始");
                location.href='?';         //刷新网页方法一

         }
         //判断是否碰到到自己
         for(var i=1;i<snake.body.length;i++){
             if(snake.body[0][0]==snake.body[i][0]&&snake.body[0][1]==snake.body[i][1]){
                 confirm("GameOver,点确定重新开始");
                 //location.href='?';
                 location.reload();        //刷新网页方法二
             }
         }
         //显示蛇，此时蛇的位置已改变
         snake.showSnake();

    }

6，到这里主要工作已经做完，这一步主要来创建暂定、继续、上、下、左、右按键，不想创建也可以，这一步可以直接忽略，下一步不再调用这些方法即可，不影响游戏的运行

注：这些方法不属于任何构造器

     //停止按钮
     function Stop(){
         this.showStopBtn = function(){
             var btn = document.createElement('button');
             btn.innerHTML="暂停";
             document.body.appendChild(btn);

             btn.onclick = function(){
                 clearInterval(timer);
                 confirm("暂停中,点确定开始");
                timer =setInterval(snake.moveSnake,time);
             }
         }
     }
     //开始按钮
     function Start(){
         this.showStartBtn = function(){
             var btn = document.createElement('button');
             btn.innerHTML="开始";
             document.body.appendChild(btn);
             btn.onclick = function(){
                  clearInterval(timer);
                 timer =setInterval(snake.moveSnake,time);
             }
         }
     }
     //方向实体键
     function DirectionButton(){
         this.showDirectButtons=function(){
             var btn = document.createElement('button');
             btn.innerHTML="上";
             document.body.appendChild(btn);
             btn.onclick = function(){
                 snake.directionKeyCode=38;
             }

             var btn = document.createElement('button');
             btn.innerHTML="下";
             document.body.appendChild(btn);
             btn.onclick = function(){
                 snake.directionKeyCode=40;
             }

             var btn = document.createElement('button');
             btn.innerHTML="左";
             document.body.appendChild(btn);
             btn.onclick = function(){
                 snake.directionKeyCode=37;
             }

             var btn = document.createElement('button');
             btn.innerHTML="右";
             document.body.appendChild(btn);
             btn.onclick = function(){
                 snake.directionKeyCode=39;
             }
         }

     }

7，主要的创建流程

//创建并显示地图
     map=  new Map();
     map.showMap();
     //创建并显示食物
     food = new Food();
     food.showFood();
     //创建并显示蛇
      snake = new Snake();
     snake.showSnake();
     //设置定时器
    // snake.moveSnake();
     timer = window.setInterval(snake.moveSnake,time);
     //添加键盘事件
     document.body.onkeydown = function(e){
         var event = window.event||e;
         if(event.keyCode>=37&&event.keyCode<=40){//限制其他按键不起作用，只有上下左右四个按键起作用
             snake.directionKeyCode = event.keyCode;
         }

     }
     //以下添加按键的步骤，可加可不加
     //添加停止按钮
     var stopBtn = new Stop();
     stopBtn.showStopBtn();
     //添加停止按钮
     var startBtn = new Start();
     startBtn.showStartBtn();
     //添加上下左右按钮
     var directionButtons = new DirectionButton();
     directionButtons.showDirectButtons();

以上就是全部的代码，当然需要全部写在html中的<script>标签中，希望大家多多提意见哈

想看源码的小伙伴，这里有github地址https://github.com/masterChunlinHan/snake