Did you try to create your own game and thought it’s too complicated? What if I told you that you can build a fun, interactive game using JavaScript in under 30 minutes? Yes, you read that right – 30 minutes! Are you a new developer and looking for a quick project? This fantastic JS Game tutorial will show you how to create a simple yet addictive game called “Catch the Star” in 30 minutes. So let’s begin.
Why Build a Game with JavaScript?🕹️
Before starting the game, let’s try to understand why building a game is an effective way to learn JavaScript:
- It’s Fun! Games are always enjoyable, and creating one by own is even more rewarding.
- Learn by Doing: Games need logic, interactivity, and creativity – perfect for developing your coding skills.
- Instant Satisfaction: We all developers know when our code starts executing as we want Its always gives us mental satisfaction. By creating a game we get an immediate visual feedback that come to our browser instantly right?
- Portfolio Enhancement: A simple game is a great addition to our portfolio. It shows potential employers or clients that we can create interactive and user-friendly applications.
What We are Building? Guess – It’s “Catch the Star”🌟
Think that, a shiny star appears randomly on your screen, and your mission is to click it as fast as you can. The more stars you catch means clicked, the higher your score. But here’s a twist—you only get 30 seconds to catch as much stars as possible. It is simple, right? But trust me, it’s addictive as well!
Tools You Need!🛠️
Before we start, make sure you have these tools ready:
- A text editor like VS Code or Sublime Text.
- A web browser like Chrome or Firefox.
- A lot of creativity and full of enthusiasm!
Step 1: Set Up the HTML Structure🏆
First, create the basic structure of the game using HTML. We need a container DIV for the game, a button to start, and a display for the score and timer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch the Star Game</title>
// Copy and paste CSS and JS files in the
// Same Directory
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<h1>Catch the Star!</h1>
<button id="start-btn">Start Game</button>
<div id="score">Score: 0</div>
<div id="timer">Time Left: 30</div>
<div id="star"></div>
</div>
<script src="script.js"></script>
</body>
</html>Step 2: Style the Game with CSS
Next, let’s add some basic styling to make the game visually appealing. Create a styles.css file and add the following:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.game-container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#star {
width: 50px;
height: 50px;
background-color: gold;
border-radius: 50%;
position: absolute;
cursor: pointer;
display: none;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}Step 3: Add JavaScript Logic
Now, let’s make the game interactive with JavaScript events. Create a script.js file and add the following code:
const startBtn = document.getElementById('start-btn');
const star = document.getElementById('star');
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timer');
let score = 0;
let timeLeft = 30;
let gameInterval;
// Function to move the star to a random position
function moveStar() {
const x = Math.random() * (window.innerWidth - 100);
const y = Math.random() * (window.innerHeight - 100);
star.style.left = `${x}px`;
star.style.top = `${y}px`;
star.style.display = 'block';
}
// Function to start the game
function startGame() {
score = 0;
timeLeft = 30;
scoreDisplay.textContent = `Score: ${score}`;
timerDisplay.textContent = `Time Left: ${timeLeft}`;
startBtn.disabled = true;
gameInterval = setInterval(() => {
timeLeft--;
timerDisplay.textContent = `Time Left: ${timeLeft}`;
if (timeLeft === 0) {
clearInterval(gameInterval);
star.style.display = 'none';
alert(`Game Over! Your score is ${score}`);
startBtn.disabled = false;
}
}, 1000);
moveStar();
}
// Event listener for the start button
startBtn.addEventListener('click', startGame);
// Event listener for clicking the star
star.addEventListener('click', () => {
score++;
scoreDisplay.textContent = `Score: ${score}`;
moveStar();
});Let’s How’s the Game !
How It Works?🧩
- Start Button: Clicking the “Start Game” button initializes the game, resets the score and timer, and starts the countdown for you in the browser.
- Star Movement: The
moveStar()function randomly positions the star on the screen. - Score Tracking: Each time the player clicks the star, the score increases.
- Timer: The game ends after 30 seconds, and the final score is displayed.
Table: Key Features of the Game🤩
The game is fully loaded with below features:
| Feature | Description |
|---|---|
| Random Movement | The star appears in random positions on the screen. |
| Score Tracking | The player’s score is updated in real-time. |
| Timer | A 30-second countdown adds urgency to the game. |
| Responsive Design | The game works on both desktop and mobile devices. |
Conclusion🎮
Congratulations! We just built a simple yet fun game using JavaScript. This project is a great way to practice your coding skills and learn how to create interactive web applications. You can expand this game by adding more features, such as:
- Levels of difficulty
- High-score tracking
- Sound effects
Feel free to experiment and make the game your own. Happy coding! 😊
Don’t forget to share your feedback – How is the game bro? Thanks.
🏋️♂️ Discover Code Blocks From 20+ yrs JS Expert
💥 Asp.net C# Developer
🏆 Solution Architect
👨✈️ Database Administrator
📢 Speaker
🎓 MCTS since 2009
Leave a Reply