javascript用面向过程写贪吃蛇游戏

超、凢脫俗 2022-12-11 04:24 173阅读 0赞

下面是HTML与CSS的代码  
CSS:

HTML:

下面的贪吃蛇主要的javascript代码  
上面的代码让整体布局产生了,先来让贪吃蛇的头动起来,  
下面是获取元素以及后面会用到的;

var face = document.querySelector(".face");
            var head = document.querySelector(".head");
            var food = document.querySelector(".food");
            var time = null;
            var left = [];//头移动的位置到左边的距离
            var top1 = [];//头移动的位置到上面的距离
            var foodLocation = []; //食物的位置

让头动起来要用到键盘监控事件,上下左右的ASCII码,上下左右分别是37, 38,39,40;

下面就是做食品的移动,

//食品的位置
    		function foodLocat() { 
    		//这里用20的倍数是因为头和食品的大小都是20的宽高,头移动一次是20px.
    		//这样设置可以让每次碰撞时都是刚刚好撞到.
                food.style.left = getRandom(0, 39) * 20 + "px";
                food.style.top = getRandom(0, 29) * 20 + "px";
            }
            //得到在min和max中的一个整数(包括min和max)
            function getRandom(min, max) { 
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

下面就是吃食物了

下面就是做吃自己了

全部的代码:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> *{ margin: 0; padding: 0; } body { background-color: white; } .face { position: relative; width: 800px; height: 600px; margin: auto; background-color: black; } .head { width: 20px; height: 20px; position: absolute; left: 0; top: 0; background-color: blue; } .food { width: 20px; height: 20px; left: 0; top: 0; background-color:green; position: absolute; display: block; } .health { width: 20px; height: 20px; background-color: skyblue; position: absolute; left: 0; top: 0; } </style>
    </head>
    
    <body>
        <div class="face">
            <div class="head"></div>
            <div class="food"></div>
        </div>
        <script> var face = document.querySelector(".face"); var head = document.querySelector(".head"); var food = document.querySelector(".food"); var time = null; var left = []; var top1 = []; //键盘监控控制移动 foodLocat(); document.addEventListener("keyup", function (e) { switch (e.keyCode) { case 37: clearInterval(time); time = setInterval(getleft, 120); function getleft() { head.style.left = head.offsetLeft - 20 + "px"; eatBody(); if (head.offsetLeft < 0) { head.style.left = 780 + "px"; head.style.top = head.offsetTop + "px"; } // left.push(head.offsetLeft); // top1.push(head.offsetTop); left.push(head.style.left); top1.push(head.style.top); // console.log(head.offsetLeft); } break; case 38: clearInterval(time); time = setInterval(getup, 120); function getup() { head.style.top = head.offsetTop - 20 + "px"; eatBody(); if (head.offsetTop < 0) { head.style.left = head.offsetLeft + "px"; head.style.top = 580 + "px"; } // left.push(head.offsetLeft); // top1.push(head.offsetTop); left.push(head.style.left); top1.push(head.style.top); // console.log(head.offsetTop); } break; case 39: clearInterval(time); time = setInterval(getright, 120); function getright() { head.style.left = head.offsetLeft + 20 + "px"; eatBody(); if (head.offsetLeft > 780) { head.style.left = 0 + "px"; head.style.top = head.offsetTop + "px"; } // left.push(head.offsetLeft); // top1.push(head.offsetTop); left.push(head.style.left); top1.push(head.style.top); } break; case 40: clearInterval(time); time = setInterval(getdown, 120); function getdown() { head.style.top = head.offsetTop + 20 + "px"; eatBody(); if (head.offsetTop > 580) { head.style.left = head.offsetLeft + "px"; head.style.top = 0 + "px"; } // left.push(head.offsetLeft); // top1.push(head.offsetTop); left.push(head.style.left); top1.push(head.style.top); // console.log(head.offsetTop); } break; } }) var time1 = setInterval(eat, 0); function eat() { //左 右 上 下 var headleft = head.offsetLeft + head.offsetWidth; var headtop = head.offsetTop + head.offsetWidth; var foodleft = food.offsetLeft + food.offsetWidth; var foodtop = food.offsetTop + food.offsetWidth; if ((headleft==food.offsetLeft&&head.offsetTop==food.offsetTop) ||(head.offsetLeft==foodleft&&head.offsetTop==food.offsetTop) ||(headtop==food.offsetTop&&head.offsetleft==food.offsetLeft) ||(head.offsetTop==foodtop&&head.offsetLeft==food.offsetLeft)) { headcread = document.createElement("div"); face.appendChild(headcread); headcread.className="health"; foodLocat(); } setInterval(function () { var healthNum = document.querySelectorAll(".health"); for (var i = 0; i < healthNum.length; i++) { healthNum[i].style.left = left[left.length - i - 2]; healthNum[i].style.top = top1[top1.length - i - 2]; } }, 0) } //吃自己 function eatBody(){ var healthNum1 = document.querySelectorAll(".health"); for (var i=0;i<healthNum1.length;i++){ if (head.style.left==healthNum1[i].style.left&&head.style.top===healthNum1[i].style.top){ alert("吃到自己了"); } } } function foodLocat() { food.style.left = getRandom(0, 39) * 20 + "px"; food.style.top = getRandom(0, 29) * 20 + "px"; } function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } </script>
    </body>
    
    </html>