Hey there, fellow coders! Vishnu Rajoria here from CSLAB Computer Institute in Sikar. As a coding instructor and Full Stack Developer, I love sharing fun and educational projects. Today, we’re going to build a simple helicopter game using HTML, CSS, and JavaScript. Let’s dive in!
What We’re Building
We’re creating a basic game where a helicopter flies across the screen. The game ends randomly, simulating a crash with an explosion animation. It’s a great project to understand the basics of:
- HTML structure
- CSS styling and animations
- JavaScript DOM manipulation and game logic
The Key Components
- HTML: Sets up the game structure
- A “Play Game” button
- A game container with status display
- A helicopter div with images for the helicopter and explosion
- CSS: Styles our game elements
- Creates a black background for our game
- Positions the helicopter
- Styles the game status text
- Hides the explosion animation initially
- JavaScript: Brings the game to life
- Selects necessary DOM elements
- Implements the game logic in the
playGame()function - Moves the helicopter randomly
- Ends the game after a random number of moves
- Resets the game for the next round
See the Pen Aviator Game Logic by CSLAB Software Development and Computer Training (@CSLAB) on CodePen.
HTML CODE
<!-- Play Game button -->
<button class="play-game-btn">Play Game</button>
<!-- Main game container -->
<div class="game-container">
<!-- Game status display -->
<div class="status">Rest</div>
<!-- Helicopter container -->
<div class="helicopter">
<!-- Helicopter image -->
<img src="https://images.vexels.com/content/153505/preview/red-helicopter-icon-1fd9bb.png" alt="Helicopter">
<!-- Blast animation image (hidden by default) -->
<img class="blast-animation" src="https://i.gifer.com/origin/d4/d43612896ed91c111a46c2965c9e7f25_w200.gif" alt="Explosion">
</div>
</div>CSS CODE
/* Game container styles */
.game-container {
background: black;
height: 400px;
position: relative;
overflow: hidden;
}
/* Helicopter styles */
.helicopter {
border: 5px solid black;
width: 100px;
height: 30px;
position: absolute;
bottom: 0px;
left: 10px;
transition: all 1s;
}
/* Helicopter image styles */
.helicopter img {
width: 100%;
margin-top: -35px;
}
/* Game status text styles */
.status {
color: #fff;
font-size: 30px;
font-weight: bold;
font-family: arial;
text-align: center;
padding: 10px;
}
/* Blast animation styles */
.blast-animation {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
}JAVASCRIPT CODE
// Select DOM elements
let helicopter = document.querySelector(".helicopter");
let gameStatus = document.querySelector(".status");
let blastAnimation = document.querySelector(".blast-animation");
let playGameBtn = document.querySelector(".play-game-btn");
// Add click event listener to the Play Game button
playGameBtn.addEventListener("click", () => {
playGameBtn.style.display = "none";
playGame();
});
// Main game function
function playGame() {
let count = 0;
let helicopterLeft = 10;
let helicopterBottom = 0;
let maxCount = parseInt(Math.random() * 31);
// Initialize helicopter position
helicopter.style.opacity = "1";
helicopter.style.bottom = helicopterBottom + "px";
helicopter.style.left = helicopterLeft + "px";
console.log("Current position of the helicopter is ");
console.log(`left: ${helicopterLeft} bottom: ${helicopterBottom}`);
// Update game status and helicopter position
gameStatus.innerText = "Flying";
helicopter.style.bottom = "20px";
helicopter.style.transform = "rotate(-10deg)";
helicopter.style.transition = "all 0.5s linear";
// Start game loop
let gameTimer = setInterval(() => {
count++;
helicopterLeft = helicopterLeft + 20;
helicopterBottom = helicopterBottom + parseInt(Math.random() * 20);
helicopter.style.left = helicopterLeft + "px";
helicopter.style.bottom = helicopterBottom + "px";
// Check if game should end
if (count >= maxCount) {
// Show explosion animation
helicopter.style.opacity = "0";
blastAnimation.style.opacity = "1";
gameStatus.innerText = "Game Over";
// Reset game after a delay
setTimeout(() => {
blastAnimation.style.opacity = "0";
clearInterval(gameTimer);
setTimeout(() => {
// Reset game state for next round
playGameBtn.style.display = "inline-block";
helicopterLeft = 10;
helicopterBottom = 0;
helicopter.style.bottom = helicopterBottom + "px";
helicopter.style.left = helicopterLeft + "px";
}, 200);
}, 200);
}
}, 500);
}The Cool Parts
- Random Movement: We use
Math.random()to create unpredictable helicopter movement. - Transition Effects: CSS transitions make the helicopter movement smooth.
- Game Loop:
setInterval()creates our game loop, updating the helicopter’s position. - Explosion Animation: We toggle the visibility of an explosion GIF for a cool effect.
Why This Project is Great for Learning
This simple game touches on several important programming concepts:
- DOM manipulation
- Event handling
- Timing functions
- Random number generation
- State management
It’s a fun way to see how HTML, CSS, and JavaScript work together to create an interactive experience.
Wrapping Up
Building games, even simple ones like this, is an excellent way to improve your coding skills. It combines visual elements with logic, making the learning process engaging and rewarding.
Remember, the key to becoming a great developer is practice and experimentation. Try modifying this game – add obstacles, change the movement pattern, or include a score system. The possibilities are endless!
Happy coding, everyone! 🚁💻
