Bit Ly 200 Zems is a web based game you can play in your internet browser. I already shared a link on BitLy before, but I deleted it, so I am adding its content here.
The goal is to catch balloons that randomly appear on the screen and get the highest score. You also need to catch more balloons at each stage. Try to get a high score and reach the top 5. Each balloon has a different color, so each one gives different points. Before the game starts, study the score chart the game shows you. Knowing you score only from certain colored balloons lets you set your strategy. If you ignore this, you get fewer points and fall behind in the rankings.
Each balloon you catch gives you 10 points. But some balloons give 20, 50, or even 100 points depending on color. For example, a blue balloon gives 10 points, while a red balloon gives 50 points. Balloon colors and point values change at each stage, so play carefully. Otherwise, you get fewer points and lose to your opponents. The game limits you to a set time. If you do not catch enough balloons, you stay behind with a low score. So catch the balloons with the highest points you can within the time limit. If you catch enough balloons, you can get a high score and even break a record. Sometimes bonus point balloons appear on the screen, so do not miss them. That way, you can improve your record.
Note:
I also want to briefly mention the language issue for the game. 200 Zems supports only English and German. This creates a problem for people who want to play in other languages. But English is common worldwide, so I think you can play the game easily. Choose your language when you first open the game. After you choose once, you keep playing in the same language.
Here are the game code files.
1 – index.html (HTML File).
This file builds the basic structure and content of the game. Add the interface and the code for the files the game needs 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. You define style settings here, such as background colors, text sizes, and balloon placement.
/* 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 logic and interactions. You code player clicks on balloons, score updates, and balloon placement 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 sets game settings and language options. If you want to add dynamic content or language support, make the needed changes here. But do not delete other code characters while you edit. 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 you complete these four steps, create a folder named 200 Zem. Save the files in it and upload them to your server with an FTP tool. Finally, open 200 Zems in a web browser and play. I hope you like it.