跳至主要內容

8. 游戏界面

EVOCOSMOS2026/4/14大约 8 分钟

8. 俄罗斯方块——游戏界面

8.1 游戏界面是什么？

想象你走进一家餐厅：菜单告诉你有什么菜（主菜单），服务员告诉你今天的特色（HUD），如果需要等位会给你一个号码牌（暂停），吃完后服务员递上账单（游戏结束画面）。

游戏界面（UI）就是玩家和游戏之间的"沟通桥梁"——告诉玩家当前状态、提供操作选项、展示游戏结果。

8.2 界面整体布局

俄罗斯方块的标准界面布局如下：

┌──────────────────────────────────────────┐
│                 俄罗斯方块                │
├──────────────────────────────────────────┤
│ ┌──────┐ ┌──────────┐ ┌──────┐          │
│ │ HOLD │ │          │ │ NEXT │          │
│ │      │ │  10 x 20 │ │ ■    │          │
│ │      │ │  游戏区域 │ │ ■■   │          │
│ ├──────┤ │          │ │  ■   │          │
│ │ 分数 │ │          │ ├──────┤          │
│ │ 1200 │ │          │ │ 等级 │          │
│ ├──────┤ │          │ │  3   │          │
│ │ 等级 │ │          │ ├──────┤          │
│ │  3   │ │          │ │ 消行 │          │
│ ├──────┤ │          │ │  25  │          │
│ │ 消行 │ │          │ └──────┘          │
│ │  25  │ │          │                   │
│ └──────┘ └──────────┘                   │
│         [暂停] [操作说明]                 │
└──────────────────────────────────────────┘

8.3 HUD（游戏内信息显示）

HUD（Heads-Up Display）是游戏进行时始终显示在屏幕上的信息，包括分数、等级、消行数等。

C
using Godot;

/// <summary>
/// HUD——游戏进行时的信息显示
/// </summary>
public partial class HUD : CanvasLayer
{
    // 分数相关
    private Label _scoreLabel;
    private Label _highScoreLabel;
    private int _displayedScore = 0;

    // 等级相关
    private Label _levelLabel;

    // 消行相关
    private Label _linesLabel;

    // Combo显示
    private Label _comboLabel;
    private float _comboHideTimer = 0f;

    public override void _Ready()
    {
        _scoreLabel = GetNode<Label>("ScorePanel/ScoreValue");
        _highScoreLabel = GetNode<Label>("ScorePanel/HighScoreValue");
        _levelLabel = GetNode<Label>("LevelPanel/LevelValue");
        _linesLabel = GetNode<Label>("LinesPanel/LinesValue");
        _comboLabel = GetNode<Label>("ComboDisplay");

        // 连接信号
        GameManager.Instance.ScoreChanged += OnScoreChanged;
        GameManager.Instance.LevelChanged += OnLevelChanged;
        GameManager.Instance.LinesCleared += OnLinesCleared;

        // 加载最高分
        int highScore = SaveSystem.LoadHighScore();
        _highScoreLabel.Text = highScore.ToString();
    }

    public override void _Process(double delta)
    {
        // 分数滚动动画（数字平滑递增）
        if (_displayedScore < GameManager.Instance.Score)
        {
            int diff = GameManager.Instance.Score - _displayedScore;
            int step = Mathf.Max(1, diff / 10);
            _displayedScore = Mathf.Min(_displayedScore + step, GameManager.Instance.Score);
            _scoreLabel.Text = _displayedScore.ToString("N0");
        }

        // Combo显示计时
        if (_comboHideTimer > 0)
        {
            _comboHideTimer -= (float)delta;
            if (_comboHideTimer <= 0)
            {
                _comboLabel.Visible = false;
            }
        }
    }

    private void OnScoreChanged(int newScore)
    {
        // 触发滚动动画（在_Process中执行）
    }

    private void OnLevelChanged(int newLevel)
    {
        _levelLabel.Text = newLevel.ToString();
        // 等级变化的缩放动画
        _AnimateLabel(_levelLabel);
    }

    private void OnLinesCleared(int lines)
    {
        _linesLabel.Text = GameManager.Instance.TotalLinesCleared.ToString();
    }

    /// <summary>
    /// 显示Combo信息
    /// </summary>
    public void ShowCombo(int comboCount)
    {
        if (comboCount <= 1) return;

        _comboLabel.Text = $"{comboCount} COMBO!";
        _comboLabel.Visible = true;
        _comboHideTimer = 2.0f;

        // 缩放动画
        var tween = CreateTween();
        tween.TweenProperty(_comboLabel, "scale",
            new Vector2(1.5f, 1.5f), 0.1f);
        tween.TweenProperty(_comboLabel, "scale",
            Vector2.One, 0.2f);
    }

    private void _AnimateLabel(Control label)
    {
        var tween = CreateTween();
        tween.TweenProperty(label, "scale",
            new Vector2(1.3f, 1.3f), 0.1f);
        tween.TweenProperty(label, "scale",
            Vector2.One, 0.2f);
    }
}

