javascript实现贪吃蛇

逆战班小总结

分析

蛇：每隔一段时间就移动一点距离，其实就是每隔一会就重新加载显示蛇的身体
蛇的组成：有多个小div，组成每一节的身体
蛇的移动：从蛇头开始，每隔小div 的坐标，给下一节身体的坐标
方向的控制：右，蛇头的x坐标+1，左，蛇头的x坐标-1，下，蛇头的y坐标+1，上，蛇头的y坐标-1，其他身体部分，都是依次将自己的坐标给下一节身体
键盘事件：用来控制上下左右
食物：显示，被吃，消失，再显示
地图：显示蛇、显示食物，有一定的区域

分3个对象，蛇、地图、食物
蛇：身体组成部分、显示身体的方法、吃食物、碰撞身体 - 死亡
地图：创建地图
食物：组成部分、消失、显示

html结构

<button id="btn">开始</button>
<span>分数：<b>0</b></span>

js代码

 // 贪吃蛇游戏
 // 设置样式的函数
 function setStyle(ele,Obj){
  for(var attr in Obj){
   ele.style[attr] = Obj[attr];
  }
 }
 // 获取随机数
 function getRandom(a,b){
  var max = Math.max(a,b);
  var min = Math.min(a,b);
  return parseInt(Math.random()*(max-min))+min;
 }
 // 获取随机颜色
 function getColor(){
  return `rgb(${getRandom(0,256)},${getRandom(0,256)},${getRandom(0,256)})`;
 }
 // 地图
 function Map(){
  this.map = document.createElement("div");
  setStyle(this.map,{
   width:"800px",
   height:"400px",
   border:"10px solid #ccc",
   backgroundColor:"#abcdef",
   position:"relative"
  });
  document.body.appendChild(this.map);
 }
 var map = new Map();
 // 食物
 function Food(){
  this.food = document.createElement("div");
  // 获取随机的left和top
  var l = map.map.clientWidth - 10;
  var t = map.map.clientHeight - 10;
  setStyle(this.food,{
   width:"10px",
   height:"10px",
   backgroundColor:getColor(),
   position:"absolute",
   left:parseInt(getRandom(0,l-10)/10)*10 + "px",
   top:parseInt(getRandom(0,t-10)/10)*10 + "px",
   border:"1px solid #000"
  });   
  // 将食物放到地图中
  map.map.appendChild(this.food);
 }   
 var food = new Food();
 // 蛇
 function Snake(){
  // 身体组成部分
  this.body = [
   {
    x:20,
    y:0
   },
   {
    x:10,
    y:0
   },
   {
    x:0,
    y:0
   }
  ];
  this.score = 0;
  this.direction = "down";
  this.timer = null;
  this.flag = true;
  var _this = this;
  // 应该监听一下键盘事件，敲击键盘能改变方向
  document.onkeypress=function(e){
   var e = e || window.event;
   var keycode = e.keyCode || e.which;
   switch(keycode){
    case 119: // "w键"
     _this.direction = "up";
    break;
    case 115: // "s键"
     _this.direction = "down";
    break;
    case 97: // "a键"
     _this.direction = "left";
    break;
    case 100: // "d键"
     _this.direction = "right";
    break;
   }
  }
  // 让蛇显示
  this.show();
 }
 // 让蛇显示
 Snake.prototype.show = function(){
  // 获取地图中原来的蛇的身体的div
  var snakes = document.querySelectorAll(".snake");
  if(snakes.length!=0){
   for(var i=snakes.length-1;i>=0;i--){
    map.map.removeChild(snakes[i]);
   }
  }
  // 通过遍历身体，创建身体
  for(var i=0;i<this.body.length;i++){
   var div = document.createElement("div");
   setStyle(div,{
    width:"10px",
    height:"10px",
    background:"#000",
    position:"absolute",
    left:this.body[i].x + "px",
    top:this.body[i].y + "px"
   });
   div.className = "snake";
   if(i==0){
    setStyle(div,{
     background:"#f00",
     borderRadius:"50%"
    });
   }
   map.map.appendChild(div);
  }
 }
 // 让蛇移动
 Snake.prototype.move = function(){
  // 根据方向移动
  // 每节身体的坐标的替换
  for(var i=this.body.length-1;i>0;i--){
   this.body[i].x = this.body[i-1].x;
   this.body[i].y = this.body[i-1].y;
  }
  switch(this.direction){
   case "right":
    this.body[0].x = this.body[1].x + 10;
   break;
   case "left":
    this.body[0].x = this.body[1].x - 10;
   break;
   case "up":
    this.body[0].y = this.body[1].y - 10;   
   break;
   case "down":
    this.body[0].y = this.body[1].y + 10;   
   break;   
  }
  // 将移动后的身体坐标展示出来
  if(this.flag){
   this.show();
   this.die();
   this.eat();
  }
 }
 // 吃到食物
 Snake.prototype.eat = function(){
     if(this.body[0].x == food.food.offsetLeft && this.body[0].y == food.food.offsetTop){
         // 吃到了 - 让食物消失、创建新的食物
         map.map.removeChild(food.food);
         food = new Food();
         // 让蛇的身体加加一节
         this.body.push({
             x:this.body[this.body.length-1].x,
             y:this.body[this.body.length-1].y,
         });
         this.score++;
         document.querySelector("span b").innerText = this.score;
     }
 }
 // 死亡
 Snake.prototype.die = function(){
     // 撞墙
     if(this.body[0].x<0 || this.body[0].y<0 || this.body[0].x>map.map.clientWidth || this.body[0].y>map.map.clientHeight){
         alert("死亡");
         this.flag = false;
         clearInterval(this.timer);
     }
     // 撞身体 - 判断蛇头是否和其他身体的坐标一样
     for(var i=1;i<this.body.length;i++){
         if(this.body[i].x == this.body[0].x && this.body[i].y==this.body[0].y){
             alert("死亡");
             this.flag = false;
             clearInterval(this.timer);
         }
     }
 }
 var snake = new Snake();
 document.querySelector("#btn").onclick = function(){
  snake.timer = setInterval(function(){
   snake.move();
  },200);
 }

效果图