【案例分享】重塑经典，如何在 HarmonyOS 手机上还原贪吃蛇游戏

• index.hml 文件：描述页面布局
• index.css 文件：描述页面样式
• index.js 文件：处理页面和用户之间的交互
• app.js 文件：管理全局 JavaScript 逻辑和应用程序生命周期
• pages 目录：存储所有组件页面
• java 目录：存放与项目相关的 java 文件

其中，app.js 文件、pages 目录和 java 目录内容均由 JS 模板自动提供。

1）绘制固定组件

① 绘制画布，在 index.hml 文件中，设定画布的颜色和尺寸；

index.hml:

<div class="container" onswipe="touchMove">
 <text class="title">Snake Game</text>
 <canvas ref="canvasref" style="width: 600px; height: 600px; 
background-color:#000000" >
</canvas>
</div>

在 index.css 文件中，可以描述画布的呈现样式；

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

在 index.js 文件中，引用画布$refs.canvasref，保障画布被蛇和食物图像填充。

const canvas = this.$refs.canvasref;
this.ctx = canvas.getContext("2d")

② 绘制导航按钮，我们先在 entry/src/main/js/default/common 目录下，添加 png

格式的导航按钮图片。

.backBtnup, .backBtncenter, .backBtnleft, .backBtnright {
 width: 100px;
 height: 100px;
 margin-bottom: 20px;
 margin-top: 20px;
 border-radius: 10px;
 background-color: #000000;
}
.directsecond {
 flex-direction: row;
 justify-content: center;
 align-items: center;
}
.backBtnup {
 margin-top: 80px;
}
.backBtncenter {
 margin-left: 40px;
 margin-right: 40px;
}

<text if="{{!gameOver}}"class="scoretitle">Score: {{score}}</text>

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

//index.js
data: {
 title: "",
 snakeSize: 10,
 w: 600,
 h: 600,
 score: 0,
 snake : [],
 ctx: null,
 food: null,
 direction: '',
 gameOver: false,
 tail: {
 x: 0,
 y: 0
 },

2）设计动态组件

drawSnake() {
 var len = 7;
 var snake = [];
 for (var i = len - 1; i >= 0; i--) {
 snake.push({
 x: 0,
 y: i
 });
 }
 this.snake = snake;
},

cookie(x, y) {
 var ctx= this.ctx;
 ctx.fillStyle = '#e28743';
 ctx.fillRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
 //border color of the cookie
 ctx.fillStyle = '#e28743';
 ctx.fillRect(x * this.snakeSize + 1, y * this.snakeSize + 1, this.snakeSize- 2, 
this.snakeSize - 2);
 this.ctx = ctx;
}

createFood() {
this.food = {
 x: Math.floor((Math.random() * 30) + 1),
 y: Math.floor((Math.random() * 30) + 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() * 30) + 1);
 this.food.y = Math.floor((Math.random() * 30) + 1);
 }
 }
}

var ctx = this.ctx;
ctx.fillStyle = '#e28743';
ctx.fillRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
//border color of snake
ctx.strokeStyle = '#063970';
ctx.strokeRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
this.ctx = ctx;

与此同时，增加蛇的长度，并绘制新的食物。

//index.js
this.snake.unshift(this.tail); //putsback the tail as the first cell
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);

5）违规判定

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;
}

在 index.js 文件中，检查蛇是否反向移动：

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); //cleanup the canvas
 this.restart()
 return;
}

在 index.hml 文件中，设定当游戏结束时，得分栏显示“game over”；在 index.js 文件

中，设定重启游戏，重新绘制区域、蛇和食物，得分清零：

<text if="{{gameOver}}" class="scoretitle">Game Over!!</text>

//index.js
restart() {
 this.drawArea()
 this.drawSnake()
 this.createFood()
 this.gameOver = true
 this.score = 0
},

到此，我们已经完成了贪吃蛇游戏的开发啦！

最终实现的效果，奥利给

回顾整个开发过程，难点在于当蛇消耗食物后，增加得分及蛇的长度，同时随机出现新的食

物，如何判定违规并提示等方面，当我们一步步实操起来，所有难题都会迎刃而解。

代码开发者：Kiruba Pradeep, Tech Lead, currentlybased at L&T Technology Services