Breakout is an arcade classic: a paddle, a ball and bricks to break. With Cerewro you can generate a complete version with power-ups, multiple levels and visual effects.
Create a complete Breakout/Arkanoid game in pure HTML5 Canvas:
- 800x600 canvas
- Paddle controlled by mouse and arrow keys
- Ball with realistic bounce physics (variable angle based on impact point)
- 8 rows x 12 columns of bricks with row colors
- Bricks requiring 1, 2 or 3 hits (different colors)
- Power-ups falling from bricks (20% chance):
* Wider paddle (blue)
* Slow ball (green)
* Extra ball (gold)
* Laser shot (red)
- 3 lives, score by brick type
- 3 levels with different brick layouts
- Particle effects and Web Audio sounds
- Save high score in localStoragefunction handlePaddleCollision(ball, paddle) {
if (!collides(ball, paddle)) return;
const hitPos = (ball.x - paddle.x) / paddle.width * 2 - 1; // -1 to +1
const angle = hitPos * (Math.PI / 3); // -60 to +60 deg
const speed = Math.hypot(ball.vx, ball.vy);
ball.vx = speed * Math.sin(angle);
ball.vy = -Math.abs(speed * Math.cos(angle));
}