8.4 暂停菜单

暂停菜单在玩家按ESC或P键时弹出，提供"继续游戏"和"返回主菜单"选项。

C
using Godot;

/// <summary>
/// 暂停菜单
/// </summary>
public partial class PauseMenu : CanvasLayer
{
    private PanelContainer _panel;
    private Button _resumeButton;
    private Button _restartButton;
    private Button _quitButton;
    private Label _titleLabel;

    public override void _Ready()
    {
        _panel = GetNode<PanelContainer>("Panel");
        _titleLabel = GetNode<Label>("Panel/VBox/Title");
        _resumeButton = GetNode<Button>("Panel/VBox/ResumeButton");
        _restartButton = GetNode<Button>("Panel/VBox/RestartButton");
        _quitButton = GetNode<Button>("Panel/VBox/QuitButton");

        // 连接按钮信号
        _resumeButton.Pressed += OnResumePressed;
        _restartButton.Pressed += OnRestartPressed;
        _quitButton.Pressed += OnQuitPressed;

        // 默认隐藏
        Visible = false;

        // 监听游戏状态变化
        GameManager.Instance.StateChanged += OnStateChanged;
    }

    private void OnStateChanged(int newState)
    {
        var state = (GameManager.GameState)newState;
        Visible = (state == GameManager.GameState.Paused);

        if (Visible)
        {
            _resumeButton.GrabFocus();
        }
    }

    private void OnResumePressed()
    {
        GameManager.Instance.TogglePause();
    }

    private void OnRestartPressed()
    {
        GameManager.Instance.TogglePause();
        GameManager.Instance.StartGame();
        GetTree().ReloadCurrentScene();
    }

    private void OnQuitPressed()
    {
        GameManager.Instance.ReturnToMenu();
        GetTree().ChangeSceneToFile("res://scenes/ui/main_menu.tscn");
    }
}

8.5 游戏结束画面

游戏结束时显示最终成绩、最高分和操作选项。

C
using Godot;

/// <summary>
/// 游戏结束画面
/// </summary>
public partial class GameOverScreen : CanvasLayer
{
    private PanelContainer _panel;
    private Label _titleLabel;
    private Label _finalScoreLabel;
    private Label _highScoreLabel;
    private Label _newRecordLabel;
    private Button _retryButton;
    private Button _menuButton;

    private bool _isNewRecord = false;

    public override void _Ready()
    {
        _panel = GetNode<PanelContainer>("Panel");
        _titleLabel = GetNode<Label>("Panel/VBox/Title");
        _finalScoreLabel = GetNode<Label>("Panel/VBox/ScoreValue");
        _highScoreLabel = GetNode<Label>("Panel/VBox/HighScoreValue");
        _newRecordLabel = GetNode<Label>("Panel/VBox/NewRecord");
        _retryButton = GetNode<Button>("Panel/VBox/RetryButton");
        _menuButton = GetNode<Button>("Panel/VBox/MenuButton");

        _retryButton.Pressed += OnRetryPressed;
        _menuButton.Pressed += OnMenuPressed;

        Visible = false;
        _newRecordLabel.Visible = false;

        GameManager.Instance.StateChanged += OnStateChanged;
    }

    private void OnStateChanged(int newState)
    {
        var state = (GameManager.GameState)newState;

        if (state == GameManager.GameState.GameOver)
        {
            ShowGameOver();
        }
        else
        {
            Visible = false;
        }
    }

    /// <summary>
    /// 显示游戏结束画面
    /// </summary>
    private void ShowGameOver()
    {
        Visible = true;
        int score = GameManager.Instance.Score;

        // 显示最终分数
        _finalScoreLabel.Text = score.ToString("N0");

        // 检查是否刷新最高分
        int highScore = SaveSystem.LoadHighScore();
        _isNewRecord = score > highScore;

        if (_isNewRecord)
        {
            SaveSystem.SaveHighScore(score);
            highScore = score;
            _newRecordLabel.Visible = true;
            _titleLabel.Text = "新纪录！";

            // 新纪录闪烁动画
            var tween = CreateTween();
            tween.SetLoops();
            tween.TweenProperty(_newRecordLabel, "modulate:a", 0.3f, 0.5f);
            tween.TweenProperty(_newRecordLabel, "modulate:a", 1.0f, 0.5f);
        }
        else
        {
            _newRecordLabel.Visible = false;
            _titleLabel.Text = "游戏结束";
        }

        _highScoreLabel.Text = highScore.ToString("N0");

        // 入场动画
        _panel.Scale = new Vector2(0.8f, 0.8f);
        _panel.Modulate = new Color(1, 1, 1, 0);
        var animTween = CreateTween();
        animTween.TweenProperty(_panel, "scale",
            Vector2.One, 0.3f).SetTrans(Tween.TransitionType.Back);
        animTween.Parallel().TweenProperty(_panel, "modulate:a",
            1.0f, 0.3f);

        _retryButton.GrabFocus();
    }

