Ready to dive into game development? Here's a super simple and fun game you can build with just HTML, CSS, and JavaScript. The goal of the game is to click on a moving box as many times as possible within 10 seconds. Follow these steps, and you'll have your first game running in no time!
1. Create the HTML Structure
Start by creating the basic structure for your game. Use this HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click the Box Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Click the Box!</h1>
<p>Click the box as many times as you can in 10 seconds!</p>
<div id="game-box"></div>
<p>Score: <span id="score">0</span></p>
<script src="script.js"></script>
</body>
</html>
2. Style the Game with CSS
Add some styling to make the game look great. Save this as style.css and here is ur code
#game-box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
border-radius: 5px;
}
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
3. Add Game Logic with JavaScript
Now for the fun part—making the game interactive! Save this as script.js
let score = 0;
let gameBox = document.getElementById("game-box");
let scoreDisplay = document.getElementById("score");
function moveBox() {
let x = Math.random() * (window.innerWidth - 50);
let y = Math.random() * (window.innerHeight - 50);
gameBox.style.left = x + "px";
gameBox.style.top = y + "px";
}
gameBox.addEventListener("click", () => {
score++;
scoreDisplay.textContent = score;
moveBox();
});
setTimeout(() => {
alert("Game over! Your score is: " + score);
score = 0;
scoreDisplay.textContent = score;
}, 10000);
moveBox();
4. How It Works
Here's what happens:
When you click the red box, your score increases by 1, and the box moves to a random position. The game ends after 10 seconds, and an alert displays your final score. All the action happens inside the script.js file, while style.css makes the game look good.
5. Run Your Game!
Open your HTML file in a browser and start clicking the box! Have fun and share your score with your friends.
Next Steps
Want to make it more challenging? Try adding these features:
Reduce the size of the box as the score increases. Add a timer that counts down on the screen. Change the box color every time it's clicked.
Congratulations on building your first game!
