他凌晨1:30给我开源的游戏加了UI｜模拟龙生，挂机冒险

一、前言

新年就要到了，祝大家新的一年：🐲 龙行龘龘，🔥 前程朤朤！

白泽花了点时间，用 800 行 Go 代码写了一个控制台的小游戏：《模拟龙生》，在游戏中你将模拟一条新生的巨龙，开始无尽的冒险！

3天前的《🐲模拟龙生｜500行Go代码写一个随机冒险游戏｜巨龙修为挑战》文章中已经对核心玩法和游戏核心架构做了介绍，但是第一版实在是写得匆忙，编码不够优雅。

🌟幸得热心同学提了 pr 优化了部分代码逻辑，甚至凌晨1:30给游戏加了 UI，在这个基础上，白泽也为游戏增加了排行榜功能，这篇文章讲解一下相比3天前，《模拟龙生》的一些架构上的变化以及玩法的更新。

🌟 游戏更新主要包含：

• 使用 termdash（基于终端窗口的跨平台仪表盘）作为 UI。

• 架构升级，使用 channel 传递游戏内所有 IO 内容，面向协程编程。

• 增加排行榜玩法。

公众号 「白泽talk」，我也开源了一个 Go 学习仓库：包含我写作的 Go 各阶段学习文章、读书笔记、电子书、简历模板等，欢迎 star。

白泽目前正在打造一个氛围良好的行业交流群（游戏交流群），文章的更新也会提前预告，欢迎加入：622383022。

二、核心玩法

• 玩法流程：

具体参详前一篇文章，后续也会尽快在仓库的 README 部分更新新增内容玩法手册。

游戏核心玩法：挂机、打怪、冒险、修炼。

• 游玩体验（gif）：
  1. 分配100点能力值，并进行x轮冒险，这里我输入100。
  2. 选择2开始冒险，进行50轮，但冒险中第41轮意外死亡，丢失9轮冒险次数。
  3. 选择1返回修养，进行10轮，恢复生命值和提升修为。
  4. 选择2开始冒险，进行40轮，最后获得修为2093进入排行榜第三名。

三、更新内容

3.1 termdash 构建 UI

Termdash 是一款基于终端的跨平台定制仪表盘。只要将需要展示的消息，发送给 termdash 库负责 UI 展示的结构体，则可以将其以仪表盘的形式，动态展示更新。

《模拟龙生》将游戏 UI 区域分成历史记录区、排行榜区、数值区、操作提示区、输入区。

界面布局

termdash 的界面布局与 HTML 的 div 布局有些相似，通过 container 将区域进行分割，可以水平分割也可以垂直分割，下面这段代码就是 dragon 游戏当中，历史记录区域与排行榜区域布局。

container.SplitPercent(50) 这行代码表示各占百分之五十空间。

// 历史记录区域布局 & 排行榜区域布局
container.Right(
   container.SplitVertical(
      container.Left(
         container.PlaceWidget(historyPanel),
         container.BorderTitle(HistoryAreaBorderTitle),
         container.Border(HistoryAreaBorderStyle),
         container.BorderColor(HistoryAreaBorderColor),
         container.KeyFocusSkip(),
      ),
      container.Right(
         container.PlaceWidget(rankPanel),
         container.BorderTitle(RankAreaBorderTitle),
         container.Border(RankAreaBorderStyle),
         container.BorderColor(RankAreaBorderColor),
         container.KeyFocusSkip(),
      ),
      container.SplitPercent(50),
   ),
),

3.2 使用 channel 传递消息

整个游戏的左下角是用户唯一的输入区域，通过捕获用户的输入，触发相遇的游戏逻辑之后，通过 channel 将数据发送到对应的 container 区域进行展示。

每一个游戏区域，在 printer 结构体中，都有对应的属性字段，比如 historyText 字段对应着“龙生经历”区域，而每一个区域也都有对应的一个channel 用于接收消息，如 history 就是用于接收龙生经历的 channel。

