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

No:3974

1145

←

Prev Next

→

Coffee Roasting Game
Developer もちきなこ｜Date and time 23/6/27 1:01:52
Build time 38.801 sec｜Game capacity 3.454KB｜

Script

コーヒーの豆を焙煎するゲームを実装します。以下が実際のプログラムです。

コーヒー焙煎ゲーム

焙煎前の豆

豆の色: 緑色

焙煎中の豆

豆の色: 緑色

焙煎度合い: 0%

焙煎後の豆

豆の色: 黒色

焙煎度合い: 0%

このゲームでは、「焙煎開始」ボタンをクリックすると、豆が焙煎されていきます。焙煎度合いが25%、50%、75%、100%に達するたびに、豆の色が変化していきます。最終的には、黒色の焙煎豆が完成します。このゲームはスマホでもプレイ可能であり、絵文字を使用していませんが、豆の画像を表示することで遊び心を織り込んでいます。

←

Prev　Next

→ 　

Back　

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

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

コーヒーの豆を焙煎するゲームを実装します。

以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>コーヒー焙煎ゲーム</title>
  </head>
  <body>
    <h1>コーヒー焙煎ゲーム</h1>

<div>
      <h2>焙煎前の豆</h2>
      <img src="green-beans.png" alt="green-beans" width="200">
      <p>豆の色: <span id="bean-color">緑色</span></p>
    </div>

<div>
      <h2>焙煎中の豆</h2>
      <img src="roasting-beans.png" alt="roasting-beans" width="200">
      <p>豆の色: <span id="roasting-color">緑色</span></p>
      <p>焙煎度合い: <span id="roasting-level">0%</span></p>
    </div>

<div>
      <h2>焙煎後の豆</h2>
      <img src="roasted-beans.png" alt="roasted-beans" width="200">
      <p>豆の色: <span id="roasted-color">黒色</span></p>
      <p>焙煎度合い: <span id="roasting-level">0%</span></p>
    </div>

const updateBeanColor = () => {
        const beanColorSpan = document.querySelector("#bean-color");
        const roastingColorSpan = document.querySelector("#roasting-color");
        const roastedColorSpan = document.querySelector("#roasted-color");

switch (roastingLevel) {
          case 0:
            beanColorSpan.textContent = "緑色";
            roastingColorSpan.textContent = "緑色";
            roastedColorSpan.textContent = "黒色";
            break;
          case 1:
            beanColorSpan.textContent = "緑色";
            roastingColorSpan.textContent = "黄色";
            roastedColorSpan.textContent = "黒色";
            break;
          case 2:
            beanColorSpan.textContent = "緑色";
            roastingColorSpan.textContent = "茶色";
            roastedColorSpan.textContent = "黒色";
            break;
          case 3:
            beanColorSpan.textContent = "茶色";
            roastingColorSpan.textContent = "茶色";
            roastedColorSpan.textContent = "黒色";
            break;
          case 4:
            beanColorSpan.textContent = "黒色";
            roastingColorSpan.textContent = "黒色";
            roastedColorSpan.textContent = "黒色";
            break;
        }
      }

const updateRoastingLevel = () => {
        const roastingLevelSpan = document.querySelectorAll("#roasting-level");
        roastingLevelSpan.forEach(rls => rls.textContent = `${roastingLevel * 25}%`);
      }

const updateRoastingStatus = () => {
        updateBeanColor();
        updateRoastingLevel();
      }

const roastCoffee = () => {
        if (roastingLevel < 4) {
          roastingLevel++;
          setTimeout(roastCoffee, 1000);
          updateRoastingStatus();
        }
      }

document.querySelector("#roast-btn").addEventListener("click", () => {
        roastCoffee();
      });
    </script>
  </body>
</html>
```

このゲームでは、「焙煎開始」ボタンをクリックすると、豆が焙煎されていきます。焙煎度合いが25%、50%、75%、100%に達するたびに、豆の色が変化していきます。最終的には、黒色の焙煎豆が完成します。

このゲームはスマホでもプレイ可能であり、絵文字を使用していませんが、豆の画像を表示することで遊び心を織り込んでいます。