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

于 2020-09-28 15:15:20 发布
阅读量415 收藏 1
点赞数
分类专栏： web学习笔记 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44638167/article/details/108849452
版权

下面是HTML与CSS的代码
CSS:

<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>

HTML:

 <div class="face">
        <div class="head"></div>
        <div class="food"></div>
    </div>

下面的贪吃蛇主要的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;

document.addEventListener("keyup", function (e) {
            switch (e.keyCode) {
                case 37:
             //每次清除计时器是因为不清除会产生向45°的运动,也就是前一个运动没有停止,你前面是向左,后面向右,右的时候左的运动没有停下来,所以要清除计时器.
                    clearInterval(time);
                    //用计时器来控制移动的速度
                    time = setInterval(getleft, 120);
                    function getleft() {
                        head.style.left = head.offsetLeft - 20 + "px";
                        //这个是控制吃身体的,
                        eatBody();
                        //下面if来判断撞墙的时候会穿过去,从对面出来
                        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;
            }
        })

下面就是做食品的移动,

		//食品的位置
		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;
        }

下面就是吃食物了

var time1 = setInterval(eat, 200);
        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("吃到自己了");
              }
          }
       }

全部的代码:

<!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>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值