City building game with money display. The commercial buildings add 1 money and reduce 25 of the population. Homes and appartements add 1 money and add 50 of the population. Industry add 5 money and reduce 75 of the population. Energy and water buildings costs 25 of money. Schools and universities add the research points and costs 100 of money. The research points are recommended for more others buildings buttons.'s game

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

No:13400

100

←

Prev Next

→

City building game with money display. The commerc..ALL
Developer User5869｜Date and time 23/8/28 4:17:41
Build time 10.95 sec｜Game capacity 3.047KB｜

Script

Money: 0

Population: 0

Industry

Energy

Water

Schools

Universities

Money: 0

Research Points: 0

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>City Building Game</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#game-container {
            display: flex;
            flex-wrap: wrap;
            width: 400px;
        }

.building {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 5px;
            background-color: #f0f0f0;
        }

.stats {
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="money" class="building" onclick="addMoney(1, -25)">Money: 0</div>
        <div id="population" class="building" onclick="addMoney(1, 50)">Population: 0</div>
        <div id="industry" class="building" onclick="addMoney(5, -75)">Industry</div>
        <div id="energy" class="building" onclick="buyBuilding('energy')">Energy</div>
        <div id="water" class="building" onclick="buyBuilding('water')">Water</div>
        <div id="schools" class="building" onclick="buyBuilding('schools')">Schools</div>
        <div id="universities" class="building" onclick="buyBuilding('universities')">Universities</div>
    </div>
    <div class="stats">
        <div id="money-display">Money: 0</div>
        <div id="research-points">Research Points: 0</div>
    </div>

function updateStats() {
            document.getElementById('money').innerText = "Money: " + money;
            document.getElementById('population').innerText = "Population: " + population;
            document.getElementById('money-display').innerText = "Money: " + money;
            document.getElementById('research-points').innerText = "Research Points: " + researchPoints;
        }

function addMoney(value, populationChange) {
            money += value;
            population += populationChange;
            updateStats();
        }

function buyBuilding(building) {
            if (money >= 25) {
                money -= 25;
                updateStats();

switch (building) {
                    case 'energy':
                    case 'water':
                        addMoney(0, 0);
                        break;
                    case 'schools':
                    case 'universities':
                        addMoney(0, 0);
                        researchPoints += 1;
                        updateStats();
                        break;
                }
            } else {
                alert("Not enough money!");
            }
        }
    </script>
</body>
</html>