今天给大家分享一个贪吃蛇的小游戏，用纯html + css + js实现，主要技术栈：vue + uniCloud，希望能对还未涉及游戏开发的小伙伴有所启发。由于技术栈很浅，希望大佬勿喷。话不多说，直接开撸。

效果图如下

初始化项目

本项目是基于uni-app开发的，所以最好使用HBuilder作为你的编辑器首选。

新建项目

打开HBuilder,新建项目，给项目命名snake_eat_worm(蛇吃虫子)，我给它起了个高大上的名字：蛇战群蠕。名字满分，给自己加个鸡腿。选择默认模板，勾选启用uniCloud(默认使用阿里云)，点击创建。

 这样HBuilder就会自动生成项目目录：

我们直接运行项目：

看到以下界面说明项目运行成功了

游戏资源准备

将资源放在static/images目录下

绘制地图

打开pages/index页面，我们将它修改一下，加上自己的东西：

<template>
    <view class="content">
        贪吃蛇~
    </view>
</template>
复制代码

ok，页面已经在我们的掌控之中，咱们要正式开搞了。

绘制地面

我们设定地面是一个10 * 10 的格子，用div画一个10 * 10 的格子？

少侠！等等，只会div就够了！不信你看：

<template>
    <view class="content">
        <view class="game-field">
            <view class="block"></view>
            <view class="block"></view>
            <view class="block"></view>
            <view class="block"></view>
            <!-- 此处省略 100 - 4 个 -->
        </view>
    </view>
</template>
<style>
    .content {
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 0;
    }
    .game-field {
        display: flex;
        flex-wrap: wrap;
    }
    .block {
        width: 10vw;
        height: 10vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(232, 235, 178);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        box-sizing: border-box;
        outline: 2upx solid;
    }
</style>
复制代码

相信只会div的小伙伴，应该对于上面的重复div的渲染比我还熟吧：

<template>
    <view class="content">
        <view class="game-field">
            <view class="block" v-for="x in 100" :key="x"></view>
        </view>
    </view>
</template>
复制代码

干的漂亮，现在有一坨黄色的土地在我们的游戏界面中了，接下来我们看看怎么在地上放几只虫子。

绘制虫子

在绘制之前，我们思考下用div如何在不同的格子里画上不同的图案（蛇和虫子或者是土地）。我们不妨把这100个格子看成一个数组。每个格子对应数组的下标0-99。我们把数组初始化为100个0，我们用数字0代表土地。用数字1代表虫子，用数字2代表蛇。我们将上面的代码稍加改动：

<template>
    <view class="content">
        <view class="game-field">
            <view class="block" v-for="(x,i) in blocks" :key="i">{
  {x}}</view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                blocks: new Array(100).fill(0), // 格子
                worms: [6, 33, 87] // 初始化三只虫子，数字代表它所处的格子的下标
            }
        },
        onLoad() {
            this.worms.forEach(x=> {
                this.blocks[x] = 1;
            })
            this.$forceUpdate();
        }
    }
</script>
复制代码

可以看到在黄色土地里有3个格子的数字是1，其他是0。这样就好办了，我们只需把数字是1的格子的背景图变成一只小虫子就好了：

<template>
    <view class="content">
        <view class="game-field">
            <view class="block" 
                :style="{'background-image': bg(x)}" 
                v-for="(x, i) in blocks" :key="i">
                {
  {x}}
            </view>
        </view>
    </view>
</template>
<script>
    import worm from "../../stati