基于javascript实现贪吃蛇小游戏

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  *{
   margin:0px;
   padding:0px;
  }
  #board{
   width:300px;
   height:500px;
   border:5px solid #000;
   margin:50px auto 0px;
   position: relative;
   background: #cccccc91;
  }
  li:first-child{
   position: absolute;
   width: 10px;
   height:10px;
   left: 100px;
   top: 200px;
   background:cornflowerblue;
   z-index: 1;
  }
  li{
   position: absolute;
   width: 10px;
   height:10px;
   background: pink;
   
   list-style: none;
  }
  li:nth-child(2){
   left: 100px;
   top: 210px;
  }
  li:nth-child(3){
   left: 100px;
   top: 220px;
  }
  p{
   width: 10px;
   height: 10px;
   position: absolute;
   box-shadow: 0px 0px 2px 2px #000;
   border-radius: 50%;
   
  }
  #menu{
   width:300px;
   height:30px;
   border:5px solid #000;
   border-top:none;
   margin:0px auto;
   position: relative;
  }
  #menu>button{
   border: 0px; 
   width: 75px;  
   display: block;
   float: left; 
   height: 30px;
   cursor: pointer;
   outline: none;

  }
  button:nth-child(1){
   background: pink;
  }
  button:nth-child(2){
   background: skyblue;
  }
  button:nth-child(3){
   background: orange;
  }
  button:nth-child(4){
   background: rgb(25, 230, 6);
  }
  button:hover{
   font-size: 18px;
   color: white;
   font-weight: bold;
  }
  dl{
   width: 75px;
   position: absolute;
   right:0;
   bottom:30px;  
   cursor:pointer;
   display: none;
   height: 90px;
  }
  dl>dd{
   display: block;
   cursor:pointer;
   text-align: center;
   line-height: 30px;
   
  }
  dl>dd:nth-child(1){
   height: 30px;
   background: rgba(212, 118, 9, 0.527);
  }
  dl>dd:nth-child(2){
   height: 30px;
   background: rgb(142, 6, 253);
  }
  dl>dd:nth-child(3){
   height: 30px;
   background: rgb(205, 9, 231);
  }
 </style>
