在鸿蒙NEXT中开发一个2048小游戏

本项目是基于api12开发的2048游戏，游戏的逻辑是当用户向某个方向滑动时，将该方向相邻且相等的数字相加，同时在空白区域的随机位置生成一个随机数字。游戏中的数字越大，分数越高。

 

 

首先，游戏的界面布局分别采用两个网格组件Grid来实现，难点在于上方的菜单栏是不均等的三种尺寸的组件，可以使用Grid的rowsTemplate和columnsTemplate属性来实现：

 

 

Grid(){GridItem(){Column(){Text('2048').fontColor('rgb(249,249,249)').fontSize(35).fontWeight(FontWeight.Bold)Text('4*4').fontColor('rgb(249,249,249)').fontSize(22).fontWeight(FontWeight.Bold)}}.backgroundColor('rgb(239,202,26)').borderRadius(10).rowStart(1).rowEnd(2)GridItem(){Column(){Text('分数').fontColor('rgb(232,232,232)').fontSize(15).fontWeight(FontWeight.Bold)Text(this.currentScore.toString()).fontColor('rgb(249,249,249)').fontSize(25).fontWeight(FontWeight.Bold).margin({top:3})}}.backgroundColor('rgb(188,172,162)').borderRadius(10)GridItem(){Column(){Text('最高分').fontColor('rgb(232,232,232)').fontSize(15).fontWeight(FontWeight.Bold)Text(this.highestScore.toString()).fontColor('rgb(249,249,249)').fontSize(25).fontWeight(FontWeight.Bold).margin({top:3})}}.backgroundColor('rgb(188,172,162)').borderRadius(10)GridItem(){Text('重新开始').fontColor('rgb(249,249,249)').fontSize(20).fontWeight(FontWeight.Bold)}.backgroundColor('rgb(254,156,62)').borderRadius(10).onClick(()=>{this.startGame()})GridItem(){Text('返回菜单').fontColor('rgb(249,249,249)').fontSize(20).fontWeight(FontWeight.Bold)}.backgroundColor('rgb(254,156,62)').borderRadius(10)}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('2fr 1fr 1fr').rowsGap(8).columnsGap(8).width('100%').height(170)

在游戏逻辑的实现中，关键在于检测游戏中的空白格和相邻数字的相加操作，以及将它们放置到数组中对应的位置。

​​比如此时游戏中有4个数字：
​​

//0代表空白
let arr:number[] = [0,0,2,2,0,0,4,0,0,8,0,0,0,0,0,0]

以向左滑动为例,将所有数字向左滑动，并将相同的数字相加：

let newArr:number[] = Array(4).fill(0)let arrWithoutZero = arr.filter((x) => x !== 0) //去掉所有的0if (arrWithoutZero.length == 0) {return newArr}if (toHead) {for (let i = 0; i < arrWithoutZero.length; i++) {newArr[i] = arrWithoutZero[i]}for (let i = 0; i < newArr.length - 1; i++) {if (newArr[3 - i] === newArr[2 - i] && newArr[3 - i] !== 0) {newArr[3 - i] = 0newArr[2 - i] *= 2this.score = this.score + newArr[2 - i]console.log("得分:",this.score)}}}

随后，在随机的空白位置添加一个数字：

let cells:number[] = []for (let i = 0; i < 4; i++) {for (let j = 0; j < 4; j++) {if (!this.itemList[i][j]) {cells.push(i * 4 + j)}}}
let row = Math.floor(cellIndex / 4)
let col = cellIndex % 4
this.itemList[row][col] = this.getRandomValue()

这就是游戏的基本逻辑，比较简单，适合初学者学习。本文完整代码可以主页发送‘2048’获取。