Bit Ly 200 Zems Free Download

Bit Ly 200 Zems is a web-based game. I already posted it on BitLy but it got deleted so I’m adding the post here so it will be a permanent resource. So why is this important!

First of all, balloon popping games are a crowd pleaser at all ages. Because intelligence games are always loved. That’s why I added this content so it won’t get deleted again.

Let me give you some info about the game. Our goal in the game is to get the highest score by catching balloons that randomly appear on the screen. We should also try to catch more balloons at each stage. That way we will try to get a high score. And that’s how we will try to get in the top 5.

Of course since each balloon is in different colors, their scores are also different. So for each color you can only earn the points shown before the game. However, this scoring system changes in the next stage and is randomly displayed on the balloons by the game. The purpose of this is to make each stage more challenging.

200 Zems supports two languages, English and German. When you first launch the game, you will play in the language you choose. There is no way to change it afterwards.

You earn 10 points for each balloon you catch. But you can also earn 20, 50, 100 points depending on the color. For example a blue balloon is 10 points, a red balloon is 50 points. Of course you need to play the game carefully since the points on the colors change at each stage. Otherwise you will get less points and lose the game. Because our game is time limited. So you need to catch as many balloons as you can within the given time.

If we click enough balloons we can also set a record by getting high scores. Sometimes we even need to catch the bonus point balloons. Because you get extra points. I highly recommend you not to miss them so you can refresh your record.

200 zems — Bit Ly 200 Zems Free Download

Here are the code files of the game! (Paste the codes into the file with the same name. Pay attention to the file names!)

1 – index.html (HTML File):

Here we save the basic structure of the game. In other words, we save the interface and the codes of the necessary files related to the game 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):

We create the CSS file to edit the visual design of the game. For example, we save style settings such as background colors, text sizes, balloon positions etc 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):

Here we save the code for the logic and interactions of the game. We save function codes such as player clicks the balloons, updates the score or places the balloons on the screen.

// 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 (Setting file – optional):

This file stores settings such as game settings or language options. If you want to add dynamic content or language support you need to use this file.

{
  "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!"
    }
  }
}

If you have added the codes above to the pages, after all these 4 steps, create a folder called 200 Zem. Then add these files into it. And upload it to your server via FTP. Then you can play 200 Zem in a web browser. Hope you will like it.