remix-save-game

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Integrate Save Game State Workflow

集成游戏状态保存工作流

Overview

概述

This skill guides you through integrating save game state into an HTML game on the Remix platform. Save game state lets players persist progress across sessions -- scores, unlocked levels, inventory, and more -- using the RemixSDK.

本技能将指导你在Remix平台上的HTML游戏中集成游戏状态保存功能。游戏状态保存可让玩家跨会话保留进度——包括分数、解锁关卡、物品栏等——借助RemixSDK实现。

Prerequisites

前提条件

The game must include the RemixSDK script tag:

html

<script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>

The game must already be playable (follow the game-creation workflow first if starting from scratch).

游戏必须包含RemixSDK脚本标签：

html

<script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>

游戏必须已可正常游玩（如果从零开始，请先遵循游戏创建工作流）。

Steps

步骤

1. Initialize the SDK

1. 初始化SDK

Call

await window.RemixSDK.ready()

before the game loop starts. This ensures the SDK is loaded and any existing saved state is available.

await window.RemixSDK.ready();

在游戏循环开始之前调用

await window.RemixSDK.ready()

。这可确保SDK已加载，且所有已保存的状态均可用。

await window.RemixSDK.ready();

2. Load Existing State

2. 加载现有状态

Read

window.RemixSDK.gameState

to get previously saved data. It returns

Record<string, unknown> | null | undefined

-- always check for null before using it.

const savedState = window.RemixSDK.gameState;

Use the saved state to restore game progress, or fall back to defaults if the player is starting fresh:

const state = savedState ?? { score: 0, level: 1 };

读取

window.RemixSDK.gameState

以获取之前保存的数据。它会返回

Record<string, unknown> | null | undefined

——使用前务必检查是否为null。

const savedState = window.RemixSDK.gameState;

使用保存的状态恢复游戏进度，如果玩家是首次游玩，则使用默认值：

const state = savedState ?? { score: 0, level: 1 };

3. Save State During Gameplay

3. 游戏过程中保存状态

Call

saveGameState

whenever the player reaches a meaningful checkpoint. The

gameState

value must be a JSON-serializable object.

window.RemixSDK.singlePlayer.actions.saveGameState({
  gameState: { score: player.score, level: player.level },
});

每当玩家到达重要检查点时调用

saveGameState

。

gameState

值必须是可JSON序列化的对象。

window.RemixSDK.singlePlayer.actions.saveGameState({
  gameState: { score: player.score, level: player.level },
});

Examples

示例

Simple Clicker Game

简单点击游戏

html

<script>
  let clicks = 0;

  async function init() {
    await window.RemixSDK.ready();

    // Load
    const gameState = window.RemixSDK.gameState;
    if (gameState && typeof gameState.clicks === "number") {
      clicks = gameState.clicks;
    }

    document.getElementById("count").textContent = clicks;
    document.getElementById("btn").addEventListener("click", () => {
      clicks++;
      document.getElementById("count").textContent = clicks;

      // Save after every click
      window.RemixSDK.singlePlayer.actions.saveGameState({
        gameState: { clicks },
      });
    });
  }

  init();
</script>

html

<script>
  let clicks = 0;

  async function init() {
    await window.RemixSDK.ready();

    // Load
    const gameState = window.RemixSDK.gameState;
    if (gameState && typeof gameState.clicks === "number") {
      clicks = gameState.clicks;
    }

    document.getElementById("count").textContent = clicks;
    document.getElementById("btn").addEventListener("click", () => {
      clicks++;
      document.getElementById("count").textContent = clicks;

      // Save after every click
      window.RemixSDK.singlePlayer.actions.saveGameState({
        gameState: { clicks },
      });
    });
  }

  init();
</script>

Platformer with Level Progression

带关卡进度的平台游戏

html

<script>
  let level = 1;
  let coins = 0;

  async function init() {
    await window.RemixSDK.ready();

    // Load
    const saved = window.RemixSDK.gameState;
    if (saved) {
      level = saved.level ?? 1;
      coins = saved.coins ?? 0;
    }

    startLevel(level);
  }

  function onLevelComplete() {
    level++;
    coins += 10;

    // Save at level transitions
    window.RemixSDK.singlePlayer.actions.saveGameState({
      gameState: { level, coins },
    });

    startLevel(level);
  }

  init();
</script>

html

<script>
  let level = 1;
  let coins = 0;

  async function init() {
    await window.RemixSDK.ready();

    // Load
    const saved = window.RemixSDK.gameState;
    if (saved) {
      level = saved.level ?? 1;
      coins = saved.coins ?? 0;
    }

    startLevel(level);
  }

  function onLevelComplete() {
    level++;
    coins += 10;

    // Save at level transitions
    window.RemixSDK.singlePlayer.actions.saveGameState({
      gameState: { level, coins },
    });

    startLevel(level);
  }

  init();
</script>

Tips

提示

Keep state small. Only save what's needed to restore the session -- avoid storing large arrays or transient UI state.
Save at meaningful moments -- level completion, checkpoints, purchases -- not every frame.
State must be JSON-serializable. No functions, class instances, or circular references.
Always guard against null. The first time a player loads the game there is no saved state.

保持状态精简。仅保存恢复会话所需的内容——避免存储大型数组或临时UI状态。
在重要时刻保存——关卡完成、检查点、购买操作时——不要每帧都保存。
状态必须可JSON序列化。不能包含函数、类实例或循环引用。
始终检查null。玩家首次加载游戏时不会有已保存的状态。