前言

这次博客是学完鸿蒙应用开发之后，自行开发的鸿蒙小游戏——数字华容道，这篇博客详细地讲了数字华容道的开发思路。

概述

本个demo将从零基础开始完成鸿蒙小游戏APP在可穿戴设备上的编译，此处以运动手表为例，在项目中我们所使用到的软件为DevEco Studio。

1.在初始界面中显示4*4的方阵，方阵中分布有随意打乱的1至15的数字和一个空白方格，方阵上方增加一个计时器，显示游戏进行的时间，单位为秒，方阵下方显示一个“重新开始”的按钮，为用户提供重新开始游戏的机会。

2.向上、下、左、右任一方向滑动，空白方格周围对应位置的方格便会随之向对应的方向移动一格，计时器也会显示游戏开始到当前的时间。

3.经过若干次移动后，当所有的数字按顺序排列后，则会弹出游戏成功的界面，再滑动也不会有任何变化，此时方阵上方的计时器停止计时，点击“重新开始”的按钮后则会重新返回步骤1界面所示。

主要源代码：

index.html如下：

<div class="container" ><text class="seconds">当前秒数：{{currentSeconds}}</text><stack class="stack"><canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas><div class="subcontainer" show="{{isShow}}"><text class="gameover">游戏成功</text></div></stack><input type="button" value="重新开始" class="bit" onclick="restartGame"/>
</div>

index.css如下：

.container {flex-direction: column;justify-content: center;align-items: center;width:450px;height:450px;
}
.seconds{font-size: 18px;text-align:center;width:300px;height:20px;letter-spacing:0px;margin-top:10px;
}
.canvas{width:305px;height:305px;background-color: #FFFFFF;
}
.bit{width:150px;height:30px;background-color:#AD9D8F;font-size:24px;margin-top:10px;
}
.stack{width: 305px;height: 305px;margin-top: 10px;
}
.subcontainer {left:50px;top:95px;width: 220px;height: 130px;justify-content: center;align-items: center;background-color: #E9C2A6;
}
.gameover {font-size: 38px;color: black;
}

index.js如下：

var grids;
var context;
var timer;const SIDELEN = 70;
const MARGIN = 5;export default {data: {currentSeconds: '0.0',isShow: false},onInit() {grids=[[1, 2, 3, 4],[5, 6, 7, 8],[9, 10, 11, 12],[13, 14, 15, 0]];this.initGrids();this.drawGrids();},initGrids(){let array=["left","up","right","down"];for (let i = 0; i < 100; i++){let randomIndex = Math.floor(Math.random() * 4);let direction = array[randomIndex];this.changeGrids(direction);}},onReady() {context = this.$refs.canvas.getContext('2d');},onShow() {this.initGrids();this.drawGrids();timer = setInterval(this.run, 100);},drawGrids() {for (let row = 0; row < 4; row++) {for (let column = 0; column < 4; column++) {let gridStr = grids[row][column].toString();context.fillStyle = "#BBADA0";let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);context.font = "30px HYQiHei-65S";if (gridStr != "0") {context.fillStyle = "#000000";let offsetX = (4 - gridStr.length) * (SIDELEN / 8);let offsetY = (SIDELEN - 30) / 2;context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);}}}},run(){this.currentSeconds = (Math.floor(parseFloat(this.currentSeconds) * 10+ 1) / 10).toString();if(parseFloat(this.currentSeconds) % 1 == 0){this.currentSeconds = this.currentSeconds + ".0";}},swipeGrids(event) {this.changeGrids(event.direction);this.drawGrids();if(this.gameover()){clearInterval(timer);this.isShow = true;}},gameover(){let originalgrids=[[1, 2, 3, 4],[5, 6, 7, 8],[9, 10, 11, 12],[13, 14, 15, 0]];for (let row = 0; row < 4; row++) {for (let column = 0; column < 4; column++) {if (grids[row][column] != originalgrids[row][column]){return false;}}}return true;},changeGrids(direction) {let x;let y;for (let row = 0; row < 4; row++) {for (let column = 0; column < 4; column++) {if (grids[row][column] == 0) {x = row;y = column;break;}}}let temp;if(this.isShow==false){if (direction == 'left' && (y + 1) < 4) {temp = grids[x][y + 1];grids[x][y + 1] = grids[x][y];grids[x][y] = temp;} else if (direction == 'right' && (y - 1) > -1) {temp = grids[x][y - 1];grids[x][y - 1] = grids[x][y];grids[x][y] = temp;} else if (direction == 'up' && (x + 1) < 4) {temp = grids[x + 1][y];grids[x + 1][y] = grids[x][y];grids[x][y] = temp;} else if (direction == 'down' && (x - 1) > -1) {temp = grids[x - 1][y];grids[x - 1][y] = grids[x][y];grids[x][y] = temp;}}},restartGame(){this.currentSeconds = "0.0";this.isShow = false;this.onShow();}
}

