Brick breaker browser game

A classic!

Brick Breaker is a popular browser-based game that involves breaking bricks by bouncing a ball off a paddle. Here's a simple implementation of the game using HTML, CSS, and JavaScript:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Brick Breaker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="canvas" width="400" height="600"></canvas>
  <script src="script.js"></script>
</body>
</html>

CSS (in style.css file):

canvas {
  border: 1px solid black;
}

JavaScript (in script.js file):

// Get the canvas element
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Set the canvas dimensions
canvas.width = 400;
canvas.height = 600;

// Initialize game variables
var paddle = {
  x: canvas.width / 2,
  y: canvas.height - 20,
  width: 100,
  height: 20
};

var ball = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 10,
  speedX: 3,
  speedY: 3
};

var bricks = [];
for (var i = 0; i < 10; i++) {
  bricks[i] = [];
  for (var j = 0; j < 5; j++) {
    bricks[i][j] = {
      x: j * (canvas.width / 5),
      y: i * (canvas.height / 10),
      width: canvas.width / 5,
      height: canvas.height / 10
    };
  }
}

// Draw the game
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'black';
  ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  for (var i = 0; i < bricks.length; i++) {
    for (var j = 0; j < bricks[i].length; j++) {
      ctx.fillStyle = 'gray';
      ctx.fillRect(bricks[i][j].x, bricks[i][j].y, bricks[i][j].width, bricks[i][j].height);
    }
  }
}

// Update the game
function update() {
  // Move the ball
  ball.x += ball.speedX;
  ball.y += ball.speedY;

  // Check for collisions with the paddle
  if (ball.x + ball.radius > paddle.x && ball.x - ball.radius < paddle.x + paddle.width) {
    if (ball.y + ball.radius > paddle.y && ball.y - ball.radius < paddle.y + paddle.height) {
      ball.speedY = -ball.speedY;
    }
  }

  // Check for collisions with the bricks
  for (var i = 0; i < bricks.length; i++) {
    for (var j = 0; j < bricks[i].length; j++) {
      if (ball.x + ball.radius > bricks[i][j].x && ball.x - ball.radius < bricks[i][j].x + bricks[i][j].width) {
        if (ball.y + ball.radius > bricks[i][j].y && ball.y - ball.radius < bricks[i][j].y + bricks[i][j].height) {
          ball.speedY = -ball.speedY;
          bricks[i][j] = null;
        }
      }
    }
  }

  // Check for collisions with the edges
  if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
    ball.speedX = -ball.speedX;
  }
  if (ball.y + ball.radius > canvas.height) {
    ball.speedY = -ball.speedY;
  }

  // Check for game over
  if (ball.y + ball.radius > canvas.height) {
    alert('Game Over!');
  }
}

// Main game loop
setInterval(function() {
  draw();
  update();
}, 16); // 16ms = 60fps

This code creates a canvas element and sets up the game variables, including the paddle, ball, and bricks. The draw function clears the canvas and draws the game elements, while the update function updates the game state and checks for collisions. The main game loop uses setInterval to call the draw and update functions repeatedly.

You can play the game by moving the paddle left and right using the arrow keys, and the ball will bounce off the paddle and bricks. The goal is to break all the bricks to win the game.

Note that this is a basic implementation, and you can add features like scoring, power-ups, and level design to make the game more interesting.

NewsBreakers

Brick breaker browser game