js实现贪吃蛇

记录一下学习js时的练习

贪吃蛇的基本样式图

一、基本的HTML布局

<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>SCORE:<span id="score">0</span></div>
                <div>LEVEL:<span id="level">1</span></div>
            </div>
        </div>

二、css样式

<style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

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

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

            #snake > div {
                width: 10px;
                height: 10px;
                background-color: #000;
                position: absolute;
                border: 1px solid #b7d4a8;
            }

            #food {
                width: 10px;
                height: 10px;
                position: absolute;
                top: 100px;
                left: 120px;
                display: flex;
                flex-flow: wrap;
            }

            #food > div {
                width: 5px;
                height: 5px;
                background-color: #000;
                transform: rotate(45deg);
            }

            #info {
                width: 304px;
                margin: 0px auto;
                display: flex;
                justify-content: space-between;
                font: bold 20px courier;
            }
        </style>

三、js代码

<script>
            /*
                1. 禁止掉头
                2. 游戏终止
                3. 记分
            */

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

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

            // 获取分数和level的span
            const scoreSpan = document.getElementById("score")
            const levelSpan = document.getElementById("level")

            // 创建变量存储分数和等级
            let score = 0
            let level = 0


            /*
                食物的坐标应该在0-290之间
            */
            function changeFood() {
                // 生成0-29之间的随机数
                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 = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]

            // 创建一个对象
            const reObj = {
                ArrowUp: "ArrowDown",
                ArrowDown: "ArrowUp",
                ArrowLeft: "ArrowRight",
                ArrowRight: "ArrowLeft",
            }

            /*
                游戏禁止掉头：
                    构成的要件：
                        1. 身体超过2
                        2. 不能是相反的方向
                    处理：
                        保持原来的方向不变（不修改dir的值）

            */
            document.addEventListener("keydown", (event) => {
                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
                ) {
                    //1.改变食物的位置
                    changeFood()
                    //2.增加蛇的身体
                    snake.insertAdjacentHTML("beforeend", "<div/>")
                    score++
                    scoreSpan.textContent = score

                    // 检查等级
                    if(score % 10 === 0 && level < 14){
                        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, 300 - level * 20)
            }, 300)
        </script>