【前端笔记】js简单代码实现贪吃蛇~~~

贪吃蛇是前端人入门且必须的技能。今天闲下来整理介绍一下~~~

首先，先要确定贪吃蛇小游戏的需求：

• 背景墙   确定行列
• 创建蛇头
• 蛇头移动
• 蛇头变相
• 创建实物
• 碰撞检测
• 增加身体
• 食物消失 随机创建新的
• 身体蛇头一起移动

我们首先通过创建一些div元素来生成网格轨道背景：

然后创建蛇头（我们让蛇头位置是固定的，食物是随机产生的）

接下来是蛇头的自动移动（我们设置一个定时器来实现蛇头的自动移动）：

蛇头的变向操作（使用到了键盘事件 我们使用上下左右键来移动 判断keycode值来改变蛇头位置）

接下来创建随机食物：

食物和蛇头的碰撞检测：

注意食物不能成成在身体上，所以我们需要添加条件判断：

吃掉食物后产生身体块

身体块随着头移动

把创建头 食物 身体 封装到一起（共有的地方）

让几个函数需要的参数是一致的，不一样的在内部实现

接下来还要优化以下~判断蛇头是否碰撞了边界和自己的身体，也要不让蛇可以回退移动；随机产生不同分值的食物，获得一定分值后的速度也要变快

以下是具体代码实现：

	
	
	




再玩一局
    得分：

得分大于等于5，改变速度。得分大于等于10，改变速度。

 

 //获取元素方法
 function $(string){
   var tag=string.charAt(0);
   var ele=null;
   switch(tag){
       case ".":
        ele=document.getElementsByClassName(string.slice(1))
        break;
       case "#":
        ele=document.getElementById(string.slice(1))
        break;
       default:
        ele=document.getElementsByTagName(string);
        break;
   }
   return  ele;
}
//创建背景方法
function createBg(parent,col,row){
  //创建表格
  parent.style.width=row*50+"px";
  parent.style.height=col*50+"px";
  for (var i = 0; i < row; i++) {
    for (var j = 0; j < col; j++) {
      var  div =document.createElement('div')
      div.style.width="48px"
      div.style.height="48px"
      div.style.border="1px solid white"
      div.style.float='left'
      parent.appendChild(div);
    }
  }
}

//事件监听
function createKeyEvent(head){
  document.onkeyup=function(event){
   console.log(event)
   var event=event||window.event
   var key=event.keyCode;
      if (head.className=='top'&&key==40) {
         return;
       }
       else if (head.className=='right'&&key==37) {
        
          return;
       }
       else if (head.className=='down'&&key==38) {
          return;
       }
       else if (head.className=='left'&&key==39) {
           return;
       }
       switch(key){
          case 40: 
            head.className='down'
          break;
          case 37:
            head.className="left"
          break;
          case 38:
             head.className="top"
          break;
          case 39:
             head.className="right"
          break;
       }
}
}

//身体碰撞检测
function checkbody(obj1,arr) {
  for (var i = 1; i < arr.length; i++) {
      if (obj1.offsetTop==arr[i].offsetTop&&obj1.offsetLeft==arr[i].offsetLeft) {
          return false;
      }
  }
}




//碰撞检测
function check(obj1,obj2){
  if (obj1.offsetLeft==obj2.offsetLeft&&obj1.offsetTop==obj2.offsetTop) {
    return true;
  }
   return false;
}
//头部移动
function moveHead(head){
var left=0;
var top=0;
switch(head.className){
  case 'left':
  left=head.offsetLeft-50;
  top=head.offsetTop
  break;
  case 'right':
  left=head.offsetLeft+50;
  top=head.offsetTop
  break;
  case 'top':
  left=head.offsetLeft;
  top=head.offsetTop-50
  break;
  case 'down':
  left=head.offsetLeft;
  top=head.offsetTop+50
  break;
}
head.style.left=left+'px'
head.style.top=top+'px'
}
//移动body
function moveBody(array){
  if (array.length>0) {
     for (var i = array.length - 1; i >= 0; i--) {
          switch(array[i].className){
            case 'left':
              x=array[i].offsetLeft-50;
              y=array[i].offsetTop
              break;
              case 'right':
              x=array[i].offsetLeft+50;
              y=array[i].offsetTop
              break;
              case 'top':
              x=array[i].offsetLeft;
              y=array[i].offsetTop-50
              break;
              case 'down':
              x=array[i].offsetLeft;
              y=array[i].offsetTop+50
              break;
         }
          array[i].style.left=x+"px";
          array[i].style.top=y+'px'
          if (i==0) {
                   array[i].className=head.className
          }else{
            array[i].className=array[i-1].className
          }
    
     }
  }
}
/*
检测坐标是否重合
*/

function  checkfood(x,y,array){
  console.log(head)
  if (x==head.offsetLeft&&y==head.offsetTop) {
    return false
  }
  for (var i = 0; i < array.length; i++) {
    // 检测到重复
    if (array[i].offsetLeft==x&&array[i].offsetTop==y) {
      return false;
    }
    if (i==array.length-1) {
      return  true;
    }
  }
  return true;
}
/*
创建节点对象
 type 1  蛇头  2 food  3 身体
*/
function createNode(type,parent,preObj){
  var x=0;
  var y=0;
  var w=50;
  var h=50;
  var bgColor;
  var fen;
  var className="";
  var  preObj=preObj?preObj:null
  switch(type){
    case 1:
      bgColor="red"
      className="right"
      break;
    case 2:
       var foodtype=parseInt(Math.random()*10)%3
       var foods=[['yellow',1],['skyblue',2],['pink',3]]
        bgColor=foods[foodtype][0]
        fen=foods[foodtype][1]
          var array=bodys;
          // console.log(array)
        test();
        function test(){
            var a=parseInt(Math.random()*row)*50;
            var b=parseInt(Math.random()*col)*50;
            var state=checkfood(a,b,array)
            if (state) {
              x=a;
              y=b;
            }else{
              test();
            }
        }
        break;
    case 3:
       switch(preObj.className){
          case 'left':
            x=preObj.offsetLeft+50;
            y=preObj.offsetTop
            break;
            case 'right':
            x=preObj.offsetLeft-50;
            y=preObj.offsetTop
            break;
            case 'top':
            x=preObj.offsetLeft;
            y=preObj.offsetTop+50
            break;
            case 'down':
            x=preObj.offsetLeft;
            y=preObj.offsetTop-50
            break;
       }   
        className=preObj.className;
        bgColor='black'
       break ;
    default:
       break

  }
  var node=document.createElement('div');
  node.style.background=bgColor;
  node.style.position="absolute";
  node.style.left=x+"px";
  node.style.top=y+"px";
  node.style.width=w+"px";
  node.style.height=h+"px";
  node.style.zIndex=999;
  node.className=className;
  node.setAttribute("value",fen)
  parent.appendChild(node)
  return node;
}



function reset(){
  window.location.reload();
}
//检测碰撞到边界框
function checkBorder(obj1,obj2) {
  if (obj1.offsetLeft>obj2.offsetWidth||obj1.offsetLeft<0||obj1.offsetTop<0||obj1.offsetTop>obj2.offsetHeight) {
    return false;
  }
  return true;
}