游戏开发 2 第 7 关
12s
🧪 剩 3s
🖥️

用户界面 (UI)

User Interface

🧠 内部数据
👀 外部显示
👀

什么是“用户界面” (UI)?

游戏其实分为两层:

  1. 内部世界 (Logic)
    电脑偷偷记在小本子上的秘密数据(变量、时间)。
  2. 用户界面 (UI)
    玩家眼睛能看到的屏幕显示(血条、倒计时)。
"就像成绩单:数据库里是分数(内部),发下来的纸是成绩单(UI)。"
🖥️ UI 界面
显示:倒计时 3秒
⚙️ 内部逻辑
game.time = 9
spawnTime = 12
🤝

两个好搭档:game 和 ui

1. game (管理员):
负责记录所有数据,比如 game.time (当前时间)。

2. ui (小帮手):
负责把数据贴到屏幕上。

ui.track(game, "time")
# 嘿 ui,请一直盯着 game 的 time 属性,
# 并把它显示出来!
👨‍💼game
➡️ 📄 ➡️
🤖ui

计算剩余时间

玩家不想知道“第12秒生成药水”,他们想知道“还剩几秒?

game.nextPotionIn = game.potionSpawnTime - game.time

终点 - 现在 = 剩余

比如:
下课 (12秒) - 现在 (9秒) = 还剩 (3秒)
0s9s12s
终点 Time: 12
现在 Time: 9
剩 3s
🧠

逻辑计时器 vs UI计时器

这关有4个计时器,分工明确:

3个 逻辑计时器 (隐形):
munchkinTime, throwerTime, potionTime
给电脑用的,决定什么时候刷怪。
1个 UI 计时器 (显示):
nextPotionIn
专门算出来给玩家看的倒计时。
👾 🏹 🧪
(幕后工作)
📺
显示: 3s
⚙️

每一帧更新:updateTimers()

UI 数据不会自己变,我们需要每一帧都重新算一次。

def updateTimers():
  # 逻辑更新...
  # 重新计算剩余时间
  game.nextPotionIn = game.potionTime - game.time

while True:
  updateTimers()

就像老师每秒钟都在黑板上擦掉旧数字,写上新数字。

🔄
Running...
📚

语法点复习

  • 📦 函数 (Function)
    def name(): ... 定义操作步骤。
  • 🏷️ 属性 (Property)
    game.time 用点号访问对象的特征。
  • ⚖️ 比较 (Comparison)
    if time > spawnTime: 判断时间到了没。
  • 差值 (Difference)
    终点 - 现在 用来算倒计时。
🧮
🎓

UI 小故事

Game 是总管,记着所有秘密时间。
UI 是黑板,负责把秘密写出来。
倒计时公式:
"目标时间 - 当前时间 = 还要等多久"
🌟