</head>
<body>
 <div id="board"> 
   <li></li>
   <li></li>
   <li></li>   
 </div>
 <div id="menu">
  <button>开始游戏</button>
  <button>暂停游戏</button>
  <button onclick="afresh()">重新开始</button>
  <button>游戏难度</button>
  <dl>
   <dd>菜鸟级</dd>
   <dd>大师级</dd>
   <dd>魔鬼级</dd>
  </dl>
 </div>
 <script>
   var ele = document.querySelectorAll("li")
   var board = document.getElementById("board")
   var menu = document.querySelectorAll("button")
   var ddDom = document.querySelectorAll("dd")
   var locLogLeft = [] 
   var locLogTop = []
   var dir = "up"
   var upLock = true; //让定时器不能连开
   var downLock = true;
   var leftLock = true;
   var rightLock = true;
   var level = 200;
   var count = 0;
   menu[0].onclick = function(){var result = game(dir,level);} //开始游戏
   menu[1].onclick = function(){clearInterval(timer)}  //暂停游戏
   menu[3].onclick = function(){ //设置难度的函数
    count++;
    if(count%2!=0){
    document.getElementsByTagName("dl")[0].style.display="block"}
    else{
     document.getElementsByTagName("dl")[0].style.display="none"
    }
    ddDom[0].onclick =function() {
    count++
    level = 200;
    document.getElementsByTagName("dl")[0].style.display="none"
    }
     ddDom[1].onclick =function() {
    count++
    level = 100;
    document.getElementsByTagName("dl")[0].style.display="none"
    }
     ddDom[2].onclick =function() {
    count++
    level = 50;
    document.getElementsByTagName("dl")[0].style.display="none"
     }
   }
   
   function afresh(){ //重新开始函数
    ele[0].style.left = "100px"
    ele[0].style.top = "200px"
    ele[1].style.left = "100px"
    ele[1].style.top = "210px"
    ele[2].style.left = "100px"
    ele[2].style.top = "220px"
    ele = document.querySelectorAll("li")
    for(var i = 3;i<ele.length;i++){
     board.removeChild(ele[i]) 
    }
    clearInterval(timer)
    locLogLeft = [] 
    locLogTop = [] 
   }
   var timer;
   foodFun() //游戏开始先生成一食物  
   document.onkeydown = function(e){ //方向控制函数
    var e = e||window.event;
    var foodDom = document.getElementsByTagName("p")[0]
     var ele = document.querySelectorAll("li")
    if(e.keyCode == 87 && ele[0].offsetTop<=ele[1].offsetTop ){
     rightLock = true;
     leftLock = true;
     if(!upLock == true){        
        return;
       }
     upLock = false; 
     
     // clearInterval(timer)
     game("up",level)
     }
    if(e.keyCode == 83 && ele[0].offsetTop>=ele[1].offsetTop){
     rightLock = true;
      leftLock = true
     if(!downLock == true){        
        return;
       }
      downLock = false; 
     
     // clearInterval(timer)
     game("down",level)
     }
     if(e.keyCode == 68 && ele[0].offsetLeft>=ele[1].offsetLeft){
     upLock = true
     downLock = true;
     if(!rightLock == true){        
        return;
       }
      rightLock = false; 
     // clearInterval(timer)
     game("right",level)
     }
     if(e.keyCode == 65 && ele[0].offsetLeft<=ele[1].offsetLeft){ 
     upLock = true;
     downLock = true;
     if(!leftLock == true){        
        return;
       }
     leftLock = false; 
     // clearInterval(timer)
     game("left",level)
     }
    }
   function game(direction,speed){ //控制蛇身转弯函数
    clearInterval(timer) 
    timer = setInterval(function(e){
     var e = e||window.event;
     var foodDom = document.getElementsByTagName("p")[0]
     var ele = document.querySelectorAll("li")
      if(direction == "down"){
      dir = "down"
       locLogLeft = [] 
       locLogTop = []    
      for(var i=0;i<ele.length;i++){
       locLogLeft[i] = ele[i].offsetLeft;
       locLogTop[i] = ele[i].offsetTop;
      }
      ele[0].style.top = 10+ele[0].offsetTop + "px";
      for(var i=1;i<ele.length;i++){
       ele[i].style.left = locLogLeft[i-1]+"px";
       ele[i].style.top = locLogTop[i-1]+"px";
      }
     } 
     if(direction == "up"){
      dir = "up"
       locLogLeft = [] 
       locLogTop = []    
      for(var i=0;i<ele.length;i++){
      locLogLeft[i] = ele[i].offsetLeft;
      locLogTop[i] = ele[i].offsetTop;
     }
      ele[0].style.top = ele[0].offsetTop - 10 + "px";
      for(var i=1;i<ele.length;i++){
       ele[i].style.left = locLogLeft[i-1]+"px";
       ele[i].style.top = locLogTop[i-1]+"px";
      }
     }
     if(direction == "left"){
      dir = "left"
       locLogLeft = [] 
      locLogTop = []    
       for(var i=0;i<ele.length;i++){
      locLogLeft[i] = ele[i].offsetLeft;
      locLogTop[i] = ele[i].offsetTop;
       }
       ele[0].style.left = ele[0].offsetLeft - 10 + "px";
       for(var i=1;i<ele.length;i++){
      ele[i].style.left = locLogLeft[i-1]+"px";
      ele[i].style.top = locLogTop[i-1]+"px";
       }
     }
     if(direction=="right"){
      dir = "right"
       locLogLeft = [] 
       locLogTop = []    
       for(var i=0;i<ele.length;i++){
      locLogLeft[i] = ele[i].offsetLeft;
      locLogTop[i] = ele[i].offsetTop;
       }
      ele[0].style.left = 10+ele[0].offsetLeft + "px";
       for(var i=1;i<ele.length;i++){
      ele[i].style.left = locLogLeft[i-1]+"px";
      ele[i].style.top = locLogTop[i-1]+"px";
       }
     }
     isLost()
     if(parseInt(foodDom.style.left) == ele[0].offsetLeft && parseInt(foodDom.style.top) == ele[0].offsetTop ){
      board.removeChild(foodDom)
      foodFun()
      var snakeBody = document.createElement("li")
      board.appendChild(snakeBody) 
      ele = document.querySelectorAll("li")
     // console.log(ele,ele.length) 
     ele[ele.length-1].style.left = ele[ele.length-2].offsetLeft+"px";
     ele[ele.length-1].style.top = ele[ele.length-2].offsetTop+"px";     
      }
      
    },speed)

      
   }
   
   function foodFun(e){ //生成食物函数
    var e = e||window.Element;
    var foodColorR = Math.floor((Math.random()*256))
    var foodColorG = Math.floor((Math.random()*256))
    var foodColorB = Math.floor((Math.random()*256))
    var randomFoodX = Math.floor(Math.random()*(board.clientWidth/10)-1)
    var randomFoodY = Math.floor(Math.random()*(board.clientHeight/10)-1);   
    var food = document.createElement("p")
    board.appendChild(food)
    var foodDom = document.getElementsByTagName("p")[0]
    foodDom.style.left=(randomFoodX+1)*10 +"px"
    foodDom.style.top=(randomFoodY+1)*10 +"px";
    foodDom.style.backgroundColor = "rgb("+foodColorR+","+foodColorG+","+foodColorB+")" 
    if(parseInt(foodDom.style.left) == ele[0].offsetLeft && parseInt(foodDom.style.top) == ele[0].offsetTop ){
     foodFun()
    }
   }
   function isLost(){ //判定胜负
    ele = document.querySelectorAll("li")
    if(ele[0].offsetLeft<0 || ele[0].offsetLeft>= board.clientWidth || ele[0].offsetTop<0||ele[0].offsetTop+10>board.clientHeight){
     bump = false;
     alert("你失败了!")
     afresh()
    } 
    for(var i=1;i<ele.length;i++){
     if(ele[0].offsetLeft == ele[i].offsetLeft && ele[0].offsetTop == ele[i].offsetTop){
      alert("你失败了!")
      afresh()
     }
    }
   }
 </script>
</body>
</html>

小编还为大家准备了精彩的专题:javascript经典小游戏汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。