簡素コーヒー焙煎ゲームコーヒー豆を焙煎し、色変化を楽しむゲームですコーヒー豆はJavaScriptによって線画された楕円形です。コーヒー豆の初期の色は#CCB676です。『焙煎機に入れる！』ボタンを押すことで、コーヒー豆の色が変化します。また、『ストップ』ボタンを押すことで、色の変化が止まります。コーヒー豆の色変化には2段階あります。 1段階目は#CCB676から#CC7C26へ、色相と彩度が徐々に動的に変化します。 2段階目は#CC7C26から#472C16へ、彩度と明度が徐々に動的に変化します。これら全ての工程が終わるまで(#CCB676から#472C16になるまで)、30秒かかります。コーヒー豆の色変化を楽しみましょう！'s game

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

No:4398

3572

←

Prev Next

→

簡素コーヒー焙煎ゲームコーヒー豆を焙煎し、色変化を楽しむゲームですコーヒー豆はJavaS..ALL
Developer もちきなこ｜Date and time 23/6/27 21:39:09
Build time 22.008 sec｜Game capacity 1.928KB｜

Script

HTMLファイルを以下のとおり実装します。

JavaScriptはscriptタグで囲み、その中でcanvasの描画、焙煎処理、ボタンイベントの処理を実装しています。30秒かけて#CCB676から#472C16にコーヒー豆の色が変化していきます。『焙煎機に入れる！』ボタンで焙煎を開始し、『ストップ』ボタンで焙煎を停止できます。画面上にはcanvasを用いてコーヒー豆が描画されています。

←

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>
    <canvas id="canvas"></canvas>
    <button onclick="startRoasting()">焙煎機に入れる！</button>
    <button onclick="stopRoasting()">ストップ</button>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const initialColor = '#CCB676';
        let currentColor = initialColor;
        let intervalId;

function drawBean() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.ellipse(canvas.width / 2, canvas.height / 2, 50, 80, 0, 0, 2 * Math.PI);
            ctx.fillStyle = currentColor;
            ctx.fill();
            ctx.closePath();
        }

function startRoasting() {
            intervalId = setInterval(roastBean, 100);
        }

function stopRoasting() {
            clearInterval(intervalId);
        }

drawBean(); // 初期表示用
    </script>
</body>
</html>
```