// 创建消息打印器结构体
p := &printer{
   terminal:        terminal,
   ctx:             ctx,
   container:       c,
   // 历史记录消息接收
   history:         make(chan historyInfo),
   // 历史记录区域 UI
   historyText:     historyPanel,
   rank:            make(chan rankInfo),
   rankText:        rankPanel,
   operateHintText: operationHint,
   operateHint:     make(chan string),
   scanned:         make(chan string),
   flushChannel:    make(chan struct{}),
   values:          values,
   experienceBar:   experience,
   hpBar:           hpBar,
   keyBinding: func(k *terminalapi.Keyboard) {
      // Ctrl + W 退出
      if k.Key == keyboard.KeyCtrlW {
         cancel()
         os.Exit(0)
      }

      // Enter 完成输入
      if k.Key == keyboard.KeyEnter {
         value := inputs.ReadAndClear()
         p.scanned <- value
      }
   },
}
// 更新数值面板区域
go p.updateValuesPanel()
// 接收并打印龙的经历到历史经历区域
go p.receiveHistory()
// 接收并打印操作提示语区域
go p.receiveOperateHint()
// 接收并打印信息到排行榜区域
go p.receiveRank()

只有先从 channel 中获取到了消息，才能将消息在对应 UI 区域展示。以龙的冒险为例，如果龙正在参与冒险，则每过0.5秒会在龙生经历（历史记录）区域打印一条记录，如：剩余寿命 xxx 轮，你打败了 xxx，修为增加 xxx。

而UI 上的内容展示与程序执行关系如下：

1. 提前启动 go 协程监听 history 这个 channel，获取要打印到 UI 区域的龙的经历。（调用的是 p.receiveHistory()）。
2. 每隔0.5秒处理业务，将需要打印的信息发送给 p.history 这个 channel。

// 接收历史数据，并换行
func (p *printer) addHistoryLn(info historyInfo) {
	info.info += "\n"
	p.history <- info
}

// 接收历史数据处理方法
func (p *printer) receiveHistory() {
   go func() {
      for {
         select {
         case info := <-p.history:
            p.historyText.Write(info.info, info.options...)
         }
      }
   }()
}

游戏中所有 UI 区域的内容都是通过最终调用 p.xxx.Write() 方法输出到 UI 仪表盘上的，而诸如 historyText 这个属性对应的数据类型，都是 termdash 库所提供的。

3.3 排行榜玩法

在游戏开始之初会打印之前历史记录中，最终获得经验值最高的10条记录，降序排列。并在游戏正常结束（非 CTRL + W 形式结束）后，如果进入前十，则更新榜单。

排行榜的实现：

1. 以 sqlite3 作为数据库，对应 rank.db 文件，运行程序时如果不存在则会自动创建。
2. 对应的数据结构和数据处理方法：

// 创建消息打印器结构体
p := &printer{
   // rank 数据接收 channel
   rank:            make(chan rankInfo),
   // rank UI 区域
   rankText:        rankPanel,
}
// 接收并打印信息到排行榜区域
go p.receiveRank()

// 接收排行榜数据，并换行
func (p *printer) addRankLn(info rankInfo) {
	info.info += "\n"
	p.rank <- info
}

// 展示排行榜
func showRank(ranks []*Rank, rank *Rank) {
	p.rankText.Reset()
	for i, r := range ranks {
		s := fmt.Sprintf("第%v名，龙的ID：%v，名称：%v，经验值：%v，攻击力：%v，防御力：%v，生命值：%v", i+1, r.DragonID, r.Name, r.Experience, r.Attack, r.Defense, r.Life)
		if r.equal(rank) {
			s = "👑" + s
		}
		s = s + "\n"
		p.addRankLn(newRankInfo(s))
	}
}

四、小结

🌟 下一阶段的打算：

• 趣味性：优化 NPC 和随机事件的内容。

• 功能性：待定

欢迎评论对《模拟龙生》游玩的体验，有好的想法也可以一起交流，当然也欢迎多多 pr。