『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】原创精华

Activers

发布于 2022-4-6 19:24

2847浏览

3收藏

贪吃蛇小项目（已更）

作为软件学院的学生，主要攻读Java后端开发，前端知识有些欠缺，因此对此次的贪吃蛇项目（JS）一拖再拖，但是对于鸿蒙贪吃蛇还是很有兴趣，因此综合官方资料和各个大佬的博客等文章分享，成功做了此次流程，不是很全面，但是基本上能够实现。

Copy一下代码，一小时内也能运行，适合新手接触鸿蒙，想做一个有意思的小项目的朋友们。欢迎大家点赞收藏，支持~

项目运行

如图

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区
系统：Win11 DevEco Studio 3.0.0.800

正式开始

一、创建项目

1.选择JS模板

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

2.项目名、包名

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

3.目录如下

创建完成

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

二、编程

1.导入图片作为控件按钮

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

2.编写前端页面

2.1 HTML

先定义好标签、、内容与资源，编写完成后查看效果如何

<!--容器-->
<div class="container">

    <!--标题-->
    <text class="title">Snake Game</text>

    <!--画布组件：贪吃蛇的移动区域-->
    <canvas style="width: 600px; height: 600px; background-color: black;"></canvas>

    <!--上按键-->
    <image src="/common/up.png"></image>
    <!--左按键-->
    <image src="/common/left.png"></image>
    <!--下按键-->
    <image src="/common/down.png"></image>
    <!--右按键-->
    <image src="/common/right.png"></image>
    
    <!--显示得分-->
    <text>
        <span>Score: </span>
    </text>

</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

代码带入后（先登录），点击侧边栏 Previewer

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

效果如下，看一眼杂乱无章的样子，不过运行主要是确保样式和资源进行了加载：

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

2.2 CSS

编写CSS代码

需要先调整样式，在需要调整的样式后加对应的类名class=‘’‘’,通过类名进行css的调用

<!--上按键-->
<image src="/common/up.png" class="backBtnup" onclick="onStartGame(1)"></image>

<!--下面三个按键用同一样式，所以用同一个div包围-->
<div class="directsecond">
    <!--左按键-->
    <image src="/common/left.png" class="backBtnleft" onclick="onStartGame(2)"></image>
    <!--下按键-->
    <image src="/common/down.png" class="backBtncenter" onclick="onStartGame(3)"></image>
    <!--右按键-->
    <image src="/common/right.png" class="backBtnright" onclick="onStartGame(4)"></image>
</div>

<!--用if判断，如果游戏结束，为true就显示-->
<text if="{{gameOver}}" class="scoretitle">
    <span>Game Over!!!</span>
</text>
<!--显示得分-->
<text if="{{!gameOver}}" class="scoretitle">
    <span>Score: {{score}}</span>
</text>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

设置好类名后，在index.css文件中根据类名编写css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: pink;
}

.title {
    font-size: 100px;
    margin-bottom: 130px;
}

.scoretitle {
    font-size: 50px;
    margin-top: 30px;
}

/*
css选择器，逗号代表并列关系
*/
.backBtnup, .backBtncenter, .backBtnleft, .backBtnright {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: black;
}


.backBtnup {
    margin-top: 80px;
}

