js跟学超哥-跟写贪吃蛇

最新推荐文章于 2024-08-25 09:57:22 发布

Fool ?

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量38

点赞数

文章标签： javascript css html Powered by 金山文档

本文链接：https://blog.csdn.net/xiaoxioade123/article/details/129238327

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>贪吃蛇</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                
            }
            #main{
                box-sizing: border-box;
                height: 420px;
                width: 360px;
                margin: 50px auto;
                border: 10px solid black ;
                background-color: seagreen;
                border-radius: 20px;
            }
            #stage{
                width: 304px;
                height: 304px;
                border: 2px solid black;
                margin: 20px auto;
                position: relative;
            }
            #snake>div{
                width: 10px;
                height: 10px;
                background-color: black;
                position:absolute;
                border: 1px solid #b7d4a8;
            }
            #food{
                width: 10px;
                height: 10px;
                background-color: black;
                position: absolute;
                top: 100px;
                left: 120px;
                display: flex;
                flex-flow:wrap ;
            }
            #food>div{
                width: 5px;
                height: 5px;
                background-color: black;
                transform:rotate(45deg) ;
            }
            #info{
                width: 304px;
                margin: 0px auto;
                display: flex;
                justify-content: space-between;
                font: bold 20px courier;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="stage">
                <div id="snake">
                    <div></div>
                    
                </div>
            
                <div id="food">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>                
            </div>
            <div id="info">
                <div>分数:<span id="score">0</span></div>
                <div>等级:<span id="level">1</span></div>
            </div>
        </div>
        <script type="text/javascript">
            
            /*
              1.禁止掉头
              2.
            
            */
            
            
            
            // 获取蛇的容器
            const snake=document.getElementById("snake");
            // 获取蛇的各个部分
            const snakes = snake.getElementsByTagName("div");
            const head=snakes[0];
            // 获取食物
            
            const food=document.getElementById("food");
            
            
            
            /*
               键盘事件只能给可以获取焦点的元素或者是document
            
            */
           let dir;
           
           const keyArr=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"]
           
           /*
            游戏禁止调头：
                1.身体超过2
                2.不能是相反的方向
                
           
           */
           // 创建一个对象
           const reObj={
               ArrowUp:"ArrowDown",
               ArrowDown:"ArrowUp",
               ArrowLeft:"ArrowRight",
               ArrowRight:"ArrowLeft",
           }
           
           // 创建一个变量来记录按键的状态
           let keyActive = true
                  
            // 获取分数和level的span
            const scoreSpan = document.getElementById("score");
            const levelSpan = document.getElementById("level");   
               
            let score=0;
            let level=0;
               
           
           // 食物的坐标应该在0-290之间
           function changeFood(){
            const x= Math.floor(Math.random()*30)*10
            const y= Math.floor(Math.random()*30)*10
            food.style.left=x+"px";
            food.style.top=y+"px";
           }
           
           document.addEventListener("keydown",(event)=>{
               // 通过事件对象可以读取用户按的是哪个
               // console.log(event.key)
               if(keyActive && keyArr.includes(event.key)){
                   
                   if(snakes.length>2||reObj[dir]!==event.key){
                       dir=event.key;
                       keyActive=false;
                   }                  
               }
               })
               
               
           setTimeout(function move(){
               
               const head=snakes[0];
               
               //获取蛇头的坐标
               let x=head.offsetLeft;
               let y=head.offsetTop;
               
               switch(dir){
                   case "ArrowUp":
                      // 向上移动蛇
                      y-=10
                      break
                   case "ArrowDown":
                      // 向下移动蛇
                      y+=10
                      break
                   case "ArrowLeft":
                      // 向左移动蛇
                      x-=10
                   break
                   case "ArrowRight":
                      // 向右移动蛇
                      x+=10
                      break
             }
             //检查蛇是否能吃到食物
             if(head.offsetTop===food.offsetTop&&head.offsetLeft===food.offsetLeft){
                 // console.log("吃到食物了");
                 // 改变食物的位置
                 changeFood();
                 //增加蛇的身体
                 snake.insertAdjacentHTML("beforeend","<div/>")
                 score++;
                 scoreSpan.textContent=score;
                 
                 //检查等级
                 if(score%3===0 &&level<14){
                     level++;
                     levelSpan.textContent=level+1;
                 }
             }
             
             /*
                判断游戏是否结束:
                    1.撞墙
                    2.撞自己
             
             */
            
             if(x<0 || x>290 || y<0 || y>290){
                 //游戏结束
                 alert("撞墙了，游戏结束")
                 return
             }
             
             if(dir){
                 //判断是否撞到自己
                 for(let i=0;i<snakes.length-1;i++){
                      if(
                      snakes[i].offsetLeft===x&&
                      snakes[i].offsetTop===y
                  ){
                       alert("撞到自己了")
                      return 
                      }
                 }
             }

             //获取尾巴
             const tail=snakes[snakes.length-1];
             //移动蛇的位置
             tail.style.left=x+"px";
             tail.style.top=y+"px";
             //将尾巴的位置移到蛇头的位置
             snake.insertAdjacentElement("afterbegin",tail);
             keyActive = true;
             
            setTimeout(move,300-level*20);
           },30)
            
        </script>
    </body>
</html>

总结：学习js过程中，最大感悟就是先构思，由小见大，从局部到整体实现功能，在功能实现的基础上，再一步一步优化代码，实现代码的简洁，有效性的提升。