心得体会

本个demo整体难度不高，涉及的组件或样式都是很常见的，需要掌握栈、按钮、画布、计时器、滑动等组件即可完成编写，组件交互采用二维数组串连整个项目。通过本次项目实战，我学到了很多，之前在课堂上面讲的一些不理解的知识全部都融会贯通，并且有了更好的理解。

HarmonyOS（鸿蒙）运动手表第二个小游戏app——数字华容道相关推荐

Qt小游戏之数字华容道（百行代码搭雏形，可玩；含源码+注释）
文章目录一.数字华容道,样图如下二.废话少说直接上代码 1.首先是代码文件分析 2.CLabel的源码 3.CMainWindow的源码 4.main文件总结一.数字华容道,样图如下相信大家 ...
egret制作小游戏：数字华容道及有解判断（代码注释）（评论区有源码下载~）
继续学习egret,最近写了数字华容道的小游戏,非常简单的小游戏.首先预览一下效果: 数字华容道就是通过移动方块,将方块按照数字的排序进行排列.功能很简单,主要有刷新,提升阶数,如何一定有解,以及简单 ...
[原创]雷电小游戏app设计
[原创]雷电小游戏app设计相信雷电是很多人的童年回忆,本文就尝试用android studio做一个简单的雷电小游戏. 游戏界面如下: 项目结构如下: 设计思路: 游戏机制设计游戏目前的场景比较 ...
Qt小游戏-猜数字游戏（使用设计器完成界面设计）
目录 1.需要的知识点: 2.工程创建好后,先在设计器中实现界面 3.代码实现部分编辑使用QtCreator 完成简单小游戏-猜数字游戏实现效果如下: 1.需要的知识点: QLabel显示图片, ...
C语言小游戏，数字炸弹，手动设置炸弹的值和回合数。
C语言小游戏,数字炸弹,手动设置炸弹的值和回合数. 效果图: 代码部分: #include <stdio.h> void main() {int a,b;int d=35; //在这里手动 ...
C++小游戏—猜数字
今天我们用C++语言来制作一个小游戏-猜数字. #include<iostream> #include<ctime> using namespace std; int main ...
c语言小游戏猜数字学习完函数后的小练习。
今天为大家分享一个简单的C语言小游戏--猜数字:对于刚学习完函数的小伙伴这是一个简单的练手游戏:其中唯一超纲的内容就是随机数的生成:下面为大家简单介绍这个小游戏的实现思路.希望大家看完以后亲自实践一下 ...
web小游戏开发：华容道（一）
web小游戏开发:华容道(一) 华容道 html css 素材原图素材验证游戏关卡华容道老顾儿时的记忆啊,也是一个经典的益智游戏. 游戏规则就不用再介绍了吧,就是让曹操移动到曹营就算胜利. C ...
web小游戏开发：华容道（完）
web小游戏开发:华容道(完) 游戏关卡 html css js js 说明实现角色移动和胜利判定完整代码小结游戏关卡书接上文,对于游戏来说,我们可以看做一个 4 x 5 的区域,最小的小兵 ...

HarmonyOS（鸿蒙）运动手表第二个小游戏app——数字华容道

前言

概述

心得体会

HarmonyOS（鸿蒙）运动手表第二个小游戏app——数字华容道相关推荐

最新文章

热门文章