鸿蒙（HarmonyOS5）实现跳一跳小游戏

news2025/6/10 18:43:21

下面我将介绍如何使用鸿蒙的ArkUI框架，实现一个简单的跳一跳小游戏。

1. 项目结构

src/main/ets/
├── MainAbility
│   ├── pages
│   │   ├── Index.ets          // 主页面
│   │   └── GamePage.ets       // 游戏页面
│   └── model
│       └── GameModel.ets      // 游戏逻辑
└── resources                  // 资源文件

2. 游戏实现代码

GameModel.ets - 游戏逻辑模型

export class GameModel {
  // 游戏状态
  score: number = 0;
  isJumping: boolean = false;
  currentPosition: number = 0;
  nextPosition: number = 0;
  jumpDistance: number = 0;
  
  // 初始化游戏
  initGame() {
    this.score = 0;
    this.currentPosition = 0;
    this.generateNextPosition();
  }
  
  // 生成下一个平台位置
  generateNextPosition() {
    this.nextPosition = this.currentPosition + 100 + Math.random() * 150;
  }
  
  // 跳跃逻辑
  jump(power: number): boolean {
    if (this.isJumping) return false;
    
    this.isJumping = true;
    this.jumpDistance = power * 2;
    
    // 计算是否成功跳到下一个平台
    const distanceToNext = this.nextPosition - this.currentPosition;
    const isSuccess = Math.abs(this.jumpDistance - distanceToNext) < 20;
    
    if (isSuccess) {
      this.score++;
      this.currentPosition = this.nextPosition;
      this.generateNextPosition();
    }
    
    setTimeout(() => {
      this.isJumping = false;
      if (!isSuccess) {
        // 游戏结束逻辑
      }
    }, 1000);
    
    return isSuccess;
  }
}

GamePage.ets - 游戏页面

import { GameModel } from '../model/GameModel';

@Entry
@Component
struct GamePage {
  private gameModel: GameModel = new GameModel();
  @State power: number = 0;
  @State isCharging: boolean = false;
  
  build() {
    Column() {
      // 分数显示
      Text(`分数: ${this.gameModel.score}`)
        .fontSize(30)
        .margin({ bottom: 20 });
      
      // 游戏区域
      Stack() {
        // 当前平台
        Rect()
          .width(80)
          .height(20)
          .fill(Color.Blue)
          .position({ x: 100, y: 400 });
        
        // 下一个平台
        Rect()
          .width(80)
          .height(20)
          .fill(Color.Red)
          .position({ x: this.gameModel.nextPosition, y: 400 });
        
        // 玩家角色
        Circle()
          .width(30)
          .height(30)
          .fill(Color.Green)
          .position({ 
            x: 100 + this.gameModel.currentPosition,
            y: this.gameModel.isJumping ? 370 - this.power : 370 
          });
      }
      .width('100%')
      .height(500)
      .border({ width: 1, color: Color.Black })
      
      // 控制区域
      Button(this.isCharging ? '释放跳跃' : '按住蓄力')
        .width('80%')
        .height(60)
        .margin({ top: 20 })
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.isCharging = true;
            const interval = setInterval(() => {
              if (this.power < 100) {
                this.power += 2;
              } else {
                clearInterval(interval);
              }
            }, 50);
          } else if (event.type === TouchType.Up) {
            this.isCharging = false;
            this.gameModel.jump(this.power);
            this.power = 0;
          }
        });
      
      // 力量条
      Progress({ value: this.power, total: 100 })
        .width('80%')
        .margin({ top: 10 });
    }
    .width('100%')
    .height('100%')
    .onAppear(() => {
      this.gameModel.initGame();
    });
  }
}

Index.ets - 主页面

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('开始游戏')
        .width(200)
        .height(60)
        .onClick(() => {
          router.push({
            url: 'pages/GamePage'
          });
        });
      
      Button('游戏说明')
        .width(200)
        .height(60)
        .margin({ top: 20 })
        .onClick(() => {
          prompt.showToast({
            message: '按住按钮蓄力，释放跳跃到下一个平台'
          });
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

3. 游戏功能说明

游戏机制：
- 玩家通过长按按钮蓄力，释放后角色跳跃
- 需要准确跳到下一个平台才能得分
- 跳跃距离由蓄力时间决定
实现要点：
- 使用position属性实现角色和平台的定位
- 通过TouchEvent监听触摸事件实现蓄力控制
- 使用setInterval实现蓄力条增长
- 游戏逻辑与UI分离，便于维护
扩展建议：
- 添加更多平台类型和障碍物
- 实现角色跳跃动画
- 添加音效和背景音乐
- 实现游戏存档和排行榜功能