Click here for free DL of the app version that can save data.

No:15238

187

←

Prev Next

→

A basic city builder game with money, gems, citize..ALL
Developer User5869｜Date and time 23/9/7 23:59:48
Build time 28.444 sec｜Game capacity 3.219KB｜

Script

City Builder Game

Money: 1000

Gems: 0

Citizens: 0

Density (km²/p): 0

City Area (km²): 1.25

Level: 1

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

<html>
  <head>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        // Initial values
        let money = 1000;
        let gems = 0;
        let citizens = 0;
        let cityArea = 1.25;
        let cityLevel = 1;

// Constants
        const upgradeCost = 100;
        const residenceCost = 50;
        const millisecondsInSecond = 1000;
        const millisecondsIn30ms = 30;
        const millisecondsIn10ms = 10;

// HTML elements
        const moneyElement = document.getElementById("money");
        const gemsElement = document.getElementById("gems");
        const citizensElement = document.getElementById("citizens");
        const densityElement = document.getElementById("density");
        const cityAreaElement = document.getElementById("city-area");
        const levelElement = document.getElementById("level");
        const upgradeButton = document.getElementById("upgrade-button");
        const residenceButton = document.getElementById("residence-button");

// Update the game state
        function updateGameState() {
          citizens += Math.floor(cityLevel * millisecondsInSecond / millisecondsIn30ms);
          let cityDensity = citizens / cityArea;
          money += cityLevel * millisecondsInSecond / millisecondsIn10ms;
          updateUI();
        }

// Update the game UI
        function updateUI() {
          moneyElement.textContent = money;
          gemsElement.textContent = gems;
          citizensElement.textContent = citizens;
          densityElement.textContent = citizens / cityArea;
          cityAreaElement.textContent = cityArea;
          levelElement.textContent = cityLevel;

// Disable upgrade button if not enough money
          upgradeButton.disabled = money < upgradeCost;

// Disable residence button if not enough money
          residenceButton.disabled = money < residenceCost;
        }

// Handle upgrade button click
        function upgrade() {
          if (money >= upgradeCost) {
            money -= upgradeCost;
            cityLevel++;
            cityArea += 1.25;
            updateUI();
          }
        }

// Handle residence button click
        function addResidence() {
          if (money >= residenceCost) {
            money -= residenceCost;
            cityArea += 1.25;
            updateUI();
          }
        }

// Start the game
        setInterval(updateGameState, millisecondsIn30ms);

// Event listener for upgrade button
        upgradeButton.addEventListener("click", upgrade);

// Event listener for residence button
        residenceButton.addEventListener("click", addResidence);
      });
    </script>
  </head>
  <body>
    <h1>City Builder Game</h1>
    <p>Money: <span id="money">1000</span></p>
    <p>Gems: <span id="gems">0</span></p>
    <p>Citizens: <span id="citizens">0</span></p>
    <p>Density (km²/p): <span id="density">0</span></p>
    <p>City Area (km²): <span id="city-area">1.25</span></p>
    <p>Level: <span id="level">1</span></p>
    <button id="upgrade-button">Upgrade City</button>
    <button id="residence-button">Build Residence</button>
  </body>
</html>