在 Flutter&Flame 游戏中搭建展示面板和重新开始菜单

2023-12-12 08:56:12

现在让我们来构建展示面板和重新开始菜单。

首先，我们需要在 lib/main.dart 文件中导入必要的库。

import 'package:flutter/material.dart';
import 'package:flame/flame.dart';
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame_bloc/flame_bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'game_bloc.dart';
import 'score_component.dart';
import 'health_component.dart';
import 'restart_menu.dart';

接下来，我们需要在 lib/game_bloc.dart 文件中定义一个 GameBloc 类。这个类将管理游戏的状态，包括分数、生命值和其他重要信息。

class GameBloc extends Bloc<GameEvent, GameState> {
  GameBloc() : super(const GameState());

  @override
  Stream<GameState> mapEventToState(GameEvent event) async* {
    if (event is ScoreEvent) {
      yield state.copyWith(score: state.score + event.score);
    } else if (event is HealthEvent) {
      yield state.copyWith(health: state.health + event.health);
    } else if (event is GameOverEvent) {
      yield state.copyWith(gameOver: true);
    } else if (event is RestartGameEvent) {
      yield const GameState();
    }
  }
}

然后，我们需要在 lib/score_component.dart 文件中定义一个 ScoreComponent 类。这个类将在游戏中显示分数。

class ScoreComponent extends TextComponent {
  ScoreComponent()
      : super(
          text: 'Score: 0',
          textRenderer: TextPaint(
            color: Colors.white,
            fontSize: 20.0,
          ),
        );

  @override
  void update(double dt) {
    text = 'Score: ${BlocProvider.of<GameBloc>(context).state.score}';
    super.update(dt);
  }
}

接下来，我们需要在 lib/health_component.dart 文件中定义一个 HealthComponent 类。这个类将在游戏中显示生命值。

class HealthComponent extends TextComponent {
  HealthComponent()
      : super(
          text: 'Health: 100',
          textRenderer: TextPaint(
            color: Colors.white,
            fontSize: 20.0,
          ),
        );

  @override
  void update(double dt) {
    text = 'Health: ${BlocProvider.of<GameBloc>(context).state.health}';
    super.update(dt);
  }
}

最后，我们需要在 lib/restart_menu.dart 文件中定义一个 RestartMenu 类。这个类将允许玩家在游戏结束时重新开始游戏。

class RestartMenu extends StatelessWidget {
  const RestartMenu({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Game Over',
            style: TextStyle(
              fontSize: 30.0,
              color: Colors.white,
            ),
          ),
          SizedBox(height: 20.0),
          ElevatedButton(
            onPressed: () {
              BlocProvider.of<GameBloc>(context).add(RestartGameEvent());
            },
            child: Text('Restart'),
          ),
        ],
      ),
    );
  }
}

现在，我们需要在 lib/main.dart 文件中构建展示面板和重新开始菜单。

class MyGame extends FlameGame {
  late GameBloc _gameBloc;

  @override
  Future<void> onLoad() async {
    _gameBloc = GameBloc();
  }

  @override
  void update(double dt) {
    super.update(dt);

    if (_gameBloc.state.gameOver) {
      overlays.add(RestartMenu());
    }
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);

    add(ScoreComponent());
    add(HealthComponent());
  }
}