前端进阶项目第二步——贪吃蛇小游戏（原生js）

贪吃蛇小游戏基本思路

1.背景墙   确定行列
2.创建蛇头
3.蛇头移动
4.蛇头变相
5.创建实物
6.碰撞检测
7.增加身体
8.食物消失 随机创建新的
9身体蛇头一起移动

废话少说，代码如下~

html布局

<div class="out" style="overflow: hidden;">
</div>
	<span>本局得分：</span>
	<span id="count">0</span><br>
	<span>当前速度：</span>
	<span id="sp">10</span>
	<input type="button" id="btnStart" value="开始游戏" />

CSS修饰

		.out{
			width: 500px;
			height: 500px;
			background: #ccc;
			border: 1px solid blue;
			position: relative;
		}

<script>
var col=10;
var row=10;
var w=50;
var h=50;
var color="red"
var speed;
var num;
var out=$('.out')[0]
var count ;
var ssp ;
var bodys=[];
var head;
var food;
	window.onload = function(){
		btnStart = $("#btnStart");
		createBg(out,col,row);
        // csnake();
       btnStart.onclick = function (e){
        start();
       } 
    };
      function start(){
        	count = $("#count");
        	ssp = $("#sp")
       		num=0;
        	speed = 10;
        	count.innerHTML=num;
        	ssp.innerHTML=speed;
        	clear();
        	// console.log(bodys);
        	// alert(bodys.length);

			createBg(out,col,row);
        	 head=createNode(1,out)
        	 food=createNode(2,out)//createFood(out,w,h,col,row,1)
        	walk();
        	createKeyEvent(head);
        }
//背景

// 蛇头

// 食物

//计时器
function walk(){
var timer=setInterval(function(){
console.log("111")
//身体移动
moveBody(bodys,head)
//头部移动
moveHead(head);
// check(head,food)?alert('装上了'):console.log('没装上')
var checkdeath=checkDeath(head,out);
	if(checkdeath){
	window.clearInterval(timer);
		alert("GAME OVER");
		return;
}
else{

var  checkstate=check(head,food);

if(checkstate){
	//删除food
	if(food.style.background=='green'){
		num++;
		count.innerHTML=num;
		speed+=10;
		ssp.innerHTML=speed;
		console.log(num)
	}
		if(food.style.background=='skyblue'){
		num+=3;
		count.innerHTML=num;
	}
	if(food.style.background=='pink'){
		num++;
		count.innerHTML=num;
	}
	if(num==20){speed=speed*2}
		ssp.innerHTML=speed;
	out.removeChild(food);
	//创建food(food不能创建在身体上)
	food=createNode(2,out)
	//创建身体
	if (bodys.length>0) {
		// var body=createBody(out,w,h,bodys[bodys.length-1])
		var body=createNode(3,out,bodys[bodys.length-1])
		console.log(body)
	}else{
	   // var body=createBody(out,w,h,head)
	   var body=createNode(3,out,head)
	   // console.log(body)
	}
	
	bodys.push(body)
}
}
},2500/speed)
//
}
</script>

引入的snake.js文件

 //获取元素方法
 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 #eee"
      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;
  
   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 check(obj1,obj2){
  if (obj1.offsetLeft==obj2.offsetLeft&&obj1.offsetTop==obj2.offsetTop) {
    color=obj2.style.background;
    console.log(color)
    return true;
  }
   
   return false;
}
//死亡检测
function checkDeath(head,parent){
  if(head.offsetLeft==parseInt(parent.style.width)
    ||head.offsetTop==parseInt(parent.style.height)
    ||head.offsetLeft<0||head.offsetTop<0)
   {
    return true;
  }
     for (var i = 0; i < bodys.length; i++) {
       if (head.offsetLeft==bodys[i].offsetLeft&&head.offsetTop==bodys[i].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
  }
  
   }
}
}
/*
创建节点对象
 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 className="";
  var  preObj=preObj?preObj:null
  switch(type){
    case 1:
    bgColor="lightgreen"
    className="right"
    break;
    case 2:
     var foodtype=parseInt(Math.random()*10)%3
     var foods=[['green',1],['skyblue',2],['pink',3]]
      bgColor=foods[foodtype][0]
        // x=parseInt(Math.random()*row)*50;
        // y=parseInt(Math.random()*col)*50;
        var array=bodys;
       //  array.push(head)
       //  console.log(array)
      test();
      function test(){
        var a=parseInt(Math.random()*row)*50;
        var b=parseInt(Math.random()*col)*50;

        for (var i = 0; i < array.length; i++) {
             if (a==array[i].offsetLeft&&b==array[i].offsetTop) {
              test();
             }
        }
        x=a;
        y=b;
      }
      
      
      
    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=color;
    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;
  parent.appendChild(node)
  return node;
}
function clear(){
   out.innerHTML="";
  bodys.length=0;
}

完工~