    private void OnRetryPressed()
    {
        GameManager.Instance.StartGame();
        GetTree().ReloadCurrentScene();
    }

    private void OnMenuPressed()
    {
        GameManager.Instance.ReturnToMenu();
        GetTree().ChangeSceneToFile("res://scenes/ui/main_menu.tscn");
    }
}

8.6 主菜单

主菜单是游戏的"门面"——玩家启动游戏后第一个看到的画面。

C
using Godot;

/// <summary>
/// 主菜单
/// </summary>
public partial class MainMenu : CanvasLayer
{
    private Button _startButton;
    private Button _settingsButton;
    private Button _quitButton;
    private Label _titleLabel;
    private Label _versionLabel;

    public override void _Ready()
    {
        _startButton = GetNode<Button>("Panel/VBox/StartButton");
        _settingsButton = GetNode<Button>("Panel/VBox/SettingsButton");
        _quitButton = GetNode<Button>("Panel/VBox/QuitButton");
        _titleLabel = GetNode<Label>("Panel/VBox/Title");
        _versionLabel = GetNode<Label>("Panel/Version");

        _startButton.Pressed += OnStartPressed;
        _settingsButton.Pressed += OnSettingsPressed;
        _quitButton.Pressed += OnQuitPressed;

        _versionLabel.Text = "v1.0.0";

        // 默认焦点在"开始游戏"按钮上
        _startButton.GrabFocus();

        // 标题呼吸动画
        var tween = CreateTween().SetLoops();
        tween.TweenProperty(_titleLabel, "modulate:a", 0.7f, 2.0f);
        tween.TweenProperty(_titleLabel, "modulate:a", 1.0f, 2.0f);
    }

    private void OnStartPressed()
    {
        GameManager.Instance.StartGame();
        GetTree().ChangeSceneToFile("res://scenes/main.tscn");
    }

    private void OnSettingsPressed()
    {
        // 打开设置界面（后续章节实现）
        GD.Print("打开设置");
    }

    private void OnQuitPressed()
    {
        GetTree().Quit();
    }
}

8.7 UI主题与样式

为了让游戏界面看起来更专业，我们使用Godot的Theme（主题）系统来统一样式。

C
// 使用代码创建简单的主题资源
// （实际项目中建议在编辑器中创建.tres主题文件）

public partial class GameTheme : Node
{
    /// <summary>
    /// 创建并返回游戏UI主题
    /// </summary>
    public static Theme CreateTheme()
    {
        var theme = new Theme();

        // 默认字体
        var font = new FontFile(); // 加载字体文件
        // font.Load("res://assets/fonts/main_font.ttf");

        // 标题样式
        var titleStyle = new StyleBoxFlat();
        titleStyle.BgColor = new Color(0.1f, 0.1f, 0.2f, 0.9f);
        titleStyle.BorderColor = new Color(0.3f, 0.3f, 0.5f);
        titleStyle.BorderWidthTop = 2;
        titleStyle.BorderWidthBottom = 2;
        titleStyle.SetCornerRadiusAll(8);

        // 按钮样式
        var buttonNormal = new StyleBoxFlat();
        buttonNormal.BgColor = new Color(0.2f, 0.3f, 0.5f, 0.9f);
        buttonNormal.SetCornerRadiusAll(4);

        var buttonHover = new StyleBoxFlat();
        buttonHover.BgColor = new Color(0.3f, 0.4f, 0.6f, 0.9f);
        buttonHover.SetCornerRadiusAll(4);

        var buttonPressed = new StyleBoxFlat();
        buttonPressed.BgColor = new Color(0.15f, 0.25f, 0.45f, 0.9f);
        buttonPressed.SetCornerRadiusAll(4);

        // 设置主题
        theme.SetStylebox("panel", "PanelContainer", titleStyle);
        theme.SetStylebox("normal", "Button", buttonNormal);
        theme.SetStylebox("hover", "Button", buttonHover);
        theme.SetStylebox("pressed", "Button", buttonPressed);

        return theme;
    }
}

8.8 操作说明界面

一个好的游戏应该让玩家随时能查看操作说明。

按键功能
← →左右移动
↑ / X顺时针旋转
Z逆时针旋转
↓软降（加速下落）
空格硬降（直接落到底）
C暂存方块
P / ESC暂停游戏

8.9 本章小结

界面组件说明
HUD显示分数、等级、消行数，带滚动和缩放动画
暂停菜单继续游戏、重新开始、返回菜单
游戏结束画面最终分数、最高分、新纪录提示
主菜单开始游戏、设置、退出
UI主题统一的视觉风格
操作说明按键映射说明

关键设计点：

  • 分数变化时有滚动动画，让玩家感受到分数在涨
  • 等级变化时有缩放动画，吸引注意力
  • 新纪录时有闪烁效果，增强成就感
  • 所有菜单按钮支持键盘焦点导航

下一章我们将添加音效和特效，让游戏更有感觉。

最近更新:
贡献者: zefeng.peng,bobokaka
EVOCOSMOS
Copyright © 2026 EVOCOSMOS