どうスクのアプデをしない開発者ひさしを強制的にアプデさせるゲーム

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>どうスクのアプデをしない開発者ひさしを強制的にアプデさせるゲーム</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>どうスクのアプデをしない開発者ひさしを強制的にアプデさせるゲーム</h1>
  <canvas id="canvas" width="400" height="600"></canvas>

// ゲームの概要
    context.font = 'bold 24px Arial';
    context.fillStyle = 'black';
    context.fillText('どうスクのアプデをしない開発者ひさしを強制的にアプデさせるゲーム', 10, 50);
    context.font = 'bold 16px Arial';
    context.fillText('ひさしが隠れている5つの窓をクリックして、アプデを強制させよう！', 40, 100);

// ひさしの出現位置とスコア
    const h = 100; // y座標
    const w = canvas.width / 5; // ひとつの窓の幅
    const score = 0;

// ランダムにひさしが出現する
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = 'yellow';
      context.fillRect(w * randomIndex(), h, w, w);
    }

// クリックした場所にひさしがいるか判定する
    function onClick(e) {
      e.preventDefault();
      const rect = e.target.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const clickedIndex = Math.floor(x / w);
      if (clickedIndex === randomIndex()) {
        score++;
        alert('アプデが強制されました！ 今回のスコア：' + score);
      } else {
        alert('残念… やり直してください。');
      }
      draw();
    }

// 数字をランダムに生成する
    function randomIndex() {
      return Math.floor(Math.random() * 5);
    }

draw();
    canvas.addEventListener('click', onClick);
  </script>
</body>
</html>