回复
鸿蒙NEXT开发案例：黑白棋
zhongcx
发布于 2024-12-1 06:15
浏览
0收藏
【引言】
黑白棋，又叫翻转棋（Reversi）、奥赛罗棋（Othello）、苹果棋或正反棋（Anti reversi）。黑白棋在西方和日本很流行。游戏通过相互翻转对方的棋子，最后以棋盘上谁的棋子多来判断胜负。它的游戏规则简单，因此上手很容易，但是它的变化又非常复杂。有一种说法是：只需要几分钟学会它，却需要一生的时间去精通它。
【环境准备】
电脑系统：windows 10
开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
工程版本：API 12
真机：Mate 60 Pro
语言：ArkTS、ArkUI
【实现的功能】
- 棋盘初始化：创建了一个8×8的棋盘，并在中心位置放置了四个棋子作为初始布局，遵循了翻转棋的标准规则。
- 棋子展示与翻转：定义了ChessCell类来表示棋盘上的每个单元格，支持显示黑色或白色棋子，并且能够翻转棋子，即从黑色变为白色或反之亦然。此过程伴随有动画效果。
- 有效走法检测：通过findReversible方法来查找某个位置放置新棋子后可翻转的棋子集合。此方法考虑了八个方向上的可能走法。
- 玩家切换：currentPlayerIsBlackChanged方法用于切换当前玩家，并检查当前玩家是否有有效的走法。如果没有，就检查对手是否有走法，如果没有则判定游戏结束并显示胜利者。
- AI走法：在单人模式下，AI会选择一个随机的有效走法进行下棋。6. 游戏结束判定：当没有任何一方可以走棋时，游戏结束并显示胜利信息。
【使用的算法】 - 有效走法检测算法
有效走法检测是通过findReversible函数实现的。该函数接收行号、列号和当前玩家的颜色作为参数，并返回一个数组，该数组包含所有可以在指定方向上翻转的棋子对象。
findReversible(row: number, col: number, color: number): ChessCell[] {
let reversibleTiles: ChessCell[] = [];
const directions = [
[-1, -1], // 左上
[-1, 0], // 正上
[-1, 1], // 右上
[0, -1], // 左
[0, 1], // 右
[1, -1], // 左下
[1, 0], // 正下
[1, 1] // 右下
];
for (const direction of directions) {
let foundOpposite = false;
let x = row;
let y = col;
do {
x += direction[0];
y += direction[1];
if (x < 0 || y < 0 || x >= this.chessBoardSize || y >= this.chessBoardSize) {
break;
}
const cell = this.chessBoard[x][y];
if (cell.frontVisibility === 0) {
break;
}
if (cell.frontVisibility === color) {
if (foundOpposite) {
let tempX: number = x - direction[0];
let tempY: number = y - direction[1];
while (tempX !== row || tempY !== col) {
reversibleTiles.push(this.chessBoard[tempX][tempY]);
tempX -= direction[0];
tempY -= direction[1];
}
}
break;
} else {
foundOpposite = true;
}
} while (true);
}
return reversibleTiles;
}
该算法首先定义了所有可能的方向，然后逐一检查这些方向上是否存在有效的可翻转棋子序列。对于每一个方向，它会尝试移动到下一个位置，并检查那个位置上的棋子状态，如果遇到空位则停止搜索；如果遇到同色棋子，那么在这之前的所有异色棋子都可以被翻转；否则继续搜索直到边界或同色棋子出现。
2. AI随机下棋策略
AI的随机下棋策略是在aiPlaceRandom函数中实现的。该函数首先收集所有当前玩家可以下棋的位置，然后从中随机选择一个位置进行下棋。
aiPlaceRandom() {
let validMoves: [number, number][] = [];
for (let i = 0; i < this.validMoveIndicators.length; i++) {
for (let j = 0; j < this.validMoveIndicators[i].length; j++) {
if (this.validMoveIndicators[i][j].isValidMove) {
validMoves.push([i, j]);
}
}
}
if (validMoves.length > 0) {
const randomMove = validMoves[Math.floor(Math.random() * validMoves.length)];
let chessCell = this.chessBoard[randomMove[0]][randomMove[1]];
this.placeChessPiece(randomMove[0], randomMove[1], chessCell)
}
}
这里通过双重循环遍历所有的validMoveIndicators数组，找到所有标记为有效走法的位置，将其坐标存储在一个数组中。之后，从中随机选取一个坐标，调用placeChessPiece函数进行下棋。
3. 棋子翻转动画
棋子的翻转动画是由ChessCell类中的flip方法控制的。根据当前棋子的状态，调用相应颜色的展示方法（如showBlack或showWhite），并根据传入的时间参数来决定是否启用动画。
flip(time: number) {
if (this.frontVisibility === 1) { // 当前是黑子，要翻转成白子
this.showWhite(time);
} else if (this.frontVisibility === 2) { // 当前是白子，要翻转成黑子
this.showBlack(time);
}
}
翻转操作会触发动画效果，通过旋转和透明度的变化来模拟棋子的翻转动作。这些算法共同作用，使得该游戏具有了基础的棋子翻转、有效走法检测和AI下棋的能力。
【完整代码】
import { promptAction } from '@kit.ArkUI'; // 导入用于弹出对话框的工具
@ObservedV2
class ChessCell { // 定义棋盘上的单元格类
@Trace frontVisibility: number = 0; // 单元格上的棋子状态：0表示无子, 1表示黑子，2表示白子
@Trace rotationAngle: number = 0; // 单元格卡片的旋转角度
@Trace opacity: number = 1; // 透明度
isAnimationRunning: boolean = false; // 标记动画是否正在运行
flip(time: number) { // 翻转棋子的方法
if (this.frontVisibility === 1) { // 当前是黑子，要翻转成白子
this.showWhite(time); // 调用展示白子的方法
} else if (this.frontVisibility === 2) { // 当前是白子，要翻转成黑子
this.showBlack(time); // 调用展示黑子的方法
}
}
showBlack(animationTime: number, callback?: () => void) { // 展示黑色棋子
if (this.isAnimationRunning) { // 如果已经有动画在运行，则返回
return; // 结束方法
}
this.isAnimationRunning = true; // 设置动画状态为运行中
if (animationTime == 0) { // 如果不需要动画
this.rotationAngle = 0; // 设置旋转角度为0
this.frontVisibility = 1; // 设置为黑子
this.isAnimationRunning = false; // 设置动画状态为停止
if (callback) { // 如果有回调函数，则执行
callback();
}
}
animateToImmediately({ // 开始动画
duration: animationTime, // 动画持续时间
iterations: 1, // 动画迭代次数
curve: Curve.Linear, // 动画曲线类型
onFinish: () => { // 动画完成后的回调
animateToImmediately({ // 再次开始动画
duration: animationTime, // 动画持续时间
iterations: 1, // 动画迭代次数
curve: Curve.Linear, // 动画曲线类型
onFinish: () => { // 动画完成后的回调
this.isAnimationRunning = false; // 设置动画状态为停止
if (callback) { // 如果有回调函数，则执行
callback();
}
}
}, () => { // 动画开始时的回调
this.frontVisibility = 1; // 看到黑色
this.rotationAngle = 0; // 设置旋转角度为0
});
}
}, () => { // 动画开始时的回调
this.rotationAngle = 90; // 设置旋转角度为90度
});
}
showWhite(animationTime: number, callback?: () => void) { // 展示白色棋子
if (this.isAnimationRunning) { // 如果已经有动画在运行，则返回
return; // 结束方法
}
this.isAnimationRunning = true; // 设置动画状态为运行中
if (animationTime == 0) { // 如果不需要动画
this.rotationAngle = 180; // 设置旋转角度为180度
this.frontVisibility = 2; // 设置为白子
this.isAnimationRunning = false; // 设置动画状态为停止
if (callback) { // 如果有回调函数，则执行
callback();
}
}
animateToImmediately({ // 开始动画
duration: animationTime, // 动画持续时间
iterations: 1, // 动画迭代次数
curve: Curve.Linear, // 动画曲线类型
onFinish: () => { // 动画完成后的回调
animateToImmediately({ // 再次开始动画
duration: animationTime, // 动画持续时间
iterations: 1, // 动画迭代次数
curve: Curve.Linear, // 动画曲线类型
onFinish: () => { // 动画完成后的回调
this.isAnimationRunning = false; // 设置动画状态为停止
if (callback) { // 如果有回调函数，则执行
callback();
}
}
}, () => { // 动画开始时的回调
this.frontVisibility = 2; // 看到白色
this.rotationAngle = 180; // 设置旋转角度为180度
});
}
}, () => { // 动画开始时的回调
this.rotationAngle = 90; // 设置旋转角度为90度
});
}
showWhiteAi(animationTime: number, callback?: () => void) { // 展示白色棋子
if (this.isAnimationRunning) { // 如果已经有动画在运行，则返回
return; // 结束方法
}
this.isAnimationRunning = true; // 设置动画状态为运行中
if (animationTime == 0) { // 如果不需要动画
this.rotationAngle = 180; // 设置旋转角度为180度
this.frontVisibility = 2; // 设置为白子
this.isAnimationRunning = false; // 设置动画状态为停止
if (callback) { // 如果有回调函数，则执行
callback();
}
}
this.rotationAngle = 180; // 设置旋转角度为180度
this.frontVisibility = 2; // 设置为白子
animateToImmediately({ // 开始动画
duration: animationTime * 3, // 动画持续时间
curve: Curve.EaseOut, // 动画曲线类型
iterations: 3, // 动画迭代次数
onFinish: () => { // 动画完成后的回调
animateToImmediately({ // 再次开始动画
duration: animationTime, // 动画持续时间
iterations: 1, // 动画迭代次数
curve: Curve.Linear, // 动画曲线类型
onFinish: () => { // 动画完成后的回调
this.isAnimationRunning = false; // 设置动画状态为停止
if (callback) { // 如果有回调函数，则执行
callback();
}
}
}, () => {
this.opacity = 1; // 设置透明度为1
});
}
}, () => {
this.opacity = 0.2; // 设置透明度为0.2
});
}
}
@ObservedV2
class TileHighlight { // 定义棋盘上有效移动的高亮类
@Trace isValidMove: boolean = false; // 标记是否为有效移动
}
@Entry
@Component
struct OthelloGame { // 定义黑白棋游戏组件
@State chessBoard: ChessCell[][] = []; // 棋盘数组
@State cellSize: number = 70; // 单元格大小
@State cellSpacing: number = 5; // 单元格间距
@State transitionDuration: number = 200; // 动画过渡时间
@State @Watch('currentPlayerIsBlackChanged') currentPlayerIsBlack: boolean = true; // 当前玩家是否为黑棋
@State chessBoardSize: number = 8; // 棋盘大小为8×8
@State validMoveIndicators: TileHighlight [][] = []; // 有效移动指示器
@State isTwoPlayerMode: boolean = false; // 是否为双人模式
@State isAIPlaying:boolean = false; // AI是否正在下棋
currentPlayerIsBlackChanged() { // 当前玩家变化时的处理
setTimeout(() => { // 延迟执行
const color = this.currentPlayerIsBlack ? 1 : 2; // 1是黑子，2是白子
let hasMoves = this.hasValidMoves(color); // 检查当前玩家是否有有效移动
if (!hasMoves) { // 如果没有有效移动
let opponentHasMoves = this.hasValidMoves(!this.currentPlayerIsBlack ? 1 : 2); // 检查对手是否有有效移动
if (!opponentHasMoves) { // 如果对手也没有有效移动
const winner = this.determineWinner(); // 确定赢家
console.log(winner); // 输出赢家
promptAction.showDialog({ // 弹出对话框
title: '游戏结束', // 对话框标题
message: `${winner}`, // 对话框消息
buttons: [{ text: '重新开始', color: '#ffa500' }] // 按钮
}).then(() => { // 按钮点击后的处理
this.initGame(); // 重新开始游戏
});
} else {
this.currentPlayerIsBlack = !this.currentPlayerIsBlack; // 切换到下一玩家
}
} else {
if (!this.currentPlayerIsBlack) { // 当前是白棋, 模拟AI下棋
if (!this.isTwoPlayerMode) { // 如果不是双人模式
setTimeout(() => { // 延迟执行
this.aiPlaceRandom(); // AI随机下棋
}, this.transitionDuration + 20); // 加入过渡时间
}
}
}
}, this.transitionDuration + 20); // 加入过渡时间
}
aiPlaceRandom() { // AI随机下棋
let validMoves: [number, number][] = []; // 存储有效移动的位置
for (let i = 0; i < this.validMoveIndicators.length; i++) {
for (let j = 0; j < this.validMoveIndicators[i].length; j++) {
if (this.validMoveIndicators[i][j].isValidMove) { // 如果是有效移动
validMoves.push([i, j]); // 添加到有效移动数组中
}
}
}
if (validMoves.length > 0) { // 如果有有效移动
const randomMove = validMoves[Math.floor(Math.random() * validMoves.length)]; // 随机选择一个有效移动
let chessCell = this.chessBoard[randomMove[0]][randomMove[1]]; // 获取对应的棋子
this.placeChessPiece(randomMove[0], randomMove[1], chessCell); // 下棋
}
}
placeChessPiece(i: number, j: number, chessCell: ChessCell) { // 下棋
let reversibleTiles = this.findReversible(i, j, this.currentPlayerIsBlack ? 1 : 2); // 查找可翻转的棋子
console.info(`reversibleTiles:${JSON.stringify(reversibleTiles)}`); // 输出可翻转的棋子
if (reversibleTiles.length > 0) { // 如果有可翻转的棋子
if (this.currentPlayerIsBlack) { // 当前是黑棋
this.currentPlayerIsBlack = false; // 切换到白棋
chessCell.showBlack(0); // 展示黑色棋子
for (let i = 0; i < reversibleTiles.length; i++) {
reversibleTiles[i].flip(this.transitionDuration); // 翻转对应的棋子
}
} else { // 当前是白棋
this.currentPlayerIsBlack = true; // 切换到黑棋
if (this.isTwoPlayerMode) { // 如果是双人游戏
chessCell.showWhite(0); // 展示白色棋子
for (let i = 0; i < reversibleTiles.length; i++) {
reversibleTiles[i].flip(this.transitionDuration); // 翻转对应的棋子
}
} else { // 如果是单人游戏
this.isAIPlaying = true; // AI正在下棋
chessCell.showWhiteAi(this.transitionDuration, () => { // 展示白色棋子（带闪烁动画）
for (let i = 0; i < reversibleTiles.length; i++) {
reversibleTiles[i].flip(this.transitionDuration); // 翻转对应的棋子
}
this.currentPlayerIsBlackChanged(); // 切换到下一玩家
this.isAIPlaying = false; // AI下完了
});
}
}
}
}
hasValidMoves(color: number) { // 检查是否有有效移动
let hasMoves = false; // 默认没有有效移动
for (let row = 0; row < this.chessBoardSize; row++) {
for (let col = 0; col < this.chessBoardSize; col++) {
if (this.chessBoard[row][col].frontVisibility === 0 && this.findReversible(row, col, color).length > 0) {
this.validMoveIndicators[row][col].isValidMove = true; // 标记为有效移动
hasMoves = true; // 存在有效移动
} else {
this.validMoveIndicators[row][col].isValidMove = false; // 标记为无效移动
}
}
}
return hasMoves; // 返回是否有有效移动
}
aboutToAppear(): void { // 组件即将显示时的处理
for (let i = 0; i < this.chessBoardSize; i++) {
this.chessBoard.push([]); // 添加一行
this.validMoveIndicators.push([]); // 添加一行有效移动指示器
for (let j = 0; j < this.chessBoardSize; j++) {
this.chessBoard[i].push(new ChessCell()); // 初始化棋盘单元格
this.validMoveIndicators[i].push(new TileHighlight()); // 初始化有效移动指示器
}
}
this.initGame(); // 初始化游戏
}
initGame() { // 初始化游戏
this.currentPlayerIsBlack = true; // 黑棋先手
for (let i = 0; i < this.chessBoardSize; i++) {
for (let j = 0; j < this.chessBoardSize; j++) {
this.chessBoard[i][j].frontVisibility = 0; // 设置为无子
}
}
// 初始棋盘布局
this.chessBoard[3][3].frontVisibility = 2; // 白子
this.chessBoard[3][4].frontVisibility = 1; // 黑子
this.chessBoard[4][3].frontVisibility = 1; // 黑子
this.chessBoard[4][4].frontVisibility = 2; // 白子
this.currentPlayerIsBlackChanged(); // 切换到第一个玩家
}
findReversible(row: number, col: number, color: number): ChessCell[] { // 查找可翻转的棋子
let reversibleTiles: ChessCell[] = []; // 存储可翻转的棋子
const directions = [ // 八个方向
[-1, -1], // 左上
[-1, 0], // 上
[-1, 1], // 右上
[0, -1], // 左
[0, 1], // 右
[1, -1], // 左下
[1, 0], // 下
[1, 1] // 右下
];
for (const direction of directions) {
let foundOpposite = false; // 是否找到对手的棋子
let x = row; // 当前行
let y = col; // 当前列
do {
x += direction[0]; // 按照方向更新行
y += direction[1]; // 按照方向更新列
if (x < 0 || y < 0 || x >= this.chessBoardSize || y >= this.chessBoardSize) {
break; // 超出边界，结束循环
}
const cell = this.chessBoard[x][y]; // 获取当前单元格
if (cell.frontVisibility === 0) {
break; // 如果是空单元格，结束循环
}
if (cell.frontVisibility === color) { // 如果是当前颜色的棋子
if (foundOpposite) { // 如果之前找到过对手的棋子
let tempX: number = x - direction[0]; // 从当前单元格向回查找
let tempY: number = y - direction[1]; // 从当前单元格向回查找
while (tempX !== row || tempY !== col) { // 循环直到回到起始位置
reversibleTiles.push(this.chessBoard[tempX][tempY]); // 将可翻转的棋子添加到数组中
tempX -= direction[0]; // 更新临时X坐标
tempY -= direction[1]; // 更新临时Y坐标
}
}
break; // 找到当前颜色的棋子，结束循环
} else {
foundOpposite = true; // 找到对手的棋子
}
} while (true); // 循环直到找到结果
}
return reversibleTiles; // 返回可翻转的棋子数组
}
determineWinner(): string { // 确定赢家
let blackCount = 0; // 黑棋数量
let whiteCount = 0; // 白棋数量
for (let row of this.chessBoard) {
for (let cell of row) {
if (cell.frontVisibility === 1) { // 如果是黑子
blackCount++; // 黑棋数量加一
}
if (cell.frontVisibility === 2) { // 如果是白子
whiteCount++; // 白棋数量加一
}
}
}
if (blackCount > whiteCount) { // 如果黑棋数量大于白棋数量
return "黑棋获胜！"; // 返回黑棋获胜的消息
}
if (whiteCount > blackCount) { // 如果白棋数量大于黑棋数量
return "白棋获胜！"; // 返回白棋获胜的消息
}
return "平局！"; // 如果数量相等，返回平局的消息
}
hasValidMove(color: number): boolean { // 检查是否有有效移动
for (let row = 0; row < this.chessBoardSize; row++) { // 遍历棋盘的每一行
for (let col = 0; col < this.chessBoardSize; col++) { // 遍历棋盘的每一列
if (this.chessBoard[row][col].frontVisibility === 0 && this.findReversible(row, col, color).length > 0) {
return true; // 如果找到有效移动，返回true
}
}
}
return false; // 如果没有有效移动，返回false
}
build() { // 构建游戏界面
Column({ space: 20 }) { // 创建一个列容器
Row() { // 创建一个行容器
Row() { // 创建一个行容器用于显示黑棋行动
Text(``) // 显示单元格的值或空字符串
.width(`${this.cellSize}lpx`) // 设置宽度
.height(`${this.cellSize}lpx`) // 设置高度
.textAlign(TextAlign.Center) // 文本居中
.backgroundColor(Color.Black) // 设置背景颜色为黑色
.borderRadius('50%') // 设置圆角
.padding(10) // 设置内边距
Text(`黑棋行动`) // 显示黑棋行动的文本
.fontColor(Color.White) // 设置字体颜色为白色
.padding(10) // 设置内边距
}
.visibility(this.currentPlayerIsBlack ? Visibility.Visible : Visibility.Hidden) // 根据当前玩家的颜色设置可见性
Row() { // 创建一个行容器用于显示白棋行动
Text(`白棋行动`) // 显示白棋行动的文本
.fontColor(Color.White) // 设置字体颜色为白色
.padding(10) // 设置内边距
Text(``) // 显示单元格的值或空字符串
.width(`${this.cellSize}lpx`) // 设置宽度
.height(`${this.cellSize}lpx`) // 设置高度
.textAlign(TextAlign.Center) // 文本居中
.backgroundColor(Color.White) // 设置背景颜色为白色
.fontColor(Color.White) // 设置字体颜色为白色
.borderRadius('50%') // 设置圆角
.padding(10) // 设置内边距
}
.visibility(!this.currentPlayerIsBlack ? Visibility.Visible : Visibility.Hidden) // 根据当前玩家的颜色设置可见性
}
.width(`${(this.cellSize + this.cellSpacing * 2) * 8}lpx`) // 设置宽度
.justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式
.margin({ top: 20 }) // 设置上边距
Stack() { // 创建一个堆叠容器
// 棋盘背景
Flex({ wrap: FlexWrap.Wrap }) { // 创建一个灵活的容器，允许换行
ForEach(this.validMoveIndicators, (row: boolean[], _rowIndex: number) => { // 遍历有效移动指示器
ForEach(row, (item: TileHighlight, _colIndex: number) => { // 遍历每一行的有效移动指示器
Text(`${item.isValidMove ? '+' : ''}`) // 显示有效移动的标记
.width(`${this.cellSize}lpx`) // 设置宽度
.height(`${this.cellSize}lpx`) // 设置高度
.margin(`${this.cellSpacing}lpx`) // 设置边距
.fontSize(`${this.cellSize / 2}lpx`) // 设置字体大小
.fontColor(Color.White) // 设置字体颜色为白色
.textAlign(TextAlign.Center) // 文本居中
.backgroundColor(Color.Gray) // 设置背景颜色为灰色
.borderRadius(2); // 设置圆角
});
});
}
.width(`${(this.cellSize + this.cellSpacing * 2) * 8}lpx`) // 设置宽度
// 棋子
Flex({ wrap: FlexWrap.Wrap }) { // 创建一个灵活的容器，允许换行
ForEach(this.chessBoard, (row: ChessCell[], rowIndex: number) => { // 遍历棋盘
ForEach(row, (chessCell: ChessCell, colIndex: number) => { // 遍历每一行的棋子
Text(``) // 显示单元格的值或空字符串
.width(`${this.cellSize}lpx`) // 设置宽度
.height(`${this.cellSize}lpx`) // 设置高度
.margin(`${this.cellSpacing}lpx`) // 设置边距
.fontSize(`${this.cellSize / 2}lpx`) // 设置字体大小
.textAlign(TextAlign.Center) // 文本居中
.opacity(chessCell.opacity) // 设置透明度
.backgroundColor(chessCell.frontVisibility != 0 ? // 设置背景颜色
(chessCell.frontVisibility === 1 ? Color.Black : Color.White) : // 根据棋子颜色设置
Color.Transparent) // 如果没有棋子则透明
.borderRadius('50%') // 设置圆角
.rotate({ // 设置旋转
x: 0, // X轴旋转
y: 1, // Y轴旋转
z: 0, // Z轴旋转
angle: chessCell.rotationAngle, // 旋转角度
centerX: `${this.cellSize / 2}lpx`, // 中心点X坐标
centerY: `${this.cellSize / 2}lpx`, // 中心点Y坐标
})
.onClick(() => { // 单击事件处理
if (this.isAIPlaying) { // 如果AI正在下棋
console.info(`ai正在落子，玩家不可继续落子`); // 输出信息
return; // 结束方法
}
if (chessCell.frontVisibility === 0) { // 如果没有棋子，需要落子
this.placeChessPiece(rowIndex, colIndex, chessCell); // 调用下棋方法
}
});
});
});
}
.width(`${(this.cellSize + this.cellSpacing * 2) * 8}lpx`) // 设置宽度
}
.padding(`${this.cellSpacing}lpx`) // 设置内边距
.backgroundColor(Color.Black) // 设置背景颜色为黑色
Row() { // 创建一个行容器用于设置游戏模式
Text(`${this.isTwoPlayerMode ? '双人游戏' : '单人游戏'}`) // 显示当前游戏模式
.height(50) // 设置高度
.padding({ left: 10 }) // 设置左边距
.fontSize(16) // 设置字体大小
.textAlign(TextAlign.Start) // 文本左对齐
.backgroundColor(0xFFFFFF); // 设置背景颜色为白色
Toggle({ type: ToggleType.Switch, isOn: this.isTwoPlayerMode }) // 创建切换开关
.margin({ left: 200, right: 10 }) // 设置边距
.onChange((isOn: boolean) => { // 切换开关状态变化时的处理
this.isTwoPlayerMode = isOn; // 更新游戏模式
});
}
.backgroundColor(0xFFFFFF) // 设置背景颜色为白色
.borderRadius(5); // 设置圆角
Button('重新开始').onClick(() => { // 创建重新开始按钮
this.initGame(); // 点击时初始化游戏
});
}
.height('100%').width('100%') // 设置高度和宽度
.backgroundColor(Color.Orange); // 设置背景颜色为橙色
}
}
分类
标签
赞
收藏
回复
相关推荐
