Bit Ly 200 Zems is a web-based game that you can play through your internet browser. I have written the game installation file codes here. Copy them, save them with the required extension, and run them.
200 Zems web-based game
The goal of the game is to catch the balloons that appear randomly on the screen to get the highest score. You also need to catch more balloons at each level. You should try to get into the top 5 by achieving a high score this way. Of course, since each balloon is a different color, the points are also different. Therefore, you should carefully review the score table shown to you before the game starts. Knowing that you can only earn points from balloons of a certain color allows you to determine your strategy. If you ignore this, you will earn fewer points and fall behind in the rankings.
Each balloon you catch in the game earns you 10 points. However, some balloons can earn you 20, 50, or even 100 points depending on their color. For example, a blue balloon earns you 10 points, while a red balloon earns you 50 points. Of course, since the colors and points of the balloons change at each stage, you need to play the game carefully. Otherwise, you will earn fewer points and lose to your opponents. This is because the game is limited to a certain amount of time. If you cannot catch enough balloons, you will fall behind with a low score. Therefore, you should catch balloons with the highest possible points within the given time. If you catch enough balloons, you can even break records by earning high scores. Sometimes bonus point balloons appear on the screen, so be careful not to miss them. This way, you can improve your record.
Footnote:
I would also like to briefly mention the language issue regarding the game. 200 Zems only supports English and German. This may create difficulties for those who want to play the game in different languages. However, since English is widely used worldwide, I think you can play the game comfortably. You should select the language when you first open the game. Once you make your selection, you will continue to play the game in the same language.
Here are the Game Code Files!
1 – index.html (HTML File).
This file creates the basic structure and content of the game. You should add the interface and the code for the necessary game files here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zem's Balloon Catch</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="game-container">
<h1 id="game-title">Zem's Balloon Catch</h1>
<p id="game-message">The game is on! Try to catch the targets!</p>
<div id="scoreboard">
<p id="score">Score: 0</p>
</div>
<div id="target-container">
<!-- Targets will be dynamically placed here -->
</div>
<button id="start-game">Start the Game</button>
</div>
<script src="js/game.js"></script>
</body>
</html>2 – style.css (CSS File).
This file controls the visual design of the game. We define style settings such as background colors, text sizes, and balloon placement here.
/* Genel Stil */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#game-container {
text-align: center;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
#game-title {
font-size: 36px;
color: #333;
}
#game-message {
font-size: 18px;
margin-top: 10px;
}
#scoreboard {
margin-top: 20px;
}
#target-container {
display: flex;
justify-content: center;
margin-top: 30px;
}
#start-game {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#start-game:hover {
background-color: #45a049;
}
#target {
width: 50px;
height: 50px;
background-image: url('../assets/target.png');
background-size: cover;
margin: 10px;
cursor: pointer;
}3 – game.js (JavaScript File).
This file manages the game’s logic and interactions. We code players clicking on balloons, updating the score, and placing balloons on the screen in this file.
// Variables
let score = 0;
let gameStarted = false;
let targetInterval;
// Elements
const scoreElement = document.getElementById('score');
const messageElement = document.getElementById('game-message');
const targetContainer = document.getElementById('target-container');
const startButton = document.getElementById('start-game');
// Starting game function
function startGame() {
score = 0;
scoreElement.textContent = "Score: 0";
messageElement.textContent = "The game is on! Try to catch the targets!";
gameStarted = true;
startButton.disabled = true;
spawnTarget();
targetInterval = setInterval(spawnTarget, 2000); // Create a balloon every 2 seconds
}
// Goal creation function
function spawnTarget() {
if (!gameStarted) return;
const target = document.createElement('div');
target.classList.add('target');
target.style.left = Math.random() * 80 + '%'; // Randomizing the X position of the target
target.style.top = Math.random() * 80 + '%'; // Randomizing the Y position of the target
target.addEventListener('click', captureTarget);
targetContainer.appendChild(target);
}
// Target capture function
function captureTarget(event) {
score += 10;
scoreElement.textContent = "Score: " + score;
event.target.remove(); // Remove clicked balloon
}
// Clicking the game start button
startButton.addEventListener('click', startGame);4 – config.json (Settings File – Optional).
This file determines the game settings and language options. If you want to add dynamic content or language support, you should make the necessary adjustments here. However, you should not delete other code characters when editing. Otherwise, the game will not open at all. So edit the file carefully!
{
"languages": {
"en": {
"game_start_message": "Game Started! Try to capture the targets!",
"target_captured_message": "You captured the target! Congratulations!"
},
"de": {
"game_start_message": "Spiel begonnen! Versuche, die Ziele zu fangen!",
"target_captured_message": "Du hast das Ziel erfasst! Herzlichen Glückwunsch!"
}
}
}After completing these four steps, create a folder named 200 Zem. Save the files inside it and upload them to your server using an FTP tool. Finally, open 200 Zem in a web browser and play. Hope you enjoy it!
Leave a Reply
You must be logged in to post a comment.