【JavaScript】实现贪吃蛇小游戏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、前言🚀🚀🚀

☀️
什么都换不来你眼里光彩夺目。

---

本文简介：本人是大二软件工程专业，java后端方向，这是一期简单记录js学习的文章。

---

二、贪吃蛇小游戏☀️☀️☀️

2.1 贪吃蛇布局

2.2 初步完成蛇的移动

  增加了script代码：

2.3 蛇流畅移动

  

2.4 蛇和食物的碰撞检测

2.5 完成蛇身体的移动

2.6 禁止掉头

2.6 游戏终止

2.6 分数和等级

  

  

三、实现代码：🍓🍓🍓

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>

html（body模块）：

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

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>