Skip to content

No-Canvas Browser Game

Build a genuinely playable browser game with DOM elements, CSS, and application state instead of Canvas or a game engine.

Open exact prompt

Overview

Test whether a model can deliver a responsive, restartable interactive game without relying on Canvas.

Capabilities tested

  • real-time logic
  • input handling
  • collision
  • animation
  • audio

Required outcome

A stable production build with a complete playable loop, clear rules, and visible success or failure states.

Requirements

functional

  • Player movement with keyboard input
  • Enemy or obstacle behavior with collision
  • Score plus health or energy
  • Win or failure state and restart
  • Sound with a usable mute control

ux

  • Pointer input where useful
  • Visible control instructions
  • Responsive layout
  • Reduced-motion-safe feedback

technical

  • Semantic DOM and CSS only for the game surface
  • No Canvas or game engine
  • Production build must succeed

Constraints

Allowed

  • DOM elements
  • CSS animation
  • Application state
  • Web Audio APIs

Forbidden

  • Canvas
  • Game engines
  • Unreviewed external game code

Acceptance criteria

  • The game can be played, won or lost, and restarted
  • Collision affects visible game state
  • Keyboard and pointer behavior work
  • The layout remains usable on a narrow viewport

Evidence required

  • Production build output
  • Desktop and mobile screenshots
  • A short gameplay capture
  • Known-bug list

Exact prompt

prompts/challenges/no-canvas-browser-game.md
# BuildArena Challenge

Role: Senior product engineer.

Project: No-Canvas Browser Game v1.0.0

Objective: Build a responsive, genuinely playable browser game using semantic DOM, CSS, and application state—not Canvas or a game engine.

Required outcome: Player movement, useful keyboard and pointer input, obstacles or enemies, collision, score, health or energy, sound, win/failure state, restart, and responsive behavior.

Build order: Inspect the environment; create one playable loop; verify collision and state changes; add sound and responsive controls; run production validation.

Verification: Run the package scripts, play through win/failure/restart, inspect keyboard behavior, mobile layout, and console output.

Evidence to return: Commands, test results, desktop/mobile screenshots, gameplay capture, known bugs, missing requirements, human intervention, final commit, and deployment URL only when authorized.

Claims prohibited without proof: complete, production-ready, fully working, bug-free, accessible, responsive, performant.