circular_breaker
English | 日本語

Overview
- This is an integrated 3D breakout sample that uses
webg's basic features together, including scene management, collision handling, HUD, and audio - It can be used as a reference implementation for game development patterns such as "reusing multiple
Shapeobjects", "updating nodes", and "reflecting input" - On both desktop and mobile, the canvas follows the full browser viewport
- On tall screens, the FOV is adjusted automatically so the field of view remains usable
- Short status displays during gameplay are gathered into the canvas HUD drawn by
drawHud(), narrowing the on-screen information to what is needed for game progression
How to Run
- Open ./circular_breaker.html
- Use a browser with WebGPU support, and check the help panel and HUD together with the sample when needed
webg Features Used
- Sample-side
GameStateManager: manages the top-level phasesintro / play / pause / stage-clear / result Space / Node: manages the game objectsShape: generates the floor, walls, blocks, paddle, and packsSmoothShader: shared standard material for drawing blocks both with and without normal mapsParticleEmitter: manages spark effects when blocks are destroyedTexture: generates procedural textures for blocksMessage: gameplay-specific HUD drawn fromdrawHud()Touch: fixed buttons← / → / A / D / RGameAudioSynth: plays BGM and sound effects from melody presets and the SE catalog
Checkpoints
- Confirm that the reflection direction of the pack is updated stably in response to paddle movement and rotation, verifying the basic quality of the collision-response logic
- Confirm that when the pack enters the positive local-Z side of
paddleNode, the remainingPACKcount decreases by 1 exactly once and does not keep decreasing while the pack remains in the area - Confirm that when
PACKreaches0, the game ends on that frame and the ending HUD shows the top five high scores - Confirm that destroying the green supply block (single-color
SmoothShaderpath without normals or texture) produces an effect that increases the remainingPACKcount by 1 - Confirm that score and progress display (
current count / target count) update immediately when blocks are destroyed, verifying that the gameplay HUD linked throughdrawHud()is correct - Confirm that SE and BGM are organized so they play according to the game state, including BGM presets, notification SE, and collision SE
Controls
ArrowLeft / ArrowRight: move the paddle along its long axisA / D: rotate the paddleR: reset the pack position during play, or restart the game after game overK: toggle pause on or offO: force game overP: save a screenshotQ / W: show diagnostics as text / JSON in the probe displayC / V: copy diagnostics as text / JSON to the clipboardJ / L: print diagnostics as text / JSON to the consoleF / G: save diagnostics as text / JSONM: switch between debug and release displayEnter / Space / click: start trigger while waiting to begin the stage- On smartphones (
coarse pointer), touch buttons← / → / A / D / Rare shown at the bottom of the screen - The smartphone UI does not show pause / debug / diagnostics buttons such as
K / O / P / Q / W / C / V / J / L / F / G / M