贪吃蛇！！

最新推荐文章于 2024-07-14 10:25:44 发布

会上树的老张

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量175

点赞数 1

分类专栏：前端文章标签： css css3 javascript

本文链接：https://blog.csdn.net/qq_45557130/article/details/127833087

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;

        }

        #main {
            height: 420px;
            width: 360px;
            border: 10px solid black;
            background-color: #b7d4a8;
            border-radius: 20px;
            margin: 50px auto;
        }

        #stage {
            width: 304px;
            height: 304px;
            border: 2px solid black;
            margin: 20px auto;
            position: relative;
        }

        #info {
            width: 304px;
            margin: 30px auto;
            display: flex;
            justify-content: space-between;
            font: bold 20px courier;

        }

        #food {
            width: 10px;
            height: 10px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 120px;
        }

        #snake>div {
            width: 10px;
            height: 10px;
            background-color: black;
            position: absolute;
            border: 1px solid #b7d4a8;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="stage">
            <div id="snake">
                <div></div>
            </div>
            <div id="food"></div>

        </div>
        <div id="info">
            <div>SCORCE：<span id="score">100</span></div>
            <div>LEVEL：<span id="level">1</span></div>
        </div>
    </div>

    <script>


        //获取蛇的容器
        const snake = document.getElementById("snake")
        //获取蛇的各部分
        const snakes = snake.getElementsByTagName("div")

        //获取食物
        const food = document.getElementById("food")

        //获取分数和等级的span
        const scoreSpan = document.getElementById("score")
        const levelSpan = document.getElementById("level")
        //创建变量存储分数和等级
        let score = 0
        let level = 0



        /* 
            食物的位置应该在0-290之间
        */
        function changeFood() {
            //生成0-290的随机数
            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"
        }

        //定义一个变量来存储蛇的移动方向
        let dir
        //创建一个变量记录按键的状态
        let keyActive = true
        /* 
            绑定按键keydown keyup
                键盘事件只能绑定给可以获取焦点的元素或者是document
        */
        const keyArr = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"]

        /* 
            禁止掉头
                1、身体超过2
                2、不能是相反方向
            处理：保持原来方向不变（不修改dir的值）
        */
        //创建一个对象
        const reObj = {
            ArrowUp: "ArrowDown",
            ArrowDown: "ArrowUp",
            ArrowLeft: "ArrowRight",
            ArrowRight: "ArrowLeft"
        }
        document.addEventListener("keydown", (event) => {
            if (keyActive && keyArr.includes(event.key)) {
                if (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 "ArrowDown":
                    y += 10
                    break
                case "ArrowUp":
                    y -= 10
                    break
                case "ArrowLeft":
                    x -= 10
                    break
                case "ArrowRight":
                    x += 10
                    break
            }
            //检查蛇是否吃到食物
            if (head.offsetTop === food.offsetTop && head.offsetLeft === food.offsetLeft) {
                //改变食物位置
                changeFood()
                //增加蛇的身体
                snake.insertAdjacentHTML("beforeend", "<div />")
                score++
                scoreSpan.textContent = score
                //检查等级
                if(score%5==0){
                    level++
                    levelSpan.textContent = level+1
                }
            }
            /* 
                判断游戏是否结束
                    1、撞墙
                    2、撞自己
            */
            if (x < 0 || x > 290 || y < 0 || y > 290) {
                alert("游戏结束")
                return
            }
            //判断是否撞到自己
            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, 100-level*10)
        }, 100)

    </script>

</body>

</html>