原生JavaScript实现贪吃蛇小游戏

最新推荐文章于 2024-05-20 15:17:08 发布

Code6E

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量85

点赞数

分类专栏： JavaScript 算法代码文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_59200309/article/details/129168326

版权

算法代码同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

功能：

可以计分，初始分数为0
等级机制，初始等级为0，等级越高，贪吃蛇移动的速度越快，最高等级为10, 这里设置每吃到5次食物就升一级
达到最高等级10时弹出获胜提示，但不终止游戏
设置禁止直接掉头
有碰撞检测，碰到边界或蛇自身游戏结束

效果展示

在这里插入图片描述

代码如下

<!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>
        * {
            margin: 0;
            padding: 0;
            /* 设置盒子大小包含边框和内边距大小 */
            box-sizing: border-box;
        }

        #main {
            /* 由于设置了box-sizing: border-box;以下的宽高就包含了边框和内边距 */
            width: 360px;
            height: 420px;
            border: 10px solid #000;
            border-radius: 20px;
            background-color: #b7d4a8;
            /* 居中显示 */
            margin: 50px auto;

        }

        #stage {
            position: relative;
            /* stage界面宽高应是小方块10px的倍数， */
            width: 304px;
            height: 304px;
            border: 2px solid #000;
            margin: 20px auto;
        }

        #food {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: orange;
            border-radius: 50%;
        }

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

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

<body>
    <div id="main">
        <div id="stage">
            <div id="food"></div>
            <div id="snake">
                <div></div>
            </div>
        </div>
        <div id="info">
            <div>SCORE:<span id="score">0</span></div>
            <div>LEVEL:<span id="level">0</span></div>
        </div>
    </div>
    <script>

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

        const food = document.getElementById("food")
        const scoreSpan = document.getElementById("score")
        const levelSpan = document.getElementById("level")
        let score = 0
        let level = 0
        function changeFood() {
            // 生成0-290的随机数，限定0-290的原因是食物要在stage的范围内
            // Math.random()生成0-1的随机数（不包含0,1），Math.floor()向下取整
            // 加一的目的是避免食物一开始就生成在蛇头位置，从而导致一开始蛇就吃到食物然后增长撞到墙的情况
            // 犯了一个错误，导致找了很久的错误，错误写法：Math.floor(Math.random() * 30) * 10+1, 这样导致食物坐标永远不是10的倍数，即蛇头坐标永远不会等于食物坐标，导致蛇永远吃不到食物
            let x = Math.floor(Math.random() * 29 + 1) * 10
            let y = Math.floor(Math.random() * 29 + 1) * 10
            // 别忘了加单位
            food.style.left = x + "px"
            food.style.top = y + "px"
        }
        changeFood()
        const keyArr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]
        // 设置键值方向相反的对象，以减少设置禁止直接掉头时判断语句的多次书写
        const reObj = {
            ArrowUp: "ArrowDown",
            ArrowDown: "ArrowUp",
            ArrowLeft: "ArrowRight",
            ArrowRight: "ArrowLeft"
        }
        // dir用于接收keyArr范围内的按键名
        let dir
        document.addEventListener("keydown", (event) => {
            // 判断按下的按键是否是数组里的4个方向键，只有方向键会赋值给dir。这样能避免按下其他按键时中断蛇的运动
            if (keyArr.includes(event.key)) {
                // 设置禁止掉头
                // snakes.length < 2表示蛇身只有一节时是可以直接掉头的
                if (snakes.length < 2 || reObj[dir] !== event.key)
                    dir = event.key
            }

        })
        // 为了避免多个结点同时移动带来的开销，由贪吃蛇移动规律知，我们可以只移动蛇尾到目标位置，然后将蛇尾设置为新的蛇头，这样可以实现移动整个蛇身的视觉效果
        setTimeout(function move() {
            let head = snakes[0] // 这行代码应该写到定时器里面，这样才能每次更新head元素节点
            // 获取蛇头坐标
            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) {
                // 每次吃到食物都要改变食物的位置
                changeFood()
                // 吃到食物后蛇身增加一个节点
                snake.insertAdjacentHTML("beforeend", "<div></div>")
                // 修改分数
                score++
                scoreSpan.textContent = score
                // 判断是否升级
                if (score % 5 === 0 && level < 10) {
                    level++
                    levelSpan.textContent = level
                }
                // 升到10级弹出通关信息
                if (level === 10) {
                    alert("Congratulations, you win!!!")
                }

            }
            // 检测蛇是否超出stage边界
            if (x < 0 || x > 290 || y < 0 || y > 290) {
                alert("Oops，蛇撞到墙了，GAME OVER!")
                return
            }
            // 检测蛇是否撞到自己，即检测尾部将要移动的位置是否和除尾部以外的结点重合，所以这里不用检测蛇尾的坐标是否等于(x,y)，故循环条件是i<snakes.length-1而不是i<snakes.length
            for (let i = 0; i < snakes.length - 1; i++) {
                if (snakes[i].offsetLeft === x && snakes[i].offsetTop === y) {
                    alert("Oops，蛇撞到自己了，GAME OVER!")
                    return
                }
            }
            // 因为每次都是尾巴在移动，这样看起来就像蛇整体在移动
            // 获取蛇尾
            let tail = snakes[snakes.length - 1]
            // 移动蛇尾
            tail.style.left = x + "px"
            tail.style.top = y + "px"
            // 蛇尾节点移动位置后还是蛇尾，所以应该修改html结构，将蛇尾节点插入到蛇容器的第一个结点位置前，使之成为新的蛇头
            snake.insertAdjacentElement("afterbegin", tail)
            // 注意后面的定时器时间由level决定
            setTimeout(move, 180 - level * 10)
        }, 180)
    </script>
</body>

</html>

Code6E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript实现贪吃蛇小游戏

代码是参考李立超老师教程后自己敲的，自己只是想记录下自己写的注释及心得体会，侵权删，教程链接为https://www.bilibili.com/video/BV1mG411h7aD?p=174&vd_source=efd4241fdf9061e2f928f58914d04b92
复制链接

扫一扫