码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 贪吃蛇

时间:2018-08-16 14:01:44      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:switch   keycode   floor   abs   tin   ntb   city   cli   随机   

1、创建地图  (10x10,宽度20格子)

2、创造人物(蛇头,设置初始位置,绝对位置【0,0】,开始游戏游戏后方向,速度)

3、创造食物(随机坐标,上一个结束后创建下一个,不能生成在蛇身体位置,可以格子和蛇身加唯一index)

4、移动人物(蛇头,监测键盘keycode  37、38、39、40,相应位置改变)

5、碰撞食物(事件判断,食物加入到蛇头后面,跟随移动,积分增加)

6、游戏结束判断(1、超出边框【可以检测蛇头头部位置或和所有格子碰撞检测】 2、撞击自身)

 

拓展:

1、控制游戏难度,改变定时器时间,改变speed

2、排行榜,企业应用,游戏结束弹出表单,可以填写信息到排行榜。

<html>
<head>
  <meta charset="UTF-8">
  <title>贪吃蛇</title>
  <style type="text/css">
  *{margin:0; padding: 0;}
  ul{ list-style: none;}
  #container{
    border: 1px solid #ccc;
    border-bottom: none;
    border-right: none;
    position: relative;
  }
  #container > div{ float: right;}
  #uls{}
  #uls li{
    border: 1px solid #ccc;
    border-top: none;
    border-left: none;
    float: left;
  }
  #person > div{
    background: #0f0;
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 10px;
  }
  .food{
    position: absolute;
    left: 0;
    top:0;
    background: #f00;
  }
  .personBody{ //蛇身颜色稍淡
    opacity: 0.5;
  }
  </style>
</head>
<body>
  <div id=‘container‘>
    <ul id=‘uls‘>
      
    </ul>
    <button id=‘btn‘>开始游戏</button>
    <div id=‘num‘>积分:0</div>
    <div id=‘person‘>
    </div>
  </div>

<script type="text/javascript">
  var container = $id(container),
      uls = $id(uls),
      btn = $id(btn),
      timer = null,
      food = null,
      point = $id(num),
      index = 0,
      person = $id(person),
      personDiv = $tagName(person,div),
      lis = $tagName(uls,li),
      perData = {speed:200,code:39},
      datas = {size:20,x:10,y:10}; //size是元素宽高,xy横纵数量

  function init(){  //初始化游戏
    createMap();
    
  }   

  function createMap(){  //创建地图
    container.style.width = container.style.height = (datas.size+1)*datas.x;
    for(i=0;i<datas.x*datas.y;i++){
      var k = document.createElement(li);
      k.style.width = k.style.height = datas.size;
      k.index = i;
      uls.appendChild(k);
    }
    start();
  }

  function start(){ //点击开始游戏
    btn.onclick = function(){
      createPerson();
      movePerson();
      bindPerson();
      createFood();
    }
  }

  function num(){ //增加积分
    index+=10;
    point.innerHTML = "积分:"+index;
  }

  function createFood(){ //创建食物
    var hrr = [];
    for(var i=0;i<lis.length;i++){
      if(is_Filter(lis[i])){
        hrr.push(lis[i]);
      }
    }
    function is_Filter(li){  //格子和蛇位置重合位置不可以生成食物
      for(var i=0;i<personDiv.length;i++){
        if(li.index == personDiv[i].index){
          return false;
        }
      }
      return true;
    }

    var random = Math.floor(Math.random()*(hrr.length-1));
    food = document.createElement(div);
    food.style.width = food.style.height = datas.size+1+px;
    food.className = food;
    food.style.left = hrr[random].offsetLeft+px;
    food.style.top = hrr[random].offsetTop+px;
    container.appendChild(food);
  }

  function createPerson(){ //创造人物
    var p = document.createElement(div);
    p.style.width = p.style.height = datas.size+1+px;
    p.index = 0;
    person.appendChild(p);
  }
  // 是否撞到边界
  function isOut(){
    for(var i=0;i<lis.length;i++){
      if(col(lis[i],personDiv[0])){ //有碰撞,返回false
        return false;
      }
    }
    return true;
  }
  // 是否撞到自身撞到自身和出边界
  function isSelf(){
    for(var i=1;i<personDiv.length;i++){
      if(col(personDiv[0],personDiv[i])){
        return true;
      }
    }
    return false;
  }

//定时器人移动
  function movePerson(){
    timer = setInterval(function(){
      //判断是否
      if(isOut() || isSelf()){
        alert(游戏结束);
        clearInterval(timer);
      }
      //判断是否撞到目标
      if(col(personDiv[0],food)){
        food.className = personBody;
        person.appendChild(food); 
        createFood();
        num();
      }

      for(var i=personDiv.length-1;i>0;i--){
        personDiv[i].style.left = personDiv[i-1].offsetLeft+"px";
        personDiv[i].style.top = personDiv[i-1].offsetTop+"px";
        personDiv[i].index = personDiv[i-1].index;
      }
      
      switch(perData.code){
        case 37:
        personDiv[0].style.left = personDiv[0].offsetLeft-(datas.size+1)+px;
        personDiv[0].index-=1;
        break;
        case 38:
          personDiv[0].style.top = personDiv[0].offsetTop-(datas.size+1)+px;
          personDiv[0].index-=datas.x;
        break;
        case 39:
        personDiv[0].style.left = personDiv[0].offsetLeft+(datas.size+1)+px;
        personDiv[0].index+=1;
        break;
        case 40:
        personDiv[0].style.top = personDiv[0].offsetTop+(datas.size+1)+px;
        personDiv[0].index+=datas.x;
        break;
      }
    },perData.speed);
  }

  //监测鼠标点击
  function bindPerson(){
    document.onkeydown = function(e){
      var e = window.event || e;
      switch(e.keyCode){
        case 37:
        perData.code = 37;
        break;
        case 38:
        perData.code = 38;
        break;
        case 39:
        perData.code = 39;
        break;
        case 40:
        perData.code = 40;
        break;
      }
    }
  }

  function $id(id){
    return document.getElementById(id);
  }
  function $tagName(parent,child){
    return parent.getElementsByTagName(child);
  }

  //检测碰撞函数
  function col(el1,el2){
    //el1 蛇
    //el2 新点
    var f1 = el1.offsetLeft+el1.offsetWidth;
    var f2 = el1.offsetLeft;
    var f3 = el1.offsetTop+el1.offsetHeight;
    var f4 = el1.offsetTop;

    var s1 = el2.offsetLeft;
    var s2 = el2.offsetLeft+el2.offsetWidth;
    var s3 = el2.offsetTop;
    var s4 = el2.offsetTop+el2.offsetHeight;
    if(f1<=s1 || f2>=s2 || f3<=s3 || f4>=s4){ //仅有的四种没有撞击状态
      return false;
    }else{
      return true;
    }
  }

  init();

</script>

</body>
</html>

 

javascript 贪吃蛇

标签:switch   keycode   floor   abs   tin   ntb   city   cli   随机   

原文地址:https://www.cnblogs.com/lola/p/9486367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!