How To Make A Game In HTML?

Last Updated : 15 Apr, 2025

HTMLTo create the game in HTML, we will use HTML, CSS, and Javascript. This game challenges the player to catch a moving ball by clicking on it before it changes position. For every successful click, we just increment the player's score and this score is displayed in real-time. The ball moves to a random location on the game board at regular intervals, making the gameplay dynamic and engaging.

Prerequisites

Approach To Make A Game

First, create a basic HTML structure and also add a good title for this project. Then create a "container" where we will put all those things like game heading and score etc.
After that, you can use the CSS code to make the game attractive.
To change randomly the ball position use the setInterval() function the ball position is updated.
Create a variable for the score which is updated when we click the ball in every update updated.

Example: The example code below shows how to make a game in HTML

HTML

// index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Catch the Ball Game</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1 class="game-heading">Catch the Ball</h1>
        <p>Score: <span id="score">0</span></p>
        <div id="gameArea">
            <div id="ball"></div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

CSS

// style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #74ebd5, #acb6e5);
    font-family: 'Arial', sans-serif;
}

.container {
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
}

.game-heading {
    margin-bottom: 20px;
    font-size: 2rem;
    color: #11de29;
    text-transform: uppercase;
    letter-spacing: 2px;
}

p {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 20px;
}

#score {
    font-weight: bold;
    color: #ff5722;
}

#gameArea {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 320px;
    background-color: #e0e0e0;
    border: 4px solid #333;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: background-color 0.3s ease;
}

#gameArea:hover {
    background-color: #d3d3d3;
}

#ball {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #ff8a65, #ff5722);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease;
}

#ball:hover {
    transform: scale(1.1);
}

@media (max-width: 500px) {
    h1 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1.25rem;
    }

    #gameArea {
        max-width: 280px;
        height: 280px;
    }

    #ball {
        width: 30px;
        height: 30px;
    }
}

JavaScript

// Script.js

const ball = document.getElementById("ball");
const scoreDisplay = document.getElementById("score");
let score = 0;

// Function to move the ball to a random position
function moveBall() {
    const gameArea = document.getElementById("gameArea");
    const maxX = gameArea.clientWidth - ball.clientWidth;
    const maxY = gameArea.clientHeight - ball.clientHeight;

    const randomX = Math.floor(Math.random() * maxX);
    const randomY = Math.floor(Math.random() * maxY);

    ball.style.left = `${randomX}px`;
    ball.style.top = `${randomY}px`;
}

// Function to increase the score when the ball is clicked
ball.addEventListener("click", () => {
    score++;
    scoreDisplay.textContent = score;
    moveBall();
});

// Move the ball every second
setInterval(() => {
    moveBall();
}, 1000);