AI game creator

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

No:22139

115

←

Prev Next

→

A city builder game
Developer User4580｜Date and time 23/10/21 3:09:10
Build time 61.425 sec｜Game capacity 3.354KB｜

Script

Sure! Here's a simple implementation of a city builder game in a single HTML file:

This game allows the player to select different building types by tapping on corresponding pictograms displayed on the screen. The selected building type is then logged to the console. Please note that this is a simple implementation and doesn't include advanced game mechanics. You can enhance it further by adding more features like resource management, population growth, and more complex interactions.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's a simple implementation of a city builder game in a single HTML file:

```html
<!DOCTYPE html>
<html>

<head>
    <title>City Builder Game</title>
</head>

<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    
    <script>
        // Initialize game variables
        let canvas, ctx;
        let citySize = 0;
        
        // Function to setup the game
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            
            // Handle touch events
            canvas.addEventListener("touchstart", handleTouchStart, false);
            canvas.addEventListener("touchend", handleTouchEnd, false);
            
            // Start the game loop
            gameLoop();
        }
        
        // Function to handle touch start event
        function handleTouchStart(event) {
            // Get touch position
            let touchX = event.touches[0].pageX;
            let touchY = event.touches[0].pageY;
            
            // Check which pictogram is selected
            if (touchY < 200) {
                citySize++;
            } else if (touchY > 400) {
                citySize--;
                if (citySize < 0) {
                    citySize = 0;
                }
            }
        }
        
        // Function to handle touch end event
        function handleTouchEnd() {
            // Perform necessary actions based on the selected pictogram
            if (citySize === 0) {
                console.log("Build a small house");
            } else if (citySize === 1) {
                console.log("Build a tall apartment");
            } else if (citySize === 2) {
                console.log("Build a shopping center");
            }
        }
        
        // Game loop
        function gameLoop() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw pictograms
            ctx.fillStyle = "blue";
            ctx.fillRect(0, 0, canvas.width, 200); // Small house
            ctx.fillStyle = "green";
            ctx.fillRect(0, 200, canvas.width, 200); // Tall apartment
            ctx.fillStyle = "yellow";
            ctx.fillRect(0, 400, canvas.width, 200); // Shopping center
            
            // Draw selected pictogram border
            ctx.strokeStyle = "red";
            ctx.lineWidth = 5;
            if (citySize === 0) {
                ctx.strokeRect(0, 0, canvas.width, 200);
            } else if (citySize === 1) {
                ctx.strokeRect(0, 200, canvas.width, 200);
            } else if (citySize === 2) {
                ctx.strokeRect(0, 400, canvas.width, 200);
            }
            
            // Request next animation frame
            requestAnimationFrame(gameLoop);
        }
        
        // Start the game
        init();
    </script>
</body>

</html>
```

This game allows the player to select different building types by tapping on corresponding pictograms displayed on the screen. The selected building type is then logged to the console.

Please note that this is a simple implementation and doesn't include advanced game mechanics. You can enhance it further by adding more features like resource management, population growth, and more complex interactions.