用JavaScript手把手教你写一个简易的贪吃蛇游戏（含源码及注释）

最新推荐文章于 2024-08-04 16:33:59 发布

努力的前端小陈

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量883

点赞数 1

分类专栏：前端页面练手文章标签： javascript

本文链接：https://blog.csdn.net/qq_41509696/article/details/107404996

版权

前端页面练手专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现思路如下：

第一步，让你的蛇动起来

蛇由多个单独的方块构成
通过监听键盘事件，使蛇头根据按键的不同一次移动一个单位（自定义）的距离
使每一个蛇身方块（除去蛇头即第一个方块）移动到下一步的位置（即前一个方块）
把2和3放到定时器中，让蛇一直处于运动过程

第二步，碰撞检测

通过蛇头的top与left值判断是否与随机点碰撞
将碰撞点添加到蛇身
新建随机点

第三步，开始结束判定

添加开始按钮以及记录分数的标签
同样通过蛇头的top与left值，判定蛇头与边界或者蛇身的距离来结束游戏

源码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    * {
        margin: 0;
    }
    
    #container {
        position: relative;
        height: 800px;
        width: 800px;
        border: 1px solid #ccc;
    }
    
    h4 {
        display: inline-block;
        margin-left: 200px;
    }
    
    #container div {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 50px;
        height: 50px;
        background-color: blue;
        /* opacity: 0.5px; */
        text-align: center;
        line-height: 50px;
        /* transition: 1s;
        transition-timing-function: linear; */
    }
    
    .random {
        position: absolute;
        /* left: 600px;
        top: 600px; */
        width: 50px;
        height: 50px;
        background-color: red;
    }
</style>

<body>

    <div id="container">
        <div>1</div>
    </div>
    <button id="begin">开始</button>
    <h4 id="score">得分：</h4>

    <div class="random"></div>
</body>
<script>
    
    // 获取到所有方块
    var items = document.querySelectorAll("#container div");
    // 获取容器
    var container = document.querySelector("#container");
    // 初始随机点
    var random = document.querySelector(".random");
    random.style.left = getRandomIntInclusive(1, 15) * 50 + "px";
    random.style.top = getRandomIntInclusive(1, 15) * 50 + "px";

    // 获取打分标签
    var getScore = document.querySelector("#score");
    // 获取开始按钮
    var begin = document.querySelector("#begin");

    // 为方块初始化到起始位置
    for (var i = 0; i < items.length - 1; i++) {
        items[i].style.left = (items.length - 1 - i) * 50 + "px";

    }
    // 初始化分数
    var score = 0;
    // 初始化定时器
    var timer = null;
    // 判断方向的变量
    var forward = 0;
    // 监听键盘事件，并移动方块位置
    function keyboardListener() {
        window.addEventListener("keydown", function(e) {

            // timer = null;

            // 不能按反方向
            if (forward == e.keyCode + 2 || forward == e.keyCode - 2) {

            } else {
                // 清除之前的定时器，否则会重叠
                window.clearInterval(timer);
                forward = e.keyCode;
                timer = window.setInterval(function() {
                    // 碰撞判断
                    judge(items[0], random);


                    if (forward <= 40 && forward >= 37) {
                        for (var i = items.length - 1; i > 0; i--) {

                            items[i].style.left = items[i - 1].offsetLeft + "px";
                            items[i].style.top = items[i - 1].offsetTop + "px";

                        }
                    }
                    switch (forward) {
                        case 37:
                            items[0].style.left = items[0].offsetLeft - 50 + "px";

                            break;
                        case 38:
                            items[0].style.top = items[0].offsetTop - 50 + "px";

                            break;
                        case 39:
                            items[0].style.left = items[0].offsetLeft + 50 + "px";

                            break;
                        case 40:
                            items[0].style.top = items[0].offsetTop + 50 + "px";

                            break;
                        default:
                            break;

                    }
                    // 判断蛇头是否撞到蛇身
                    for (var i = items.length - 1; i > 0; i--) {
                        if (items[0].style.left == items[i].style.left && items[0].style.top == items[i].style.top) {
                            if (confirm("你输了，单击确认重新开始游戏")) {
                                location.reload();
                            } else {
                                location.reload();
                            }
                        }
                    }
                }, 300);
            }

        })
    }

    // 碰撞判断
    function judge(el1, el2) {
        var snakeLeft = el1.offsetLeft;
        var randomLeft = el2.offsetLeft;
        var snakeTop = el1.offsetTop;
        var randomTop = el2.offsetTop;
        // 根据left与top值判断是否碰撞
        if (snakeLeft == randomLeft && snakeTop == randomTop) {
            // 将碰撞点添加到蛇身
            el2.className = "";
            container.appendChild(el2);
            // 更新蛇身
            items = document.querySelectorAll("#container div");
            // 新建随机点
            var newel = document.createElement("div");
            // 把最新分数添加到页面上
            score++;
            getScore.innerHTML = "得分：" + score;
            newel.className = "random";
            var left = getRandomIntInclusive(0, 15) * 50;
            var top = getRandomIntInclusive(0, 15) * 50;
            newel.style.top = top + "px";
            newel.style.left = left + "px";
            document.body.appendChild(newel);
            random = document.querySelector(".random");

        }
        // 根据left与top值判断是否撞墙
        if (snakeLeft == 800 || snakeTop == 800 || snakeTop == -50 || snakeLeft == -50) {
            if (confirm("你输了，单击确认重新开始游戏")) {
                location.reload();
            } else {
                location.reload();
            }
        }
    }
    // 得到一个两数之间的随机整数，包括两个数在内
    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }
    // 为开始按钮添加事件
    begin.addEventListener("click", function() {
        getScore.innerHTML = "得分：" + score;
        keyboardListener();
        var event = document.createEvent("Event");
        event.initEvent("keydown", true, false);
        event.keyCode = 39;
        window.dispatchEvent(event);
    })
</script>

</html>

努力的前端小陈

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript手把手教你写一个简易的贪吃蛇游戏（含源码及注释）

实现思路如下：第一步，让你的蛇动起来蛇由多个单独的方块构成通过监听键盘事件，使蛇头根据按键的不同一次移动一个单位（自定义）的距离使每一个蛇身方块（除去蛇头即第一个方块）移动到下一步的位置（即前一个方块）把2和3放到定时器中，让蛇一直处于运动过程第二步，碰撞检测通过蛇头的top与left值判断是否与随机点碰撞将碰撞点添加到蛇身新建随机点第三步，开始结束判定添加开始按钮以及记录分数的标签同样通过蛇头的top与left值，判定蛇头与边界或者蛇身的距离来结束游戏源码如下：&l
复制链接

扫一扫

专栏目录