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

No:7021

163

←

Prev Next

→

Farming Games
Developer User3960｜Date and time 23/7/4 22:45:41
Build time 23.138 sec｜Game capacity 2.62KB｜

Script

了解しました。以下は、農園ゲームの実装例です。

農園ゲーム

このプログラムでは、9つの作物が表示され、作物をクリックすることで水やりすることができます。クリックした作物と、それに隣接する作物が水やり済みの状態になります。各作物は絵文字で表示され、水やり済みの作物は緑色になります。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下は、農園ゲームの実装例です。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>農園ゲーム</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      #field {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
      .crop {
        font-size: 50px;
        width: 100px;
        height: 100px;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
        background-color: #c5e1a5;
      }
      .watered {
        background-color: #81c784;
      }
    </style>
  </head>
  <body>
    <h1>農園ゲーム</h1>
    <div id="field"></div>

// フィールドを初期化する
      function initializeField() {
        const field = document.getElementById("field");
        field.innerHTML = "";

for (let i = 0; i < fieldSize; i++) {
          const crop = document.createElement("div");
          crop.className = "crop";
          crop.dataset.index = i;
          crop.innerText = crops[Math.floor(Math.random() * crops.length)];

crop.addEventListener("click", waterCrop);

field.appendChild(crop);
        }
      }

// 作物を水やりする
      function waterCrop(event) {
        const crop = event.target;

// 水やり済みのクラスを追加する
        crop.classList.add("watered");
        crop.removeEventListener("click", waterCrop);

// クリックされた作物のインデックスを取得する
        const index = parseInt(crop.dataset.index);

// 隣接する作物も水やりする
        const adjacentIndexes = [index - 3, index - 1, index + 1, index + 3];
        for (const adjacentIndex of adjacentIndexes) {
          if (adjacentIndex >= 0 && adjacentIndex < fieldSize) {
            const adjacentCrop = document.querySelector(
              `.crop[data-index="${adjacentIndex}"]`
            );
            adjacentCrop.classList.add("watered");
            adjacentCrop.removeEventListener("click", waterCrop);
          }
        }
      }

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