Arkanoid New Era

A next-generation brick breaker arcade game built with pure HTML5 Canvas and JavaScript. No frameworks, no dependencies — just fast, beautiful, and fun gameplay right in your browser.

Play the demo

Screenshots

Main Menu	Ship Selection	Gameplay

Features

• Cyberpunk/Neon visual style with particle effects, glow, screen shake, and animated backgrounds
• 3 selectable ships with unique stats and special abilities:
  • Viper X-1 — Fast and agile, doubles speed power-ups
  • Titan MK-III — Heavy and balanced, longer shield duration
  • Phantom Zero — Mysterious and lethal, all power-ups last 50% longer
• 5 levels with distinct animated backgrounds (Starfield, Neon City, Cyber Storm, Quantum Void, Warp Speed)
• 5 brick types: Standard, Tough, Armored, Explosive, Indestructible
• 8 power-ups: Multi Ball, Laser Blaster, Mega Expand, Fire Ball, Energy Shield, Time Warp, Magnetic Catch, Homing Missile
• Combo system with score multipliers
• Fully configurable via external JSON files — add levels, ships, and power-ups without touching the code
• Responsive design — works on desktop and mobile (mouse, touch, keyboard)
• Zero dependencies — pure vanilla JS, instant load

How to Play

• Mouse / Touch: Move the ship
• Arrow Keys / A-D: Move the ship (keyboard)
• Space / Click / Tap: Launch the ball
• P: Pause / Resume

Project Structure

ArkanoidNewEra/
├── index.html              # Entry point
├── css/style.css           # Cyberpunk styling
├── js/
│   ├── main.js             # Bootstrap and canvas setup
│   ├── engine.js           # Game engine (physics, collisions, logic)
│   ├── renderer.js         # All rendering (menus, HUD, effects)
│   └── backgrounds.js      # Animated level backgrounds
├── config/
│   ├── levels.json         # Level definitions (bricks layout, speed, background)
│   ├── ships.json          # Ship definitions (stats, colors, abilities)
│   └── powers.json         # Power-up definitions (effects, duration, drop rate)
├── package.json
└── vercel.json             # Vercel deployment config

Configuration

Everything is driven by JSON files in the /config directory. You can add new content without writing any code:

Add a new level (config/levels.json)

Define the brick grid (0 = empty, 1-5 = brick types), set ball speed, choose a background theme, and set the color palette.

Add a new ship (config/ships.json)

Define width, speed, colors, shape (sleek, heavy, or angular), stats, and a special ability description.

Add a new power-up (config/powers.json)

Define the effect, icon, color, duration, and drop chance.

Run Locally

No build step required. Just serve the files:

# With Python
python3 -m http.server 3000

# With Node.js
npx serve .

# Or just open index.html in your browser

Then open http://localhost:3000.

Deploy Your Own Copy (GitHub Pages)

You can have your own version of the game live on the internet in under 2 minutes — no server, no hosting fees, no setup. Just a free GitHub account.

1. Fork this repository — Click the Fork button at the top right of this page
2. Enable GitHub Pages — In your forked repo, go to Settings > Pages
3. Set the source — Under "Build and deployment", select Deploy from a branch, choose main branch and / (root) folder, then click Save
4. Wait ~1 minute — GitHub will build and publish your site
5. Play! — Your game is live at https://<your-username>.github.io/ArkanoidNewEra/

That's it. Every time you push changes to main, GitHub Pages will automatically redeploy.

Want to customize it? Edit the JSON files in /config directly on GitHub (click the file, then the pencil icon) — no need to clone the repo or install anything. Your changes go live automatically.

Contributing

This is an open-source project and contributions are very welcome! Here are some ideas for what you could add:

• New levels — Design creative brick layouts and add them to levels.json
• New ships — Create ships with unique shapes and abilities
• New power-ups — Invent new effects and add them to the engine
• Sound effects & music — Add audio feedback for collisions, power-ups, and background music
• Boss battles — Add boss enemies at the end of each world
• Online leaderboard — Implement a high score system
• New background themes — Create stunning animated backgrounds
• Multiplayer mode — Split-screen or online co-op/versus
• Level editor — A visual tool to design levels in the browser
• Achievements system — Track player milestones
• Mobile PWA — Add service worker for offline play and install-to-home
• Localization — Translate the UI to other languages
• Accessibility — Add keyboard-only navigation and screen reader support

How to contribute

1. Fork this repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Test locally
5. Commit and push (git push origin feature/amazing-feature)
6. Open a Pull Request

All skill levels are welcome — from fixing a typo to adding a whole new game mode!

License

This project is licensed under the MIT License — see the LICENSE file for details.

Credits

Built with love, Canvas API, and a lot of neon glow.