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

No:33675

138

←

Prev Next

→

City builder where you play as a single person in ..ALL
Developer User13398｜Date and time 24/1/6 4:11:11
Build time 29.474 sec｜Game capacity 3.162KB｜

Script

Sure, here's an example of a simple city builder game implemented as a single HTML file using JavaScript. Since it's designed for smartphone operation, it incorporates pictograms for a more visually appealing experience. Remember, this is a basic implementation, and you can expand and customize it further as per your requirements.

City Builder RPG

Click on an action to progress:

In this simple game, you have four possible actions to choose from: Build, Gather, Quest, and Upgrade. By clicking on the corresponding pictogram buttons, you can perform the respective action. The game keeps track of your resources (gold and wood) and quests completed, and provides alerts to inform you of the outcomes. Enjoy playing as a single person and building your city in RPG style!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>City Builder RPG</title>
  <style>
    body {
      background-color: #cceeff;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    p {
      margin: 10px;
    }
    
    img {
      width: 100px;
      height: 100px;
      margin: 10px;
    }
    
    #actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h1>City Builder RPG</h1>
  <p>Click on an action to progress:</p>
  <div id="actions">
    <img id="buildButton" src="build.png" alt="Build">
    <img id="gatherButton" src="gather.png" alt="Gather">
    <img id="questButton" src="quest.png" alt="Quest">
    <img id="upgradeButton" src="upgrade.png" alt="Upgrade">
  </div>

// Event listeners for actions
    document.getElementById("buildButton").addEventListener("click", buildAction);
    document.getElementById("gatherButton").addEventListener("click", gatherAction);
    document.getElementById("questButton").addEventListener("click", questAction);
    document.getElementById("upgradeButton").addEventListener("click", upgradeAction);

function buildAction() {
      gold -= 10;
      wood -= 5;
      updateResources();
      alert("You built a house!");
    }

function gatherAction() {
      gold += 5;
      wood += 10;
      updateResources();
      alert("You gathered resources!");
    }

function questAction() {
      gold += 20;
      questsCompleted += 1;
      updateResources();
      alert("You completed a quest!");
      if (questsCompleted >= 3) {
        alert("Congratulations! You have won the game!");
      }
    }

function updateResources() {
      document.getElementById("resources").innerText = `Gold: ${gold} | Wood: ${wood}`;
    }

// Initial resource display
    let resourceDisplay = document.createElement("p");
    resourceDisplay.id = "resources";
    resourceDisplay.innerText = "Gold: 0 | Wood: 0";
    document.body.appendChild(resourceDisplay);
  </script>
</body>
</html>
```