How to Create a Bounce Game in HTML, CSS, and JavaScript

Javascript
16 Jan 2025 10:07 PM

A Bounce Game is a classic arcade-style game where a ball bounces around the screen, and the player controls a paddle to keep it in play. This game is simple to build using HTML, CSS, and JavaScript, and it’s a great project for beginners in game development.

Step 1: Set Up the HTML

The HTML structure for the game includes a <canvas> element where the game will be rendered.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bounce Game</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(to bottom, #4facfe, #00f2fe);
        }
        canvas {
            border: 2px solid #000;
            background: #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script src="bounce.js"></script>
</body>
</html>

Step 2: Design the Game Logic in JavaScript

The game involves controlling a paddle, moving the ball, and detecting collisions.

Ball Properties

The ball will have attributes such as position, speed, and radius.

Paddle Properties

The paddle is a rectangle that the player controls using the arrow keys.

Collision Detection

The ball bounces off walls and the paddle. If it touches the bottom edge, the game resets.

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Set canvas size
canvas.width = 600;
canvas.height = 400;

// Ball properties
let ball = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 15,
    dx: 4, // Horizontal speed
    dy: 4, // Vertical speed
    color: "red",
};

// Paddle properties
let paddle = {
    x: canvas.width / 2 - 50,
    y: canvas.height - 30,
    width: 100,
    height: 10,
    color: "blue",
    speed: 5,
    dx: 0,
};

// Controls
document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft") paddle.dx = -paddle.speed;
    if (e.key === "ArrowRight") paddle.dx = paddle.speed;
});
document.addEventListener("keyup", (e) => {
    if (e.key === "ArrowLeft" || e.key === "ArrowRight") paddle.dx = 0;
});

// Draw ball
function drawBall() {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = ball.color;
    ctx.fill();
    ctx.closePath();
}

// Draw paddle
function drawPaddle() {
    ctx.fillStyle = paddle.color;
    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}

// Move paddle
function movePaddle() {
    paddle.x += paddle.dx;

    // Prevent paddle from going out of bounds
    if (paddle.x < 0) paddle.x = 0;
    if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
}

// Update ball position
function moveBall() {
    ball.x += ball.dx;
    ball.y += ball.dy;

    // Bounce off walls
    if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.dx *= -1;
    }

    // Bounce off top
    if (ball.y - ball.radius < 0) {
        ball.dy *= -1;
    }

    // Paddle collision
    if (
        ball.y + ball.radius > paddle.y &&
        ball.x > paddle.x &&
        ball.x < paddle.x + paddle.width
    ) {
        ball.dy *= -1;
    }

    // Reset if ball hits bottom
    if (ball.y + ball.radius > canvas.height) {
        resetGame();
    }
}

// Reset game
function resetGame() {
    ball.x = canvas.width / 2;
    ball.y = canvas.height / 2;
    ball.dx = 4;
    ball.dy = 4;
    paddle.x = canvas.width / 2 - paddle.width / 2;
}

// Draw everything
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
}

// Update game
function update() {
    movePaddle();
    moveBall();
    draw();
    requestAnimationFrame(update);
}

update();

Step 3: How It Works

  1. Canvas Setup: The <canvas> element serves as the game area.
  2. Game Objects:
    • The ball moves and bounces within the canvas bounds.
    • The paddle is controlled by the player using arrow keys.
  3. Collision Detection: The ball changes direction when it hits the paddle or walls.
  4. Game Reset: If the ball touches the bottom of the canvas, the game resets.

Features You Can Add

  • Score System: Add a score counter that increments each time the ball hits the paddle.
  • Levels: Increase the ball's speed after certain intervals or scores.
  • Obstacles: Add blocks for the ball to destroy, similar to a breakout game.

3
33