Breakout-style Game Project

This project is a browser-based breakout-style game built using vanilla JavaScript and the HTML5 Canvas API.

---

Overview

The game features:

• Paddle controlled by arrow keys
• Ball that bounces off walls, paddle, and bricks
• Multiple levels with brick layouts
• Score tracking and high score storage
• UI to change player name, paddle color, background color, and difficulty
• Pause, start, and restart game controls

---

Setup

Make sure your HTML includes:

<div id="game-board" style="width: 800px; height: 600px;">
  <canvas id="gameScreen"></canvas>

  <button class="btn--name">Enter Name</button>
  <button class="btn--paddle-color">Change Paddle Color</button>
  <button class="btn--background-color">Change Background Color</button>
  <button class="btn--difficulty">Set Difficulty</button>
  <button class="btn--new">New Game</button>

  <div class="score-label">Current Score</div>
  <div class="current-label">High Score</div>
  <div id="current"></div>
</div>

Core Concepts

Game States

const GAMESTATE = {
  PAUSED: 0,
  RUNNING: 1,
  MENU: 2,
  GAMEOVER: 3,
  NEWLEVEL: 4,
};

The game transitions through these states to manage gameplay flow.

Classes

• Paddle - Handles paddle position, movement, drawing, and boundary limits.
• Ball - Controls ball position, speed, collision detection, and drawing.
• Brick - Represents individual bricks, their positions, drawing, and collision with the ball.
• InputHandler - M anages keyboard events for paddle movement and game controls.
• Game - Main controller class that initializes objects, manages state, game loop, score, levels, and rendering.

Usage Example

// Create a new Game instance with canvas width and height
let game = new Game(GAME_WIDTH, GAME_HEIGHT);

// Main game loop using requestAnimationFrame
function gameLoop(timestamp) {
  let deltaTime = timestamp - lastTime;
  lastTime = timestamp;

  context.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
  game.update(deltaTime);
  game.draw(context);

  requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);

Interactive Features

• Change player name
• Change paddle and background colors via prompts
• Adjust difficulty with different speeds and expansion rates
• Start a new game or pause/resume gameplay

How to Run

1. Include the JavaScript in an HTML file with the correct elements and buttons.

2. Open the HTML file in a modern browser.

3. Use the buttons to interact with the game.

4. Use arrow keys to move the paddle.

5. Press SPACE to start and ESC to pause.

🧱 Play Brick Breaker