Skip to content

Arcade › Beat Canvas

Beat Canvas

  • rhythm
  • music
  • arcade
  • browser
  • casual
0
Remix it Discord

9 plays

How to play

Click the game above and it runs right here in your browser. No download, no installer, no account needed. dwididhruvington built it with Cinevva, so it works on a phone or a tablet too.

Discussion

Nobody has said anything about Beat Canvas yet. Play it, then tell dwididhruvington what you would add next.

Make your own game

Beat Canvas was built by dwididhruvington with the Cinevva game creator: describe the game you want in chat, watch it get built, and play it in your browser minutes later.

Remix Beat Canvas opens the real game in the creator and forks its actual files, chat and design doc, so you start from the code rather than from a description.

Read the build brief for Beat Canvas

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Rebuild a browser rhythm game titled "Beat Canvas" with a dark, polished neon-glass interface. The actual built-in track is named "Circuit Crush" and the top HUD labels the system "Pulse AI Chart." Make it a single-player four-lane falling-note game with both keyboard and touch controls.

Use a full-screen responsive canvas as the animated background and playfield. The background should be nearly black/navy, with a subtle vertical gradient, blurred cyan and pink atmospheric glows, a soft radial orb near the upper center, and a low audio-reactive equalizer visualization along the bottom made of many thin translucent cyan/pink bars. Draw a centered playfield no wider than about 540px (or roughly 86% of a narrow viewport), divided into four vertical lanes. The lanes have faint translucent fills, thin separators, and a horizontal receptor near the lower portion of the field. Color lanes consistently: lane 1 cyan/blue (#53c4ff), lane 2 violet (#8b68ff), lane 3 pink (#ff5fd2), lane 4 golden yellow (#ffc75f). Notes are short rounded horizontal glowing rectangles in their lane, traveling downward toward the receptor over about 1.65 seconds. They should pulse/glow in their lane color. Show a thin green song progress bar below the playfield during play.

At the top, overlay a rounded translucent dark glass panel with a subtle light border and blur. On the left show the eyebrow "PULSE AI CHART", the current song title (initially "Circuit Crush"), and metadata in the form "Pulse AI • 124 BPM • [note count] notes • [density]/sec". On the right show Score, Combo, and Accuracy with large bright values; initialize them to 0, 0x, and 100%. Below it, show a full-width rounded Flow/health bar with a green-to-cyan-to-purple-to-pink gradient and centered text such as "Flow 100%".

On the initial/menu state, show a large rounded glass upload panel toward the upper-left/center. Its title is "Drop a song or play the demo mix" and its copy says that the player can upload a local MP3 or MP4 and Pulse AI will auto-chart it into a playable lane map. Include a prominent gradient button "Play demo mix" and a secondary button/label "Upload MP3 / MP4", plus a status line initially saying "Ready. Tap Play demo mix or upload a song to let Pulse AI chart it." Permit selecting or dropping a local audio/video file. Decode the audio in the browser and automatically generate a playable chart from audio energy/transient peaks; derive an estimated BPM, select peaks with a roughly 1.85–3.2 notes-per-second target, quantize near sixteenth-note timing where appropriate, and assign lanes with varied/stair-step/randomized movement. Name custom tracks from the filename without its extension. If decoding fails, display an explanatory status and a "DECODE" judgement.

The built-in demo should be a generated approximately 34-second electronic mix at 124 BPM, with synthesized bass, kick, snare, hi-hat, and melodic tones, and should have an automatically generated chart. Start the song with a synchronized 3, 2, 1, GO countdown and begin notes traveling before the audio reaches their hit times. During play, status text should tell the user to hit A S K L or tap the pads.

Controls: keyboard A, S, K, L map left-to-right to the four lanes. Also accept ArrowLeft, ArrowDown, ArrowUp, and ArrowRight as alternate lane keys. Provide four large bottom touch pads labeled A, S, K, L, with active color feedback and pointer/touch support. Add a separate glass strip just above them showing the same four key hints. Prevent repeated keydown events from scoring multiple times.

Judging: when a lane is pressed, find the nearest unjudged note in that lane within roughly 0.18 seconds. A hit within 0.065 seconds is PERFECT for 350 points and +2.2 Flow; within 0.11 seconds is GREAT for 220 and +1.2 Flow; within 0.16 seconds is GOOD for 120 and +0.4 Flow. Successful hits increase combo, max combo, hit count, weighted accuracy, and briefly show a large centered colored judgement text. If a note passes the hit window, mark it MISS, reset combo, subtract 8 health, and show MISS. Pressing an empty lane after the song starts resets combo, subtracts 2.5 health, and shows EMPTY. Clamp health to 0–100. At zero health stop the song, enter a failed state, show FAILED in pink/red, restore the panel visibility, and say "Flow broke — tap Play demo mix or upload a song to try again." When the audio ends without failure, enter a results state, show CLEAR in green, report accuracy, and display "Run clear • max combo [value]x". Judgements should fade quickly after about 220ms.

Use responsive layout behavior: on desktop keep the top bar, health bar, upload panel, playfield, key hints, and touch pads comfortably separated; on narrow screens stack the top bar, move the upload panel above the controls, and keep the four pads spanning nearly the full width. Use Inter for UI text and Space Grotesk for major headings/numbers. Glass panels should have rounded corners, translucent dark navy backgrounds, subtle white borders, blur, and soft shadows. Keep all game rendering and UI focused on the rhythm interaction; do not add extra enemies, characters, 3D scenery, multiplayer, or features not described here.

More free browser games

Browse the whole Arcade →