Skip to content

Arcade › Butter Bounce

Butter Bounce

  • 2d
  • arcade
  • dodger
  • endless
  • casual
  • food
0
Remix it Discord

3 plays

How to play

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

Discussion

Nobody has said anything about Butter Bounce yet. Play it, then tell the creator what you would add next.

Make your own game

Butter Bounce was built 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 Butter Bounce 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 Butter Bounce

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.

Create a responsive portrait-friendly arcade game titled "Butter Bounce" called Butter Bounce. Render the playfield in a full-screen HTML canvas with a warm, playful breakfast/toast visual style: a vertical cream-to-golden-yellow gradient background with faint horizontal toast-like lines, and a large rounded rectangular toast board centered from about 15% to 87% of the screen height. Give the board a thick dark caramel-brown rounded border, an inset orange-golden toast surface, subtle darker crumb circles, and soft dimensional shadows.

The game is a simple one-screen falling-object dodger. The player is a rectangular pat of butter, about 82 by 54 pixels, positioned near 73% of the screen height. Draw it as a bright yellow rounded rectangle with rounded corners, a pale cream strip/highlight across its upper portion, and a soft brown drop shadow. The butter slides horizontally only, staying within the board/screen margins. Steering uses left and right arrow keys or A/D on the keyboard, plus large circular on-screen left and right arrow buttons at the bottom corners for touch/pointer input. Holding a direction accelerates the butter strongly; apply friction so it glides and slows when released. Tilt the butter slightly according to horizontal velocity, clamped to a small angle.

When play begins, continuously spawn falling circular objects at random horizontal positions near the top of the screen. Objects fall downward at a starting speed around 180 pixels per second; gradually increase the speed over time. Spawn timing starts around every 0.85 seconds and becomes shorter as the score rises, but never below about 0.34 seconds. About 32% of spawned objects are dangerous hot spots: larger orange-red circles with a yellow ring. The other objects are collectible jam dots: smaller red circles with a lighter highlight. Rotate/wobble the objects slightly as they fall. Use simple rectangle-circle overlap collision detection between the butter and each object. Collecting a jam dot removes it and adds 10 points. Hitting a hot spot immediately ends the run; do not add a health system even though the player is visually unaffected before collision. Remove missed objects after they pass below the screen.

At the top, overlay a non-blocking HUD with three cream translucent pill-shaped labels bordered in orange-brown: left label reads "🧈 BUTTER BOUNCE", center label reads "Score 0" (updating during play), and right label reads "Best 0" (updating from the saved high score). Use bold dark-brown system text with a subtle light text shadow. Store the best score in local storage under the key butterBest and update it when a run ends.

On initial load, show a centered cream instruction card over the board with a thick orange border, rounded corners, and a soft downward shadow. It contains a large bold "Butter Bounce" heading, the exact instruction text: "Slide the butter across the toast, grab the jam dots, and dodge the hot spots.", and an orange button labeled "Start cooking". The card hides when starting. When the butter hits a hot spot, stop gameplay and show the centered end card with the heading "Too crispy!", the message "You scored [score]. The butter melted on the hot spot.", and a button labeled "Try again" that resets score, objects, speed, and player position. Also allow Space to start/restart when not running. Keep the bottom controls visible during the game, with translucent pale-cream circular buttons, dark brown arrows, orange-brown outlines, and pressed-state feedback. Add the centered dark-brown caption "STEER THE BUTTER" above the controls near 89% of the screen height.

Use clean flat 2D canvas shapes, rounded corners, warm butter/toast colors, no external assets, and responsive resizing that preserves the composition across desktop and mobile screens. The game should continuously animate with requestAnimationFrame, cap frame delta for stable movement, and remain playable with keyboard and touch controls.

More free browser games

Browse the whole Arcade →