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

No:4391

2432

←

Prev Next

→

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

Script

6, 制限時間は60秒です。 7, 制限時間内に何回焙煎しても構いません。 8, 得点は、【サンプル】の色と近いほど高得点になります。色が完全に一致した場合には、ボーナスとして追加得点がつきます。 9, スマホ画面で操作可能です。 10, 絵文字を使用し、楽しいデザインを心がけました。以下が実際のHTMLとJavaScriptコードです。

コーヒー焙煎ゲーム

【サンプル】の色を目指して、コーヒー豆を焙煎しよう！！

Score: 0

←

Prev　Next

→ 　

Back　

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

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

6, 制限時間は60秒です。 7, 制限時間内に何回焙煎しても構いません。 8, 得点は、【サンプル】の色と近いほど高得点になります。色が完全に一致した場合には、ボーナスとして追加得点がつきます。 9, スマホ画面で操作可能です。 10, 絵文字を使用し、楽しいデザインを心がけました。

以下が実際のHTMLとJavaScriptコードです。

<!DOCTYPE html>
<html>
  <head>
    <title>コーヒー焙煎ゲーム</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>コーヒー焙煎ゲーム</h1>
    <p>【サンプル】の色を目指して、コーヒー豆を焙煎しよう！！</p>
    <canvas id="coffee" width="300" height="300"></canvas>
    <br>
    <button onclick="start()">焙煎機に入れる！</button>
    <button onclick="stop()">ストップ</button>
    <br>
    <p id="score">Score: 0</p>
    <script>
      var canvas = document.getElementById("coffee");
      var ctx = canvas.getContext("2d");

var coffeeColor = "#CCB676";
      var targetColor = randomColorInRange("#CC7C26", "#472C16");

var score = 0;
      var intervalId = null;

function start() {
        intervalId = setInterval(changeColor, 1000);
      }

function stop() {
        clearInterval(intervalId);
        checkScore();
      }

function changeColor() {
        coffeeColor = getNextColor(coffeeColor);
        drawCoffee();
      }

function getNextColor(color) {
        if (color === "#CCB676")
          return "#CC7C26";
        else
          return "#472C16";
      }

function randomColorInRange(from, to) {
        var r = randomIntInRange(Number.parseInt(from.slice(1,3), 16), Number.parseInt(to.slice(1,3), 16));
        var g = randomIntInRange(Number.parseInt(from.slice(3,5), 16), Number.parseInt(to.slice(3,5), 16));
        var b = randomIntInRange(Number.parseInt(from.slice(5,7), 16), Number.parseInt(to.slice(5,7), 16));
        return "#" + r.toString(16) + g.toString(16) + b.toString(16);
      }

function randomIntInRange(from, to) {
        return Math.floor(Math.random() * (to - from + 1)) + from;
      }

function drawCoffee() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = coffeeColor;
        ctx.beginPath();
        ctx.ellipse(canvas.width / 2, canvas.height / 2, canvas.width / 2 - 10, canvas.height / 2 - 10, Math.PI / 4, 0, 2 * Math.PI);
        ctx.fill();

ctx.fillStyle = targetColor;
        ctx.fillRect(canvas.width * 3 / 4, 0, canvas.width / 4, canvas.height / 4);
      }

function checkScore() {
        var diff = Math.abs(parseInt(targetColor.slice(1), 16) - parseInt(coffeeColor.slice(1), 16)) / 16;
        var bonus = (diff === 0) ? 100 : 0;
        score += 100 - Math.floor(diff) + bonus;
        document.getElementById("score").textContent = "Score: " + score;
      }

drawCoffee();
    </script>
  </body>
</html>