AI game creator

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

No:8602

322

←

Prev Next

→

A city builder
Developer User4222｜Date and time 23/7/17 10:19:48
Build time 21.911 sec｜Game capacity 2.606KB｜

Script

Sure, here's a simple city building game implemented in a single HTML file using JavaScript:

This game represents a city builder where the player can click on individual tiles to build different types of buildings or landmarks (represented by pictograms). Each click will randomly select a building or landmark from the available options and place it on the selected tile. The player can build multiple structures on the tiles. The game interface consists of a grid layout representing the city, and each tile is a div element with a pictogram representing the building or landmark (if any) constructed on that tile. To play the game, simply copy the entire code into a new HTML file and open it in a web browser. You can then click on the tiles to build various structures on the city grid.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple city building game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>City Builder Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

#game-container {
      display: flex;
      flex-wrap: wrap;
      width: 600px;
      margin: 0 auto;
    }

.tile {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>

function generateTiles() {
      for (let i = 0; i < 36; i++) {
        tiles.push(null);
      }
    }

function render() {
      const gameContainer = document.getElementById('game-container');
      gameContainer.innerHTML = '';

tiles.forEach((tile, index) => {
        const tileElement = document.createElement('div');
        tileElement.className = 'tile';
        tileElement.setAttribute('data-index', index);

if (tile) {
          tileElement.textContent = tile;
        }

gameContainer.appendChild(tileElement);
      });
    }

function build(city, index) {
      if (tiles[index] === null) {
        tiles[index] = city;
        render();
      }
    }

function startGame() {
      const cities = ['🏠', '🏢', '⛪', '🌳', '🏫', '🏥'];

generateTiles();
      render();

const gameContainer = document.getElementById('game-container');
      gameContainer.addEventListener('click', (event) => {
        const index = parseInt(event.target.getAttribute('data-index'));

if (!isNaN(index)) {
          const selectedCity = cities[Math.floor(Math.random() * cities.length)];
          build(selectedCity, index);
        }
      });
    }

startGame();
  </script>
</body>
</html>
```

The game interface consists of a grid layout representing the city, and each tile is a div element with a pictogram representing the building or landmark (if any) constructed on that tile.

To play the game, simply copy the entire code into a new HTML file and open it in a web browser. You can then click on the tiles to build various structures on the city grid.