Search game in the map's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Search game in the map's game | AI game creator

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

No:2190

800

←

Prev Next

→

Search game in the map
Developer User3512｜Date and time 23/6/20 12:53:35
Build time 55.42 sec｜Game capacity 3.788KB｜

Script

を実装しました。以下がプログラムとなります。

探しものゲーム

スコア: 0

この探しものゲームでは、25個のマスの中にアイテムがランダムに配置されます。プレイヤーは、その中から目的のアイテムをクリックしてスコアを稼ぎます。ただし、アイテムが隠されていないマスをクリックするとスコアが減ります。リセットボタンを押すことで、再度ゲームを開始することができます。スマートフォンでも遊びやすいように、マスとアイテムにはそれぞれ絵文字が使われています。また、スマートフォンの画面でも見やすいように、マスとアイテムは50x50の正方形で表示されます。

←

Prev　Next

→ 　

Back　

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

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

を実装しました。

以下がプログラムとなります。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>探しものゲーム</title>
    <meta charset="UTF-8" />
    <style>
      body {
        font-size: 2rem;
        text-align: center;
      }
      .map {
        display: flex;
        flex-wrap: wrap;
        max-width: 90%;
        margin: 0 auto;
      }
      .square {
        height: 50px;
        width: 50px;
        border: solid 1px black;
      }
      .square img {
        height: 50px;
        width: 50px;
        object-fit: contain;
      }
      .title {
        font-size: 4rem;
        margin-top: 2rem;
      }
      .score {
        font-size: 2rem;
        margin-top: 2rem;
      }
      button {
        margin-top: 2rem;
        font-size: 2rem;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="title">探しものゲーム</div>
    <div class="map"></div>
    <div class="score">スコア: 0</div>
    <button id="reset">リセット</button>
    <script>
      const items = [
        "🍎",
        "🍌",
        "🍔",
        "🎁",
        "👑",
        "🎓",
        "📦",
        "📚",
        "💼",
        "💿",
      ];

let score = 0;

const map = document.querySelector(".map");
      const scoreEl = document.querySelector(".score");
      const resetBtn = document.querySelector("#reset");

createMap();

resetBtn.addEventListener("click", () => {
        score = 0;
        scoreEl.textContent = `スコア: ${score}`;
        const squares = document.querySelectorAll(".square");
        squares.forEach((square) => {
          square.classList.remove("found");
        });
        createMap();
      });
    </script>
  </body>
</html>
```

この探しものゲームでは、25個のマスの中にアイテムがランダムに配置されます。プレイヤーは、その中から目的のアイテムをクリックしてスコアを稼ぎます。ただし、アイテムが隠されていないマスをクリックするとスコアが減ります。リセットボタンを押すことで、再度ゲームを開始することができます。

スマートフォンでも遊びやすいように、マスとアイテムにはそれぞれ絵文字が使われています。また、スマートフォンの画面でも見やすいように、マスとアイテムは50x50の正方形で表示されます。