他凌晨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) 这行代码表示各占百分之五十空间。

go 复制代码
// 历史记录区域布局 & 排行榜区域布局
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。

go 复制代码
// 创建消息打印器结构体
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。
go 复制代码
// 接收历史数据,并换行
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. 对应的数据结构和数据处理方法:
go 复制代码
// 创建消息打印器结构体
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。

相关推荐
Footprint_Analytics9 分钟前
2024 年 8 月公链行业研报:Layer 1、比特币 Layer 2 和以太坊 Layer 2 趋势分析
游戏·web3·区块链
这是我5836 分钟前
C++黑暗迷宫
c++·其他·游戏·visual studio·随机·迷宫·黑暗
多多*38 分钟前
OJ在线评测系统 前端开发整合开源组件 Monaco Editor 并且开发创建题目页面
服务器·前端·javascript·数据库·算法·开源
乐思智能科技有限公司2 小时前
C语言编写一个五子棋游戏-代码实例讲解与分析
c语言·开发语言·嵌入式硬件·算法·游戏
奶香滴小馒头4 小时前
Day101 代码随想录打卡|动态规划篇--- 分割等和子集
数据结构·算法·leetcode·游戏·动态规划
充值内卷4 小时前
WPF入门教学二十二 多线程与异步编程
windows·ui·wpf
Thomas_YXQ9 小时前
Unity3D PostLateUpdate为何突然占用大量时间详解
开发语言·数码相机·游戏·unity·架构·unity3d
DisonTangor9 小时前
清华大学开源 CogVideoX-5B-I2V 模型,以支持图生视频
开源·音视频
向宇it9 小时前
【unity进阶知识1】最详细的单例模式的设计和应用,继承和不继承MonoBehaviour的单例模式,及泛型单例基类的编写
游戏·unity·单例模式·设计模式·游戏引擎·框架
Thomas_YXQ10 小时前
Unity3D 中构建行为树插件详解
游戏·unity·架构·unity3d·游戏开发