SUI Battle Arena

SUI Battle Arena 是一款基于 SUI 区块链的 AI 对战游戏。玩家可以连接自己的 SUI 钱包，参与游戏，并体验基于区块链技术的独特游戏机制。

✨ 功能特性

• SUI 钱包集成:
  • 使用 @mysten/dapp-kit 连接和断开 SUI 钱包。
  • 查询并显示账户的 SUI 余额。
• 游戏预览:
  • 一个动态的 Canvas 画布，用于展示游戏中的细胞（玩家、AI、资源）的实时动画效果。
  • 细胞会在竞技场内移动、碰撞边界并反弹。
• 复活机制:
  • 玩家在游戏中被“吞噬”后，可以选择消耗少量 SUI 来复活。
  • 组件处理复活逻辑和 UI 展示。
• 投注系统 (概念):
  • 中包含投注逻辑的初步实现。
  • 目前投注信息记录在前端，并提示未来可以集成 SUI 区块链交易。
• 响应式设计:
  • 游戏预览画布和部分 UI 元素会根据浏览器窗口大小进行调整。

🛠️ 技术栈

• 前端框架: React
• 语言: TypeScript
• 构建工具: Vite
• SUI DApp 开发: @mysten/dapp-kit
• 状态管理: React Context API (例如 , )
• 样式: Tailwind CSS
• 图标: Lucide React
• 路由: React Router DOM

🚀 快速开始

1. 克隆仓库 (如果适用)

   git clone <repository-url>
   cd project

2. 安装依赖 推荐使用 npm。请确保您的开发环境中已安装 Node.js 和 npm。

   npm install

3. 运行开发服务器 此命令会启动 Vite 开发服务器，通常在 http://localhost:5173 (具体端口请查看终端输出)。

   npm run dev

4. 浏览器插件 为了与 SUI 区块链交互，请确保您的浏览器安装了兼容的 SUI 钱包插件 (例如 Sui Wallet, Suiet Wallet)。

📜 可用脚本

在项目目录中，您可以运行以下脚本 (定义于 ):

• npm run dev: 启动开发服务器。

• npm run build: 将项目构建为生产环境的静态文件，输出到 dist 目录。

• npm run lint: 使用 ESLint 检查代码规范。

• npm run preview: 在本地预览生产构建的成果。

🔑 核心组件与上下文

• :

  • WalletProvider: 包裹应用的组件，提供钱包相关的状态和操作。
  • : Hook，用于在组件中访问钱包状态 (连接状态、地址、余额) 和方法 (连接、断开)。

• :

  • 一个 React 函数组件，使用 <canvas> 元素渲染游戏世界的动态预览。
  • Hook 用于初始化画布、创建游戏细胞 () 并启动动画循环 ()。

• :

  • 当玩家需要复活时显示的模态框。
  • 组件接收 和 回调函数。
  • 它会检查用户的 SUI 余额是否足够支付复活费用。

💡 未来展望

• 完整的区块链集成: 将 中的投注逻辑与 SUI 智能合约交互。
• 游戏逻辑上链: 将核心游戏逻辑（如细胞状态、战斗结果）迁移到 SUI 智能合约，实现真正的去中心化游戏。
• AI 行为增强: 提升 中 AI 细胞的行为逻辑。
• 排行榜: 实现基于玩家表现的排行榜系统。
• NFT 集成: 引入 NFT 作为游戏内资产或角色。
• 更丰富的游戏模式: 探索并添加新的游戏玩法和挑战。