remix-game-creation

游戏创建工作流

概述

该技能引导你在 Remix 平台上创建一款新的 HTML 游戏。

前提条件

必须设置 REMIX_API_KEY 环境变量。

约束

游戏必须采用 2:3 宽高比（例如 720x1080）。

必须在上述比例下填满整个视口——在游戏容器上使用 width: 100vw; height: 100vh。不能出现滚动条，不能溢出。

游戏必须支持触摸控制作为主要输入方式（Remix 平台主要基于移动端/触摸）。键盘和鼠标控制可选。

步骤

1. 规划游戏

确定游戏概念、机制和视觉风格。保持范围小巧——单文件 HTML 游戏应能在 30 秒内玩起来。

1. 编写 HTML

创建一个内联 <style> 和 <script> 标签的单个 HTML 文件。结构：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Game Title</title> <script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script> <style> /* Game styles can go here */ </style> </head> <body> <!-- Game markup can go here --> <script> // Game logic here </script> </body> </html>

必需的 RemixSDK 函数

window.RemixSDK.singlePlayer.actions.gameOver({ score }) —— 游戏结束时调用，以 { score: number } 传递玩家最终分数。这会向平台报告分数。

window.RemixSDK.onPlayAgain(callback) —— 注册一个回调（无参数），当玩家请求再次游玩时触发。回调应重置游戏状态并重新开始游戏。

window.RemixSDK.onToggleMute(callback) —— 注册一个回调，接收 { isMuted: boolean }。游戏必须根据 isMuted 值静音或取消静音所有音频。

1. 验证

上传前，读取 HTML 文件并验证：

包含 <!DOCTYPE html> 声明

包含 <meta name="viewport" ...> 标签

包含 RemixSDK 脚本标签：<script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>

没有旧的 @farcade/game-sdk 脚本标签

调用 singlePlayer.actions.gameOver( 或 multiplayer.actions.gameOver( （不能同时调用）

注册 .onPlayAgain( 回调

注册 .onToggleMute( 回调

没有 localStorage 或 sessionStorage 使用

没有内联事件处理器（onclick=、onload= 等）

继续之前修复任何问题。

1. 上传游戏

遵循上传游戏工作流，在 Remix 平台上创建游戏并部署你的 HTML 代码。

提示

使用 requestAnimationFrame 实现游戏循环，而不是 setInterval。

触摸控制是必需的（主要输入）；键盘/鼠标是可选附加项。

保持总 HTML 在 100KB 以下以便快速加载。