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

最新推荐文章于 2024-01-28 17:49:34 发布

m0_67392409

最新推荐文章于 2024-01-28 17:49:34 发布

阅读量164

点赞数

分类专栏：前端 html 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_67392409/article/details/123253462

版权

案例分析

看图拆解游戏

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

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

这个游戏是当点击开始游戏按钮才显示蛇和食物的，所以最开始我们不在结构里面书写，后面通过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元/天解锁文章

m0_67392409

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+js实现贪吃蛇小游戏（内含完整代码）

案例分析看图拆解游戏首先我们根据图片上的内容把这个游戏拆解成几个部分去单独看：最外面的大盒子包裹着内容加边框限制蛇的活动范围，整个范围可以看成由许多小方格排列构成的，例如这样子的：；两个按钮，一个控制开始游戏，一个控制游戏中途的暂停继续功能；盒子里面有可以移动的蛇，最开始状态的蛇分为蛇头、蛇身、蛇尾三个部分，蛇只能走直线，通过上下左右的功能键去控制蛇的走向；还有一个随机产生在限制区域内的食物；这个游戏是当点击开始游戏按钮才显示蛇和食物的，所以最开始我们不在结构里面书写，后面通过js构造函
复制链接

扫一扫

专栏目录