.backBtncenter {
    margin-left: 40px;
    margin-right: 40px;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

再次测试，发现有了变化，不过按钮过大，需要处理

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

2.3 优化按钮

根据人体美学设计，设置好按键。在html中用div给按键打一个包，再定义一个新属性即可。

<!--上按键-->
<image class="backBtnup" src="/common/up.png"></image>
<!--下面三个按键用同一样式，所以用同一个div包围-->
<div class="directsecond">
    <!--左按键-->
    <image src="/common/left.png" class="backBtnleft"></image>
    <!--下按键-->
    <image src="/common/down.png" class="backBtncenter"></image>
    <!--右按键-->
    <image src="/common/right.png" class="backBtnright"></image>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

css添加部分新代码

.directsecond {
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
1.
2.
3.
4.
5.

再次测试，如图『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

由此可见，外壳做的差不多了，游戏初具雏形，就差小蛇和食物了。重点也就要来了。

3.编写JS代码

3.1 设计思路

3.1.1 通过点击按钮实现贪吃蛇的移动，需要点击事件

鼠标点击事件是对应的方法，通过传参不同来区分不同的方向。

3.1.2 食物

随机生成。

if食物位置与蛇身体重合，则重新生成

3.1.3 蛇身初始化

通过for循环，将x，y坐标push进数组，作为蛇身体每格的位置（这里进行了固定位置生成，并将蛇身长度定为5格为初始长度）

3.1.4 蛇的运动

蛇的移动是对每一帧进行重制，吃到水果就把头部加长，没吃到就去掉尾部，并将头部方向指向下一个位置记录到数组头部，等待下次刷新帧。

3.1.5 游戏结束和重启

碰壁、相反方向移动，形成了环结束游戏

游戏结束后重新点击移动按键，即可重新开始游戏

3.2 UML图等

流程图

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

类图

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

逻辑图解

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

3.3 JS代码及注释

export default {
    data: {
        title: "",
        snakeSize: 30,      // 蛇身格子像素大小
        w: 600,             // 背景的宽度
        h: 600,             // 背景的高度
        score: 0,           // 得分为0
        snake : [],         // 数组用来存蛇每个格子的位置
        ctx: null,          // 用来调用填充颜色的
        food: null,         // 食物位置
        direction: '',      // 按键的状态
        gameOver: false,    // 游戏状态
        tail: {             // 记录更新后蛇头的位置
            x: 0,
            y: 0
        },
        interval : null     // 获得setInterval()的返回值
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    onShow() {
        // 通过$refs得到组件，进而调用组件的变量和方法
        const canvas = this.$refs.canvasref;
        // 指定了二维绘画
        this.ctx = canvas.getContext("2d");
        // 第一次打开app时，初始化蛇的方向
        this.direction = 'down';
        // 调用初始化蛇体的方法
        this.drawSnake()
        // 创建食物的位置
        this.createFood()
        // 渲染帧画面
        this.paint()
    },
// 画背景
    drawArea() {
        var ctx = this.ctx
        // 设置填充颜色
        ctx.fillStyle = '#61c7e6';
        // 填充
        ctx.fillRect(0, 0, this.w, this.h);
        // 设置矩阵颜色
        ctx.strokeStyle = '#00000';
        // 矩阵的线宽
        ctx.lineWidth = 5;
        // 绘制矩阵（不填色）
        ctx.strokeRect(0, 0, this.w, this.h);
        this.ctx = ctx
    },
// 创建蛇体
    drawSnake() {
        var len = 5;
        var snake = [];
        // 默认蛇的长度为5
        for (var i = len - 1; i >= 0; i--) {
            // 将x轴和y轴的坐标数据存到数组中，这些数据就是每个蛇格子的位置
            snake.push({
                x: 0,
                y: i
            });
        }
        // 更新蛇的长度
        this.snake = snake;
    },
// 设计蛇身的颜色
    bodySnake(x, y) {
        //single square of snake
        var ctx = this.ctx;
        // 蛇的颜色及填充的位置和大小
        ctx.fillStyle = '#99cc33';
        // fillRect()指的是要填充的位置及大小 参数说明：fillRect(X轴位置, Y轴位置, 宽度, 高度）
        ctx.fillRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
        // 蛇的内部格子边框颜色，加了才会分割
        ctx.strokeStyle = '#063970';
        ctx.strokeRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
        this.ctx = ctx;
    },
// 设计食物的颜色
    cookie(x, y) {
        var ctx = this.ctx;
        // 食物的颜色及填充位置和大小
        ctx.fillStyle = '#ff0033';
        ctx.fillRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
        this.ctx = ctx;
    },
// 创建食物的位置
    createFood() {
        // 随机生成食物的位置
        // 这里的20是背景高度（宽度）/ 格子高度（宽度），即 600 / 30 = 20
        this.food = {
            x: Math.floor((Math.random() * 20) + 1),
            y: Math.floor((Math.random() * 20) + 1)
        }
        for (var i = 0; i > this.snake.length; i++) {
            // 获取刚创建蛇的时候，蛇上每个点的位置，再和食物的位置进行比较
            var snakeX = this.snake[i].x;
            var snakeY = this.snake[i].y;
            // 如果食物的位置出现在蛇的身上，则重新生成
            if (this.food.x === snakeX && this.food.y === snakeY || this.food.y === snakeY && this.food.x === snakeX) {
                this.food.x = Math.floor((Math.random() * 20) + 1);
                this.food.y = Math.floor((Math.random() * 20) + 1);
            }
        }
    },
// 检查是否碰壁
    checkCollision(x, y, array) {
        for(var i = 0; i < array.length; i++) {
            if(array[i].x === x && array[i].y === y)
            return true;
        }
        return false;
    },
// 鼠标点击绑定的事件
    onStartGame(direct){
        // 设置游戏初始状态，控制text标签的显示
        this.gameOver = false
        // 通过对应的参数，获取对应direct的字段
        if (direct == 1) {
            this.direction = 'up'
        } else if (direct == 2) {
            this.direction = 'left'
        } else if (direct == 3) {
            this.direction = 'down'
        } else if (direct == 4) {
            this.direction = 'right'
        }
        // 调用绘图方法
        this.paint()
        // 设置蛇的移动间隔时间，也可以理解为绘图的时间间隔
        if (this.interval == null) {
            // setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
            this.interval = setInterval(this.paint, 250);
        }
    },
// 每次移动刷新的操作，即帧画面创建和渲染的流程
    paint() {
        // 调用画背景
        this.drawArea()
        // 获得蛇头的位置的初始坐标
        var snakeX = this.snake[0].x;
        var snakeY = this.snake[0].y;
        // 移动操作，更新数据
        if (this.direction == 'right') {
            snakeX++;
        }
        else if (this.direction == 'left') {
            snakeX--;
        }
        else if (this.direction == 'up') {
            snakeY--;
        } else if (this.direction == 'down') {
            snakeY++;
        }
        // 反向移动或碰撞壁的时候，游戏失败，重启游戏
        if (snakeX == -1 || snakeX == this.w / this.snakeSize || snakeY == -1 || snakeY == this.h / this.snakeSize || this.checkCollision(snakeX, snakeY, this.snake)) {
            //ctx.clearRect(0,0,this.w,this.h); //clean up the canvas
            clearInterval(this.interval);
            this.interval = null
            this.restart()
            return;
        }
        //  判断是否吃到食物
        if(snakeX == this.food.x && snakeY == this.food.y) {
            // 吃到食物
            // 将食物的位置记录下来
            this.tail = {x: snakeX, y: snakeY};
            // 分数加5
            this.score = this.score+5;
            // 再创建食物
            this.createFood();
        } else {
            // 没吃到食物
            // 去掉数组最后的元素并返回，相当于删除蛇尾
            this.tail = this.snake.pop();
            // 将移动更新后蛇头的位置加到tail中
            this.tail.x = snakeX;
            this.tail.y = snakeY;
        }
        // unshift()方法可向数组的开头添加一个或多个元素
        // 将更新后的节点添加蛇头
        this.snake.unshift(this.tail);
        // 渲染每个蛇身格子的位置
        for(var i = 0; i < this.snake.length; i++) {
            this.bodySnake(this.snake[i].x, this.snake[i].y);
        }
        // 渲染食物的位置
        this.cookie(this.food.x, this.food.y);
    },
// 重启操作
    restart() {
        this.drawArea()
        this.drawSnake()
        this.createFood()
        this.gameOver = true
        this.score = 0
    },
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.

4.简单测试

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

虚拟机运行

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】-鸿蒙开发者社区

总结

感谢大家能够读到这里，第一次写JS的代码，和Java确实不太一样，本帖子也没对JS代码详细解释，只有一些必要的注释，里面有很多嵌套调用，文字加图片的格式还是很难解释清楚。对此我们加了类图和流程图，以及逻辑图，便于大家理解。不足之处还望理解。

引用

HarmonyOS开发者/重铸经典，如何在HarmonyOS手机上还原贪吃蛇游戏

源码修改后附上(=￣ω￣=)喵了个咪
get！٩( ‘ω’ )و

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2022-4-19 11:10:01修改

4条回复

按时间正序

按时间倒序

红叶亦知秋

赞，期待楼主后续

2022-4-7 09:58:23

SummerRic

有趣，期待后续。

2022-4-7 14:03:37

Activers 回复了红叶亦知秋

赞，期待楼主后续

感谢支持，已更

2022-4-17 22:37:02

Activers 回复了 SummerRic

有趣，期待后续。

感谢支持，已更新

2022-4-17 22:37:15

51CTO

51CTO博客

51CTO学堂

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】原创精华

贪吃蛇小项目（已更）

项目运行

正式开始

一、创建项目

1.选择JS模板

2.项目名、包名

3.目录如下

二、编程

1.导入图片作为控件按钮

2.编写前端页面

2.1 HTML

2.2 CSS

2.3 优化按钮

3.编写JS代码

3.1 设计思路

3.1.1 通过点击按钮实现贪吃蛇的移动，需要点击事件

3.1.2 食物

3.1.3 蛇身初始化

3.1.4 蛇的运动

3.1.5 游戏结束和重启

3.2 UML图等

流程图

类图

逻辑图解

3.3 JS代码及注释

4.简单测试

总结

引用

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】 原创 精华

贪吃蛇小项目（已更）

项目运行

正式开始

一、创建项目

1.选择JS模板

2.项目名、包名

3.目录如下

二、编程

1.导入图片作为控件按钮

2.编写前端页面

2.1 HTML

2.2 CSS

2.3 优化按钮

3.编写JS代码

3.1 设计思路

3.1.1 通过点击按钮实现贪吃蛇的移动，需要点击事件

3.1.2 食物

3.1.3 蛇身初始化

3.1.4 蛇的运动

3.1.5 游戏结束和重启

3.2 UML图等

流程图

类图

逻辑图解

3.3 JS代码及注释

4.简单测试

总结

引用

目录

订阅鸿蒙技术特刊，精选内容抢先看

『牛角书』鸿蒙从零开始手把手制作贪吃蛇【总】原创精华