Idle city online game show the world's game

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

No:38110

←

Prev Next

→

Idle city online game show the world
Developer User17224｜Date and time 24/1/22 15:18:38
Build time 12.38 sec｜Game capacity 3.066KB｜

Script

This is a simple Idle City Online game implemented using HTML and JavaScript. In this game, you start with a city level of 1, population 0, and money 0. The objective is to increase your city level by clicking on the "Level Up" button and earn population and money. The game is played on a canvas element, and the game loop updates the game state every second. The population and money increase based on the current city level. The game screen shows the city image, city level, population, and money. To play the game, you need to click on the "Level Up" button, located at the bottom of the canvas, to increase the city level. As the city level increases, the population and money increase as well. Please note that the provided image file "emozi_all/city.png" needs to be placed in the same folder as the HTML file for the image to display correctly. Have fun playing Idle City Online game and show the world your thriving city!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Idle City Online Game</title>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Pictogram images
    var cityImage = new Image();
    cityImage.src = "city.png";

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

// Start the game loop
      gameLoopInterval = setInterval(gameLoop, 1000);
    }

// Main game loop
    function gameLoop() {
      updateGame();
      drawGame();
    }

// Update game state
    function updateGame() {
      // Increment population and money based on city level
      population += cityLevel * 10;
      money += cityLevel * 100;
    }

// Draw game objects on the canvas
    function drawGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw city image
      ctx.drawImage(cityImage, canvas.width / 2 - 100, canvas.height / 2 - 100, 200, 200);

// Draw city level text
      ctx.font = "24px Arial";
      ctx.fillStyle = "white";
      ctx.fillText("City Level: " + cityLevel, 10, 30);

// Draw population text
      ctx.fillText("Population: " + population, 10, 60);

// Draw money text
      ctx.fillText("Money: " + money, 10, 90);
    }

// Increase city level when button is clicked
    function levelUp() {
      cityLevel++;
    }

// Handle user input
    document.addEventListener("click", function(event) {
      // Check if the click is within the bounds of the level up button
      if (
        event.clientX >= canvas.width / 2 - 50 &&
        event.clientX <= canvas.width / 2 + 50 &&
        event.clientY >= canvas.height - 100 &&
        event.clientY <= canvas.height - 50
      ) {
        levelUp();
      }
    });

// Start the game when the page is loaded
    window.onload = function() {
      init();
    };
  </script>
</body>
</html>
This is a simple Idle City Online game implemented using HTML and JavaScript. In this game, you start with a city level of 1, population 0, and money 0. The objective is to increase your city level by clicking on the "Level Up" button and earn population and money.

The game is played on a canvas element, and the game loop updates the game state every second. The population and money increase based on the current city level. The game screen shows the city image, city level, population, and money.

To play the game, you need to click on the "Level Up" button, located at the bottom of the canvas, to increase the city level. As the city level increases, the population and money increase as well.

Please note that the provided image file "city.png" needs to be placed in the same folder as the HTML file for the image to display correctly.

Have fun playing Idle City Online game and show the world your thriving city!