Building an H5 Platformer Game with Alice.js and React

In this article the author demonstrates how to develop a simple 2D platform‑jumping game using the custom H5 game engine Alice.js, which combines the React ecosystem with WebGL rendering. The tutorial walks through scene construction, component organization, camera control, UI integration, element types, animation, layout, scripting, and debugging.

Scene Construction

The game scene is built as a hierarchy of React components. The background, the penguin hero, and the ice bricks are each defined as functional components that return JSX elements such as <View> , <Image> , and <Box> . The complete scene graph looks like:

const Background = () => (
);

const PenguinHero = () => (
);

const IceBricks = () => (
{array.map(() =>
)}
);

const Scene = () => (
);

Scene Rendering and Camera Control

Switching between scenes (main menu, gameplay, result) is handled with a simple state machine, similar to standard React routing:

function Game() {
  const [currentScene, setCurrentScene] = useState(SCENE.MAIN_MENU);

  if (currentScene === SCENE.GAMEPLAY) {
    return
;
  }
  if (currentScene === SCENE.RESULT) {
    return
;
  }
  return
;
}

For a side‑scrolling effect the whole game view is wrapped in a <CameraView follow={penguinRef}> component, which automatically follows the penguin’s position.

<CameraView follow={penguinRef}>
  {/* penguin stays centered */}
{/* other map elements */}
</CameraView>

Combining Canvas and Native DOM UI

Static UI elements such as HUDs can be written with normal React DOM components and layered above the canvas:

<div id="root">
  {/* HUD */}
Write any HTML here
{/* Canvas */}
Inside game we are canvas elements!
</div>

Note that DOM elements must be placed on top of the canvas due to rendering order constraints.

Element Types

Alice.js provides a set of primitive elements that map directly to PixiJS objects, such as Box , View , Image , Text , Graphics , Mask , and NinePatch . These can be used with normal React patterns like loops and conditional rendering.

Animation Elements

The engine supports various animation formats: frame sequences, APNG, Lottie, video, alpha‑video, skeletal animations (Spine, DragonBones), and keyframe‑based transitions. A comparison table of visual fidelity, file size, JS bundle impact, memory usage, and performance is provided in the original article.

Example of swapping a static penguin image for a sprite‑sheet animation:

-
+
console.log('播放完成')}
+  style={{ scale: 0.5, anchor: 0.5 }}
+/>
+
+aniRef.current.play()
+aniRef.current.stop()
+aniRef.current.currentFrame
+aniRef.current.totalFrames

CSS‑Like Styling and Flex Layout

Most CSS properties are translated to PixiJS attributes (e.g., font-size → PIXI.Text#style.fontSize , opacity → PIXI.DisplayObject#alpha ). The engine also integrates the Yoga layout engine, enabling Flexbox‑style layout for game elements:

<View
  name="OuterView"
  style={{
    width: 500,
    height: 500,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'center',
    padding: 50,
  }}
>
  {/* Profile card */}
  <View name="ProfileCard" style={{ width: 300, height: 80, marginBottom: 30, flexDirection: 'row' }}>
    <View style={{ width: 80, height: 80, backgroundImage: 'assets/avatar.png' }} />
    <View style={{ justifyContent: 'space-around', padding: '10 0 10', marginLeft: 20 }}>
      <Text style={{ fontSize: 20, color: '#0f172a' }}>Lorem Ipsum</Text>
      <Text style={{ fontSize: 16, color: '#64748b' }}>Alice in Wonderland</Text>
    </View>
  </View>
  {/* Content grid */}
  <View name="Content" style={{ flexWrap: 'wrap', flexDirection: 'row' }}>
    {Array(14).fill(0).map((_, index) => (
))}
  </View>
</View>

Keyframe Animation

Keyframe animations are defined with a hook similar to CSS @keyframes . The following example creates a jump animation that rotates and moves the penguin:

const { play } = useAliceTransition(penguinRef, {
  jump: {
    0: { position: [0, 120], rotation: 0, tween: 'linear' },
    300: { position: [40, 40], rotation: 180, tween: 'linear' },
    600: { position: [80, 120], rotation: 360 },
  },
});

// Trigger on click
onClick={() => play('jump')}

Custom parameters allow different jump distances and heights for one‑step and two‑step jumps.

Scripting and Events

Game logic is written using React hooks. Input events (click, pointerup, pointerdown, pointermove) are handled just like in a normal React app. The main scene component manages score, game state, map generation, and the jump logic:

const Scene = () => {
  const [score, setScore] = useState(0);
  const [gameResult, setGameResult] = useState('ready');
  const [currentPos, setCurrentPos] = useState(0);
  const [map, setMap] = useState([]);

  const { play } = useAliceTransition(/* ... */);

  const jump = useCallback((steps) => {
    if (gameResult !== 'playing') return;
    if (lockRef.current) return;
    lockRef.current = true;
    if (steps === 1) {
      play('jump', 1, { /* ... */ });
    } else {
      play('rotate');
      play('jump', 1, { /* ... */ });
    }
  }, [gameResult, play]);

  return (
    <>
      {/* Game scene */}
{/* Touch panel */}
jump(1)} />
jump(2)} />
);
};

Debugging

Because the rendering layer is built on PixiJS/WebGL, standard tools such as Browser DevTools, React DevTools, pixi‑inspector, and Spector.js can be used to inspect component trees, element hierarchies, shader calls, draw calls, and performance metrics.

Conclusion

The tutorial shows that building H5 games with React‑based Alice.js feels very similar to ordinary React development while providing high‑performance canvas/WebGL rendering. It highlights benefits such as low learning cost, easy integration with existing React projects, and the ability to reuse UI component libraries. Future articles will cover performance optimization, resource management, scene splitting, and more advanced rendering techniques.