A basic city builder game with money, gems, citizens, density. Citizens adds by the sum of residences each 30 milliseconds, density(km²/p) are calculated by dividing the citizens by the city area. Money adds by the sum of all upgrades each 10 milliseconds. The city area adds by the city level per 1,25km².'s game

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

No:15239

183

←

Prev Next

→

A basic city builder game with money, gems, citize..ALL
Developer User5869｜Date and time 23/9/8 0:01:32
Build time 34.824 sec｜Game capacity 4.081KB｜

Script

City Area: 0 km²

Citizens: 0

Density: 0 km²/p

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>City Builder Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        
        #container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        
        #cityArea {
            text-align: center;
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        #citizens {
            text-align: center;
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        #density {
            text-align: center;
            font-size: 18px;
        }
        
        #buttonContainer {
            text-align: center;
            margin-top: 40px;
        }
        
        #upgradeButton {
            padding: 6px 12px;
            font-size: 16px;
            background-color: #337ab7;
            border: none;
            color: white;
            cursor: pointer;
        }
        
        #upgradeButton:hover {
            background-color: #23527c;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <div id="cityArea">City Area: 0 km²</div>
            <div id="citizens">Citizens: 0</div>
            <div id="density">Density: 0 km²/p</div>
            <div id="buttonContainer">
                <button id="upgradeButton">Upgrade City</button>
            </div>
        </div>
    </div>
    <script>
        // Variables
        var cityArea = 0;
        var citizens = 0;
        var money = 0;
        var gems = 0;
        var cityLevel = 1;
        var upgradeCost = 10;
        
        // Constants
        var residencesPerUpgrade = 100;
        var areaPerLevel = 1.25;
        var populationPerResidence = 10;
        var residentsIncrementInterval = 30;
        var moneyIncrementInterval = 10;
        
        // Functions
        function updateCityArea() {
            var kmSquared = cityArea * areaPerLevel;
            document.getElementById('cityArea').textContent = 'City Area: ' + kmSquared.toFixed(2) + ' km²';
        }
        
        function updateCitizens() {
            document.getElementById('citizens').textContent = 'Citizens: ' + citizens.toLocaleString();
        }
        
        function updateDensity() {
            var density = citizens / (cityArea * areaPerLevel);
            document.getElementById('density').textContent = 'Density: ' + density.toFixed(2) + ' km²/p';
        }
        
        function updateUpgradeButton() {
            var buttonText = 'Upgrade City (+' + residencesPerUpgrade + ' Residences)';
            document.getElementById('upgradeButton').textContent = buttonText + ' - Cost: ' + upgradeCost;
        }
        
        function updateGame() {
            updateCityArea();
            updateCitizens();
            updateDensity();
            updateUpgradeButton();
        }
        
        function incrementResidences() {
            var residencesToAdd = cityLevel * residencesPerUpgrade;
            citizens += residencesToAdd * populationPerResidence;
            updateCitizens();
            updateDensity();
        }
        
        function incrementMoney() {
            money += residencesPerUpgrade * cityLevel;
        }
        
        function upgradeCity() {
            if (money >= upgradeCost) {
                cityLevel++;
                cityArea += cityLevel * areaPerLevel;
                upgradeCost *= 2;
                money -= upgradeCost;
                updateGame();
            } else {
                alert('Insufficient funds to upgrade the city!');
            }
        }
        
        // Event Listeners
        document.getElementById('upgradeButton').addEventListener('click', function() {
            upgradeCity();
        });
        
        // Start the game
        setInterval(incrementResidences, residentsIncrementInterval);
        setInterval(incrementMoney, moneyIncrementInterval);
    </script>
</body>
</html>