Plunk | HTML5 3D Button Game

Plunk | HTML5 3D Button Arcade Game

Plunk is a fun and addictive HTML5 arcade game where every control is a satisfying 3D button. Press glowing keycaps, solve puzzles, test your reflexes, and challenge your memory across four unique game modes.

The buttons rise from a dark game board, glow when activated, and sink when pressed. The board features a dynamic 3D tilt effect, while all visuals are created with CSS and all sounds are generated using the Web Audio API. No image or audio files are required.

Four Unique Game Modes

1. Lights Out – Puzzle Mode

• 60 handcrafted-style, procedurally generated puzzle levels
• Press a button to toggle its light and the four neighbouring buttons
• Turn off every light to complete the puzzle
• Progressive board sizes: 3×3, 4×4, and 5×5
• Every generated level is designed to be solvable
• Par-based scoring with 1–3 stars per level
• Optional hint system that limits the maximum reward to 2 stars
• Sequential level unlocking with an optional unlock-all setting

2. Reflex Rush – Reflex Mode

• 45-second fast-paced reaction challenge
• Press glowing buttons as quickly as possible
• Build combos to increase your score
• Gold buttons award an extra 2 seconds
• Wrong presses and missed targets reduce your remaining time
• Board expands from 3×3 to 4×4 as the challenge increases
• Target timing becomes faster as you improve

3. Echo Pad – Memory Mode

• Four large coloured keys with individual tones
• Watch and listen to the sequence, then repeat it correctly
• Each new level adds another step to the sequence
• Playback speed increases as you progress
• One incorrect press ends the current run

4. Number Rush – Speed Mode

• Three fast-paced numbered-button rounds
• Round sizes: 9, 12, and 16 buttons
• Press the numbers in ascending order, starting from 1
• Wrong presses add a 1-second penalty
• Complete each round as quickly as possible
• Personal best times are saved automatically

Game Features

• Realistic CSS-based 3D buttons with raised keycaps and press animations
• Glowing button effects and a dark arcade-style board
• Interactive 3D board tilt that follows mouse movement
• Instant button response on touch down
• Optional device vibration feedback
• Three visual skins: Arcade, Candy, and Carbon
• Sound, vibration, 3D tilt, and reduced-motion settings
• Pause menu and individual instructions for every game mode
• Star counter, personal bests, and animated confetti results
• Automatic browser-based progress saving

Mobile and Desktop Ready

• Mobile-first responsive design
• Optimized layouts for phones, landscape phones, tablets, and desktops
• Large touch-friendly buttons with 48px minimum touch targets
• Interface scales up on larger screens
• Safe-area support for phones with notched displays
• Desktop keyboard controls: Tab, Enter, and Space
• Press Esc to pause the game

Easy Customization

Customize the game through a single configuration file without editing the main game logic.

• Change the game title, tagline, credits, and interface messages
• Customize button labels and text for easy translation
• Configure the number of puzzle levels and level unlocking
• Adjust Reflex Rush duration and Number Rush round sizes
• Change Echo Pad playback speed
• Customize star targets for all game modes
• Change each mode’s name, colour, description, and instructions
• Enable or disable individual game modes
• Manage the three visual skins through CSS variables

Privacy and Performance

• No advertisements or in-app purchases
• No accounts, analytics, or external network requests
• No external images, audio files, or font dependencies
• Pure HTML5, CSS3, and vanilla JavaScript
• No third-party libraries or build tools required
• Game progress is stored locally using browser localStorage
• Can run directly by opening index.html or uploading the game folder to a web host

Documentation Included

• Complete setup and installation guide
• Annotated logo and branding guide
• Keycap logo, colour, skin, and font customization guide
• Configuration settings reference
• Translation instructions
• Game controls and gameplay guide
• Troubleshooting documentation

Technology

• HTML5
• CSS3 with 3D transforms and animations
• Vanilla JavaScript (ES6+)
• Web Audio API
• Browser Local Storage

Browser Testing

Tested in Chromium at phone, tablet, and desktop screen sizes. Real-device testing, Safari, and Firefox testing have not yet been completed.

Support

For installation, configuration, or customization questions, please use the item comments page.