If you have ever caught yourself compulsively bursting bubble wrap just to hear that oh-so-satisfying little pop, then you will have no problem seeing the appeal to this game. This is a simple browser based game, but the strange thing is, once it is started, it is incredibly addictive to just stop playing.
I actually had a BitLy link lying around of this for quite some time but ultimately I nixed it in one of my more intense bursts of spring-cleaning the internet of all things and such. Rather than leave it at that I’m providing a writeup of it here, as well as the source code to it.
What, precisely, is Bit Ly 200 Zems?
In short, it is an online clicking game where your objective is to click the balloons before your timer runs out to be listed in the Top 5 leaderboard. The concept sounds really basic, but that is what gets almost everyone: the different points each balloon is worth. When the game is first loading up, there is a chart showing the scores. Look at the chart. You will see that most balloons are worth 10 points but there are others that go up to 20, 50, and even 100. Do not bother wondering why you ended up at the bottom of the leaderboard when you spent half the game clicking on random red and blue balloons; read the chart, moron.
The time is going to be your biggest nemesis in this game. Because you are always up against the clock, it’s worth your while to go after the higher points if you can, but don’t go wasting tons of time to get a high point balloon if you can click several low-point balloons in that amount of time.
This is basic math when it comes down to it: If you have a red 50 pointer and a blue 10 point balloon that appear at the same time, it’s obvious what one you should go for. But more importantly, if there are bonus points that fly onto the screen, immediately stop clicking everything else and pop it; missing a bonus points balloon can literally cost you a world-record breaking run.
A quick note about the language- It only accepts English and German. Since you’re reading this in English, that’s probably okay, but it’s something to remember if you are sending this to another person. This is chosen on initial load- the game is quite resistant to being changed later so choose well.
Here are the Game Code Files!
The game itself is comprised of four files. The index.html creates the basic structure for the game. The style.css is the presentation- colors, font styles and balloon shapes are all in here. The game.js contains the “heart” of the game, it counts the number of balloons popped and dictates when balloons are presented, where and when. Lastly, there is a config.json file which is not technically necessary but allows one to change settings like language and many of the other dynamic elements. Take care with this one- if a comma or bracket is out of place it refuses to load altogether.
1 – index.html (HTML File).
<!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).
/* 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).
// 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).
{
"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!"
}
}
}To actually load the game simply download all four files, throw them into a folder that has been named 200 Zem and upload this to your hosting service through an FTP program. From there, it’s just a matter of visiting the link. A very simple thing, but seeing it work is almost reward enough. Enjoy, and enjoy the popping.
