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 Shape objects", "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 phases intro / play / pause / stage-clear / result
• Space / Node: manages the game objects
• Shape: generates the floor, walls, blocks, paddle, and packs
• SmoothShader: shared standard material for drawing blocks both with and without normal maps
• ParticleEmitter: manages spark effects when blocks are destroyed
• Texture: generates procedural textures for blocks
• Message: gameplay-specific HUD drawn from drawHud()
• Touch: fixed buttons ← / → / A / D / R
• GameAudioSynth: 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 remaining PACK count decreases by 1 exactly once and does not keep decreasing while the pack remains in the area
• Confirm that when PACK reaches 0, 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 SmoothShader path without normals or texture) produces an effect that increases the remaining PACK count by 1
• Confirm that score and progress display (current count / target count) update immediately when blocks are destroyed, verifying that the gameplay HUD linked through drawHud() 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 axis
• A / D: rotate the paddle
• R: reset the pack position during play, or restart the game after game over
• K: toggle pause on or off
• O: force game over
• P: save a screenshot
• Q / W: show diagnostics as text / JSON in the probe display
• C / V: copy diagnostics as text / JSON to the clipboard
• J / L: print diagnostics as text / JSON to the console
• F / G: save diagnostics as text / JSON
• M: switch between debug and release display
• Enter / Space / click: start trigger while waiting to begin the stage
• On smartphones (coarse pointer), touch buttons ← / → / A / D / R are 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