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

时间:2024-01-23 20:55:37

一、前言

新年就要到了,祝大家新的一年:???? 龙行龘龘,???? 前程朤朤!

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

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

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

image-20240121103235404

???? 游戏更新主要包含:

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

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

  • 增加排行榜玩法。

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

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

二、核心玩法

  • 玩法流程:

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

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

image-20240122105816225

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

dragon

三、更新内容

3.1 termdash 构建 UI

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

image-20240122224406409

《模拟龙生》将游戏 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 区域进行展示。

image-20240122214140739

每一个游戏区域,在 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 形式结束)后,如果进入前十,则更新榜单。

image-20240122222415786

排行榜的实现:

  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。