pageadmin自助建站系统德阳响应式网站建设

1. 引言

数字华容道是一款经典的益智游戏，玩家通过移动数字方块，最终将其排列成顺序。本文将介绍如何使用鸿蒙NEXT框架开发一个数字华容道游戏，展示其核心功能和实现细节。

2. 环境准备

电脑系统：windows 10
工程版本：API 12
真机：Mate 60 Pro
语言：ArkTS、ArkUI

3. 项目结构

本项目使用鸿蒙NEXT框架，主要包含以下几个部分：
游戏面板：用于显示数字方块。
状态管理：管理游戏状态，如当前选中的方块、游戏是否结束等。
触摸事件：处理用户的触摸和滑动操作。

4. 关键功能实现

4.1 游戏面板初始化

游戏面板由一个包含数字和空白格的数组构成。初始化时，调用shuffleGameBoard方法随机打乱方块顺序。

@State gameBoard: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 0]; // 游戏面板数据
aboutToAppear(): void {this.shuffleGameBoard(); // 打乱游戏面板
}

4.2 方块移动逻辑

通过canMove方法判断方块是否可以移动到空白格，moveTile方法实现方块的实际移动。

private canMove(tileIndex: number): boolean {// 判断方块是否可以移动到空白格
}private moveTile(tileIndex: number) {if (this.canMove(tileIndex)) {// 移动方块}
}

4.3 胜利条件检查

在每次移动后，调用checkForWin方法检查当前状态是否为胜利状态，并在胜利时弹出提示框。

private checkForWin() {if (this.isGameOver) {promptAction.showDialog({title: '游戏胜利！',message: '恭喜你，用时：' + ((Date.now() - this.startTime) / 1000).toFixed(3) + '秒',buttons: [{ text: '重新开始', color: '#ffa500' }]}).then(() => {this.shuffleGameBoard(); // 重新开始游戏});}
}

4.4 用户交互

通过触摸事件和滑动手势，用户可以直接与游戏面板进行交互。onTouch和gesture方法处理用户的触摸和滑动操作。

.onTouch((e) => {// 记录触摸位置
})
.gesture(SwipeGesture({ direction: SwipeDirection.All }).onAction((_event: GestureEvent) => {// 处理滑动方向})
)

5. 完整代码

import { promptAction } from '@kit.ArkUI';@Entry
@Component
struct NumberPuzzle {@State gameBoard: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 0]; // 游戏面板数据，0表示空白格@State selectedTile: number = -1; // 当前选中的方块@State isGameOver: boolean = false; // 游戏是否结束@State cellSize: number = 100; // 单元格大小@State cellMargin: number = 5; // 单元格边距@State startTime: number = 0; // 游戏开始时间@State screenStartX: number = 0; // 触摸开始时的屏幕X坐标@State screenStartY: number = 0; // 触摸开始时的屏幕Y坐标@State lastScreenX: number = 0; // 触摸结束时的屏幕X坐标@State lastScreenY: number = 0; // 触摸结束时的屏幕Y坐标@State shouldAnimate: boolean = true; // 控制动画是否开启// 组件出现前打乱游戏面板aboutToAppear(): void {this.shuffleGameBoard();}// 检查指定位置的方块是否可以移动到空白处private canMove(tileIndex: number): boolean {const blankIndex = this.gameBoard.indexOf(0); // 获取空白格的位置const blankRow = Math.floor(blankIndex / 3); // 计算空白格的行const blankCol = blankIndex % 3; // 计算空白格的列const tileRow = Math.floor(tileIndex / 3); // 计算方块的行const tileCol = tileIndex % 3; // 计算方块的列// 判断方块是否可以移动到空白格return ((tileRow === blankRow && Math.abs(tileCol - blankCol) === 1) || // 同行且相邻(tileCol === blankCol && Math.abs(tileRow - blankRow) === 1) // 同列且相邻);}// 移动方块private moveTile(tileIndex: number) {if (this.canMove(tileIndex)) { // 如果可以移动const blankIndex = this.gameBoard.indexOf(0); // 获取空白格的位置let temp = this.gameBoard[tileIndex]; // 保存要移动的方块this.gameBoard[tileIndex] = this.gameBoard[blankIndex]; // 将空白格的值赋给方块this.gameBoard[blankIndex] = temp; // 将方块的值赋给空白格this.selectedTile = -1; // 重置选中的方块this.checkForWin(); // 检查是否获胜}}// 检查是否获胜private checkForWin() {const winState = [1, 2, 3, 4, 5, 6, 7, 8, 0]; // 胜利状态this.isGameOver = this.gameBoard.join(',') === winState.join(','); // 判断当前状态是否为胜利状态if (this.isGameOver) {promptAction.showDialog({title: '游戏胜利！',message: '恭喜你，用时：' + ((Date.now() - this.startTime) / 1000).toFixed(3) + '秒',buttons: [{ text: '重新开始', color: '#ffa500' }]}).then(() => {this.shuffleGameBoard(); // 重新开始游戏});}}// 打乱游戏面板private shuffleGameBoard() {this.startTime = Date.now(); // 记录开始时间let tempBoard = [...this.gameBoard]; // 复制当前游戏面板let moves = 0; // 移动次数const maxMoves = 10000; // 最大移动次数this.shouldAnimate = false; // 关闭动画// 寻找空白格的位置const findBlankIndex = () => tempBoard.indexOf(0);// 合法的移动方向const validDirections = (index: number) => {let valid: string[] = [];if (index % 3 > 0) {valid.push('left'); // 左边可以移动}if (index % 3 < 2) {valid.push('right'); // 右边可以移动}if (index >= 3) {valid.push('up'); // 上面可以移动}if (index <= 5) {valid.push('down'); // 下面可以移动}return valid;};// 移动空白格const moveBlank = (direction: string, index: number) => {let newIndex = index; // 新位置switch (direction) {case 'up':newIndex -= 3; // 上移break;case 'down':newIndex += 3; // 下移break;case 'left':newIndex -= 1; // 左移break;case 'right':newIndex += 1; // 右移break;}let temp = tempBoard[newIndex]; // 保存新位置的值tempBoard[newIndex] = tempBoard[index]; // 将空白格的值赋给新位置tempBoard[index] = temp; // 将新位置的值赋给空白格};// 模拟手势移动while (moves < maxMoves) {const blankIndex = findBlankIndex(); // 获取空白格的位置const possibleDirections = validDirections(blankIndex); // 获取合法的移动方向if (possibleDirections.length > 0) {const direction = possibleDirections[Math.floor(Math.random() * possibleDirections.length)]; // 随机选择一个方向moveBlank(direction, blankIndex); // 移动空白格moves++; // 增加移动次数} else {break; // 如果没有合法方向，退出循环}}this.gameBoard = tempBoard; // 更新游戏面板this.selectedTile = -1; // 重置选中的方块this.isGameOver = false; // 重置游戏状态this.shouldAnimate = true; // 重新开启动画}// 更新动画private updateAnim(index: number) {if (!this.shouldAnimate) return undefined; // 如果不需要动画，返回undefinedif (this.canMove(index)) { // 如果可以移动const blankIndex = this.gameBoard.indexOf(0); // 获取空白格的位置const diff = Math.abs(index - blankIndex); // 计算移动的距离if (diff === 1) { // 左右移动return TransitionEffect.translate({x: `${(diff === 1 ? (index > blankIndex ? -1 : 1) : 0) * (this.cellSize + this.cellMargin * 2)}lpx`}).animation({ duration: 100 }); // 设置动画效果} else if (diff === 3) { // 上下移动return TransitionEffect.translate({y: `${(diff === 3 ? (index > blankIndex ? -1 : 1) : 0) * (this.cellSize + this.cellMargin * 2)}lpx`}).animation({ duration: 100 }); // 设置动画效果}}return undefined; // 返回undefined}build() {Column({ space: 10 }) { // 主容器// 游戏面板容器Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row }) {ForEach(this.gameBoard, (item: number, index: number) => {Text(`${item}`) // 显示数字文本.width(`${this.cellSize}lpx`) // 设置宽度.height(`${this.cellSize}lpx`) // 设置高度.margin(`${this.cellMargin}lpx`) // 设置外边距.fontSize(`${this.cellSize / 2}lpx`) // 设置字体大小.textAlign(TextAlign.Center) // 文本居中.backgroundColor(this.gameBoard[index] === 0 ? Color.White : Color.Orange) // 背景颜色.fontColor(Color.White) // 字体颜色.borderRadius(5) // 圆角.visibility(item == 0 ? Visibility.Hidden : Visibility.Visible) // 隐藏空白格.transition(this.updateAnim(index)) // 设置动画过渡.onClick(() => {if (this.canMove(index)) { // 如果可以移动this.moveTile(index); // 移动方块}}); // 点击事件})}.width(`${(this.cellSize + this.cellMargin * 2) * 3}lpx`) // 设置容器宽度// 重新开始按钮Button('重新开始').width('50%') // 设置按钮宽度.height('10%') // 设置按钮高度.onClick(() => {this.shuffleGameBoard(); // 重新开始游戏});}.width('100%') // 设置主容器宽度.height('100%') // 设置主容器高度.onTouch((e) => {if (e.type === TouchType.Down && e.touches.length > 0) { // 触摸开始，记录初始位置this.screenStartX = e.touches[0].x;this.screenStartY = e.touches[0].y;} else if (e.type === TouchType.Up && e.changedTouches.length > 0) { // 当手指抬起时，更新最后的位置this.lastScreenX = e.changedTouches[0].x;this.lastScreenY = e.changedTouches[0].y;}}).gesture(SwipeGesture({ direction: SwipeDirection.All }) // 支持方向中 all可以是上下左右.onAction((_event: GestureEvent) => {const swipeX = this.lastScreenX - this.screenStartX;const swipeY = this.lastScreenY - this.screenStartY;// 判断滑动方向let directionText = '';if (Math.abs(swipeX) > Math.abs(swipeY)) {if (swipeX > 0) {directionText = 'Right'; // 向右滑动} else {directionText = 'Left'; // 向左滑动}} else {if (swipeY > 0) {directionText = 'Down'; // 向下滑动} else {directionText = 'Up'; // 向上滑动}}console.info('====滑动方向:', directionText);// console.info('====起点x:', this.screenStartX);// console.info('====起点y:', this.screenStartY);// console.info('====终点x:', this.lastScreenX);// console.info('====终点y:', this.lastScreenY);// 清除开始位置记录，准备下一次滑动判断this.screenStartX = 0;this.screenStartY = 0;this.moveOnSwipe(directionText); // 根据方向移动方块}))}private moveOnSwipe(direction: string) {const blankIndex = this.gameBoard.indexOf(0); // 获取空白格的位置let newIndex = blankIndex;switch (direction) {case 'Up':newIndex = blankIndex + 3; // 向上移动break;case 'Down':newIndex = blankIndex - 3; // 向下移动break;case 'Left':newIndex = blankIndex + 1; // 向左移动break;case 'Right':newIndex = blankIndex - 1; // 向右移动break;}if (this.isValidMove(newIndex)) { // 如果移动是有效的this.moveTile(newIndex); // 移动方块}}private isValidMove(newIndex: number): boolean {// 检查新位置是否越界return newIndex >= 0 && newIndex < this.gameBoard.length;}
}