本格派(？)コーヒー焙煎ゲーム以下のルールに従って【コーヒー豆】を焙煎し、【サンプル】に色を近づけるゲームです。 * 前提条件【コーヒー豆】はJavaScriptによって線画された楕円形です。【コーヒー豆】の初期の色は薄緑色(下記、1段階目の最初のいろ)です。【コーヒー豆】の色変化には2段階あり、1段階目は薄緑色から薄い茶色へ、2段階目は薄い茶色から黒へ、徐々に変化しますです。1段階目の初めから2段階目の最後まで、30秒かかります。 * ルール 1,画面には、【サンプル】と【コーヒー豆】が表示されています。【サンプル】には、必ずコーヒー色変化の2段階目の範囲で、ランダムな色が表示されます。 2,プレイヤーは、1で示された【サンプル】の色をめざしてコーヒーを焙煎します。 3,『焙煎機に入れる！』ボタンを押すことで、【コーヒー豆】の色が変化します。 4,『ストップ』ボタンを押すことで、色の変化が止まります。 5,1で示された【サンプル】の色に近いほど高得点が得られます。's game

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

No:5373

2479

←

Prev Next

→

本格派(？)コーヒー焙煎ゲーム以下のルールに従って【コーヒー豆】を焙煎し、【サンプル】に色を近づ..ALL
Developer もちきなこ｜Date and time 23/6/30 0:26:50
Build time 42.554 sec｜Game capacity 4.194KB｜

Script

以下は、要件に基づいて作成したコーヒー焙煎ゲームの実装例です。

このプログラムでは、画面にはサンプルとコーヒー豆が表示されます。サンプルにはランダムな色が表示され、プレイヤーは焙煎機にコーヒーを入れ、コーヒー豆の色を変化させてサンプルに近づけることを目指します。焙煎機に入れるボタンをクリックすると、コーヒー豆の色が段階的に変化し、30秒後にサンプルの色に近い色になります。ストップボタンを押すことで、色の変化を手動で止めることもできます。このプログラムは、ブラウザ上で実行することで遊ぶことができます。

←

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>
    <style>
      #sample {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 0, 0, 1);
        margin-bottom: 20px;
      }
      
      #coffeeBean {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 255, 0, 1);
      }
    </style>
  </head>
  <body>
    <div id="sample"></div>
    <div id="coffeeBean"></div>
    <button id="roast">焙煎機に入れる！</button>
    <button id="stop">ストップ</button>

const sample = document.getElementById('sample');
      const coffeeBean = document.getElementById('coffeeBean');
      const roastButton = document.getElementById('roast');
      const stopButton = document.getElementById('stop');
      
      // 1段階目の色のステップ数
      const step1Steps = 30;
      // 2段階目の色のステップ数
      const step2Steps = 30;
      // 色の変化が終了したかどうかのフラグ
      let colorChanged = false;

// 【コーヒー豆】の現在の色情報を保持するオブジェクト
      const beanColor = {
        red: 0,
        green: 255,
        blue: 0
      };

// 【サンプル】の色情報を更新する関数
      function updateSampleColor() {
        const randomRed = getRandom(0, 255);
        const randomGreen = getRandom(0, 255);
        const randomBlue = getRandom(0, 255);
        sample.style.backgroundColor = `rgb(${randomRed}, ${randomGreen}, ${randomBlue})`;
      }

// 【コーヒー豆】の色情報を更新する関数
      function updateCoffeeBeanColor() {
        coffeeBean.style.backgroundColor = `rgb(${beanColor.red}, ${beanColor.green}, ${beanColor.blue})`;
      }

// 【コーヒー豆】の色を変化させる関数
      function changeBeanColor() {
        if (beanColor.green > 132) {
          beanColor.green -= 4;
        } else {
          if (beanColor.blue < 255) {
            beanColor.blue += 4;
          }
        }
        updateCoffeeBeanColor();
      }

// 【コーヒー豆】の色変化を止める関数
      function stopBeanColorChange() {
        clearInterval(interval);
        colorChanged = true;
      }

// 焙煎機に入れるボタンのクリックイベント
      roastButton.addEventListener('click', function() {
        if (!colorChanged) {
          let step = 0;
          const interval = setInterval(function() {
            if (step < step1Steps) {
              changeBeanColor();
            } else if (step === step1Steps) {
              beanColor.blue = 0;
              updateCoffeeBeanColor();
            } else if (step >= step1Steps + 1 && step < step1Steps + step2Steps) {
              changeBeanColor();
            } else {
              stopBeanColorChange();
              updateSampleColor();
            }
            step++;
          }, 1000 / 30);
        }
      });

// ストップボタンのクリックイベント
      stopButton.addEventListener('click', function() {
        if (!colorChanged) {
          stopBeanColorChange();
          updateSampleColor();
        }
      });
    </script>
  </body>
</html>
```

このプログラムでは、画面にはサンプルとコーヒー豆が表示されます。サンプルにはランダムな色が表示され、プレイヤーは焙煎機にコーヒーを入れ、コーヒー豆の色を変化させてサンプルに近づけることを目指します。

焙煎機に入れるボタンをクリックすると、コーヒー豆の色が段階的に変化し、30秒後にサンプルの色に近い色になります。ストップボタンを押すことで、色の変化を手動で止めることもできます。

このプログラムは、ブラウザ上で実行することで遊ぶことができます。