鸿蒙版(ArkTs) 贪吃蛇，包含无敌模式 最高分 暂停和继续功能

鸿蒙版(ArkTs) 贪吃蛇，包含无敌模式 最高分 暂停和继续功能;
效果图如下：
代码如下：

// 所有import语句必须放在文件开头
import router from '@ohos.router';
import promptAction from '@ohos.promptAction';
// Add this import at the top with other imports
// Remove the problematic import
// import { Gradient, GradientDirection } from '@ohos.arkui.graphics';// 在文件开头添加Preferences导入
import preferences from '@ohos.data.preferences';// 移除@Entry装饰器
@Entry
@Component
struct Tsc {@State snake: Array<[number, number]> = [[5, 5], [5, 6], [5, 7]];@State food: [number, number] = [10, 10];@State private _moveDirection: number = 3;@State score: number = 0;@State highScore: number = 0;private prefs?: preferences.Preferences; // Use optional type instead of undefined@State isInvincible: boolean = false;@State foodColor: Color = Color.Red;@State snakeHeadColor: Color = Color.Green;private gridSize: number = 20;private timer: number = 0;@State isPlaying: boolean = false;// 添加generateFood方法generateFood() {const gridCells = 12;let newFood: [number, number] = [0, 0];let validPositionFound = false;const allPositions: Array<[number, number]> = [];for (let x = 0; x < gridCells; x++) {for (let y = 0; y < gridCells; y++) {allPositions.push([x, y]);}}allPositions.sort(() => Math.random() - 0.5);for (const pos of allPositions) {const isOverlap = this.snake.some(segment => segment[0] === pos[0] && segment[1] === pos[1]);if (!isOverlap) {newFood = pos;validPositionFound = true;break;}}this.food = newFood;this.foodColor = Color.Red; // 设置默认食物颜色}// 重置游戏状态resetGame() {this.snake = [[5, 5], [5, 6], [5, 7]];this._moveDirection = 3;this.score = 0;this.generateFood();}startGame() {// 先清除之前的定时器if (this.timer) {clearInterval(this.timer);}this.resetGame();this.isPlaying = true;this.timer = setInterval(() => {this.moveSnake();}, 200);}// 添加生命周期方法aboutToAppear() {this.loadHighScore();}// 加载历史最高分async loadHighScore() {try {this.prefs = await preferences.getPreferences(getContext(this), 'snakeGamePrefs');const score = await this.prefs.get('highScore', 0);this.highScore = Number(score);} catch (err) {console.error('Failed to load high score:', err);}}// 保存历史最高分async saveHighScore(score: number) {try {if (this.prefs) { // Add null checkawait this.prefs.put('highScore', score);await this.prefs.flush();}} catch (err) {console.error('Failed to save high score:', err);}}endGame() {clearInterval(this.timer);this.isPlaying = false;// 更新历史最高分if (this.score > this.highScore) {this.highScore = this.score;this.saveHighScore(this.highScore);}promptAction.showToast({message: '游戏结束！',duration: 2000});}stopGame() {clearInterval(this.timer);this.isPlaying = false;if (this.score > this.highScore) {this.highScore = this.score;this.saveHighScore(this.highScore);}}moveSnake() {if (!this.isPlaying) return;let head: [number, number] = [this.snake[0][0], this.snake[0][1]];switch (this._moveDirection) {case 0: head[1] -= 1; break;case 1: head[1] += 1; break;case 2: head[0] -= 1; break;case 3: head[0] += 1; break;}// 修正边界检测逻辑const gridCells = 12; // 与显示区域保持一致if (head[0] < 0 || head[0] >= gridCells || head[1] < 0 || head[1] >= gridCells) {if (!this.isInvincible) {this.endGame();return;}head[0] = (head[0] + gridCells) % gridCells;head[1] = (head[1] + gridCells) % gridCells;}if (head[0] === this.food[0] && head[1] === this.food[1]) {this.score += 10;this.generateFood();// 吃到食物时，只添加新头部，不删除尾部this.snake = [head, ...this.snake];} else {// 没吃到食物时，移动蛇身this.snake.pop();this.snake = [head, ...this.snake];}}// 添加暂停游戏方法@State isPaused: boolean = false; // 添加暂停状态// 修改暂停游戏方法pauseGame() {clearInterval(this.timer);this.isPlaying = false;this.isPaused = true;}// 修改恢复游戏方法resumeGame() {this.isPlaying = true;this.isPaused = false;this.timer = setInterval(() => {this.moveSnake();}, 200);}build() {Column() {Button('返回首页').width(100).height(40).fontSize(16).alignSelf(ItemAlign.Start).margin(10).onClick(() => {router.pushUrl({url: 'pages/Index'})})// 添加历史最高分显示Row() {Text(`当前得分: ${this.score}`).fontSize(20)Text(`最高分: ${this.highScore}`).fontSize(20).margin({ left: 20 })}.margin({ bottom: 10 })// 修改按钮布局Row() {if (!this.isPlaying && !this.isPaused) {Button('开始游戏').width(100).height(35).fontSize(14).margin(5).onClick(() => {this.startGame();})} else if (this.isPlaying) {Button('暂停').width(100).height(35).fontSize(14).margin(5).onClick(() => {this.pauseGame();})} else if (this.isPaused) {Button('继续').width(100).height(35).fontSize(14).margin(5).onClick(() => {this.resumeGame();})}Button('重新开始').width(100).height(35).fontSize(14).margin(5).onClick(() => {this.startGame();})Button('结束游戏').width(100).height(35).fontSize(14).margin(5).onClick(() => {this.stopGame();})}.margin({ top: 10 })Stack() {Circle({ width: this.gridSize, height: this.gridSize }).fill(this.foodColor)// 使用固定颜色描边.stroke(Color.Gray).strokeWidth(2)// 添加阴影效果模拟渐变.shadow({radius: 3,color: Color.White,offsetX: 1,offsetY: 1}).position({x: this.food[0] * this.gridSize,y: this.food[1] * this.gridSize})ForEach(this.snake, (segment: [number, number], index: number) => {if (index === 0) {Rect({ width: this.gridSize, height: this.gridSize }).fill(this.snakeHeadColor).radius(5).position({x: segment[0] * this.gridSize,y: segment[1] * this.gridSize})} else {// 每节蛇身使用食物颜色Circle({ width: this.gridSize, height: this.gridSize }).fill(this.foodColor).position({x: segment[0] * this.gridSize,y: segment[1] * this.gridSize})}})}.width(this.gridSize * 12).height(this.gridSize * 12).border({ width: 1, color: Color.Black }).clip(true) // 添加裁剪确保内容不会超出边框.margin({ bottom: 10 })Column() {Button('上').width(80).height(50).fontSize(18).margin(5).onClick(() => { this._moveDirection = 0; })Row() {Button('左').width(80).height(50).fontSize(18).margin(5).onClick(() => { this._moveDirection = 2; })Button('右').width(80).height(50).fontSize(18).margin(5).onClick(() => { this._moveDirection = 3; })}Button('下').width(80).height(50).fontSize(18).margin(5).onClick(() => { this._moveDirection = 1; })}.margin({ top: 10 })Row() {Text('无敌模式:').fontSize(18).fontColor(this.isInvincible ? Color.Red : Color.Black).margin({ right: 10 })Toggle({ type: ToggleType.Switch, isOn: this.isInvincible }).width(40).height(24).onChange((isOn: boolean) => {this.isInvincible = isOn;})Text(this.isInvincible ? '开启' : '关闭').fontSize(18).fontColor(this.isInvincible ? Color.Red : Color.Black).margin({ left: 10 })}.margin({ top: 20 }).padding(10).borderRadius(10).backgroundColor('#f0f0f0').margin({ top: 10 })}.width('100%').height('100%').backgroundColor('#E0F7FA').onKeyEvent((event: KeyEvent) => {if (event.type === KeyType.Down) {switch (event.keyCode) {case 19: if (this._moveDirection !== 1) this._moveDirection = 0; break;case 20: if (this._moveDirection !== 0) this._moveDirection = 1; break;case 21: if (this._moveDirection !== 3) this._moveDirection = 2; break;case 22: if (this._moveDirection !== 2) this._moveDirection = 3; break;}}})}
}