Resource Collector game with octagon tiles.'s game | AI game creator

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

No:24230

82

Resource Collector game with octagon tiles.
Developer User11361｜Date and time 23/11/6 15:45:26
Build time 60.475 sec｜Game capacity 3.027KB｜

Score: 0

Explanation: This code implements a resource collector game using octagon tiles. The game is designed to be played on a smartphone. It uses HTML, CSS, and JavaScript to create a single HTML file that contains the game. The game starts by displaying a "Start Game" button and an empty score div. When the button is clicked, the game begins. Octagon tiles are dynamically created and displayed every second. Each tile contains a random pictogram image. When a tile is clicked, the score increases by one and the tile is removed. The game keeps track of the score and updates it on the screen after each tile click. To prevent the screen from being overloaded with tiles, the oldest tiles (more than 40) are removed from the display. You would need to have the pictogram images (named pictogram1.png, pictogram2.png, etc.) saved in an "img" folder located in the same directory as the HTML file for the images to be properly displayed. Note: This is just a basic implementation of a resource collector game. You can modify and expand upon it to add more features or customize it further according to your requirements.

→ 　

0　

0　

[PR]現在の売れ筋Kindle本ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f8f8f8;
      text-align: center;
      font-family: Arial, sans-serif;
    }

#top {
      margin-top: 20px;
    }

#score {
      font-size: 24px;
      margin-bottom: 10px;
    }

.tile {
      display: inline-block;
      width: 80px;
      height: 80px;
      margin: 5px;
      border-radius: 10px;
      background-color: #f1f1f1;
      cursor: pointer;
    }

.tile img {
      width: 50px;
      height: 50px;
      margin: 15px;
    }
  </style>
</head>
<body>
  <div id="top">
    <div id="score">Score: 0</div>
    <div id="tiles"></div>
    <button onclick="startGame()">Start Game</button>
  </div>

<script>
    var score = 0;
    var tiles = [];

function createTile() {
      var tile = document.createElement("div");
      tile.className = "tile";
      var randomImg = Math.floor(Math.random() * 4) + 1;
      tile.innerHTML = '<img src="img/pictogram' + randomImg + '.png">';
      tile.addEventListener("click", function() {
        score++;
        updateScore();
        this.remove();
      });
      return tile;
    }

function generateTiles() {
      var tilesDiv = document.getElementById("tiles");
      tilesDiv.innerHTML = "";
      for (var i = 0; i < 20; i++) {
        var tile = createTile();
        tiles.push(tile);
        tilesDiv.appendChild(tile);
      }
    }

function startGame() {
      score = 0;
      updateScore();
      generateTiles();
      setInterval(function() {
        var tile = createTile();
        tiles.push(tile);
        document.getElementById("tiles").appendChild(tile);
        if (tiles.length > 40) {
          tiles[0].remove();
          tiles.shift();
        }
      }, 1000);
    }

function updateScore() {
      document.getElementById("score").textContent = "Score: " + score;
    }
  </script>
</body>
</html>
```

Explanation:
This code implements a resource collector game using octagon tiles. The game is designed to be played on a smartphone. It uses HTML, CSS, and JavaScript to create a single HTML file that contains the game.

The game starts by displaying a "Start Game" button and an empty score div. When the button is clicked, the game begins.

Octagon tiles are dynamically created and displayed every second. Each tile contains a random pictogram image. When a tile is clicked, the score increases by one and the tile is removed.

The game keeps track of the score and updates it on the screen after each tile click. To prevent the screen from being overloaded with tiles, the oldest tiles (more than 40) are removed from the display.

You would need to have the pictogram images (named pictogram1.png, pictogram2.png, etc.) saved in an "img" folder located in the same directory as the HTML file for the images to be properly displayed.

Note: This is just a basic implementation of a resource collector game. You can modify and expand upon it to add more features or customize it further according to your requirements.