HTML+js实现贪吃蛇小游戏（内含完整代码）

最新推荐文章于 2025-04-02 20:20:41 发布

m0_67402564

最新推荐文章于 2025-04-02 20:20:41 发布

阅读量2k

点赞数 3

分类专栏：前端 html 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_67402564/article/details/123346523

版权

本文详细解析了如何使用HTML、JavaScript和CSS实现一个贪吃蛇小游戏，包括游戏逻辑、蛇的移动与转向、食物的生成与碰撞检测等关键部分，还提供了完整的JS代码供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例分析

看图拆解游戏

首先我们根据图片上的内容把这个游戏拆解成几个部分去单独看：

最外面的大盒子包裹着内容加边框限制蛇的活动范围，整个范围可以看成由许多小方格排列构成的，例如这样子的：；
两个按钮，一个控制开始游戏，一个控制游戏中途的暂停继续功能；
盒子里面有可以移动的蛇，最开始状态的蛇分为蛇头、蛇身、蛇尾三个部分，蛇只能走直线，通过上下左右的功能键去控制蛇的走向；
还有一个随机产生在限制区域内的食物；

这个游戏是当点击开始游戏按钮才显示蛇和食物的，所以最开始我们不在结构里面书写，后面通过js构造函数来生成，但是可以先把样式写了来，由此可知：我们的结构代码可以这么去写：

<body>
    <!-- 最外面盒子 -->
    <div class="content">
        <!-- 开始按钮 -->
        <div class="btn startBtn">
            <button></button>
        </div>
        <!-- 暂停按钮 -->
        <div class="btn pauseBtn">
            <button></button>
        </div>
        <!-- 蛇的活动范围 -->
        <div id="snakeWrap">
        </div>
    </div>
</body>

CSS样式代码是这样的：

.content {
    width: 640px;
    height: 640px;
    margin: 35px auto;
    position: relative;
}

.btn {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 2;
}

.btn button {
    background: none;
    border: none;
    background-size: 100% 100%;
    cursor: pointer;
    outline: none;
    position: absolute;
    left: 50%;
    top: 50%;
}

.startBtn button {
    width: 200px;
    height: 80px;
    background-image: url(../images/start.gif);
    margin-left: -100px;
    margin-top: -40px;
}

.pauseBtn {
    display: none;
}

.pauseBtn button {
    width: 70px;
    height: 70px;
    background-image: url(../images/pause.png);
    margin-left: -35px;
    margin-top: -35px;
}


/* snakeWrap */

#snakeWrap {
    position: relative;
    width: 600px;
    height: 600px;
    background-color: greenyellow;
    border: 20px solid green;
}

#snakeWrap div {
    width: 20px;
    height: 20px;
}

.snakeHead {
    background-image: url(../images/蛇头.png);
    background-size: cover;
}

.snakeBody {
    background-color: #808ca5;
    border-radius: 50%;
}

.food {
    background-image: url(../images/食物.png);
    background-size: cover;
}

蛇的活动范围分析：

下面的代码方块构造函数就是创建一个一个的方格，给每个方格设置了宽高，这个大小是经过计算的可以正好铺满整个蛇的活动范围的地砖，就好比我准备了一整个房间需要的地砖，但是只是准备了并没有拿出来；给原型添加或删除的函数是我具备了铺地装这样子的技术；现在就是人和了，坐等天时地利的时候使用。

js代码：

  var sw = 20, //一个方格的宽
        sh = 20, //一个方格的高
        tr = 30, //行数
        td = 30; //列数
    //方块构造函数
    function Square(x, y, classname) {
        //0,0    0,0
        //20,0   1,0
        //40,0   2,0
        this.x = x * sw;
        this.y = y * sh;
        this.class = classname;
        this.viewContent = document.createElement('div'); //方块对应的DOM元素
        this.viewContent.className = this.class; //方块所指元素
        this.parent = document.getElementById('snakeWrap'); //方块的父级
    }

    //单词prototype指的是原型
    //给原型添加
    Square.prototype.create = function() { //创建方块DOM,并添加到页面里
        this.viewContent.style.position = 'absolute';
        this.viewContent.style.width = sw + 'px';
        this.viewContent.style.height = sh + 'px';
        this.viewContent.style.left = this.x + 'px';
        this.viewContent.style.top = this.y + 'px';
        this.parent.appendChild(this.viewContent);
    };
    //删除
    Square.prototype.remove = function() {
        this.parent.removeChild(this.viewContent);
    };

创建对象——蛇的分析：

下面的代码看蛇的部分，想要蛇移动，必须先有蛇，开始的时候就说了蛇又分为三个部分蛇头、蛇身和蛇尾，蛇需要移动，蛇移动又分为上下左右四个方向，所以我们需要根据x和y的正负来判断它走的方向，当蛇转向的时候需要蛇头跟着转向，所以要添加一个rotate属性来确定蛇头的方向。

js代码：

    //蛇
    var snake = null;
    function Snake() {
        this.head = null; //存一下蛇头信息
        this.tail = null; //存一下蛇尾信息
        this.pos = []; //存蛇身上每一个方块的位置

        this.directionNum = { //存储蛇走的方向，用一个对象来表示
            left: {
                x: -1,
                y: 0,
                rotate: 180 // 蛇头在不同方向中应该进行旋转
            },
            right: {
                x: 1,
                y: 0
            },
            up: {
                x: 0,
                y: -1,
                rotate: -90
            },
            down: {
                x: 0,

最低0.47元/天解锁文章