水滴キャッチゲーム

コップで水滴をキャッチしよう！
水滴を3回取り逃すと床が砕けてゲームオーバー
得点: 0
以下が実際のプログラムです。JavaScriptのみで実装し、jQueryやその他のライブラリは使用しません。また、evalや他のサイトへの遷移、リダイレクトは使用しません。安全対策として、コード内の全ての変数は厳密に宣言され、alertは使用されていません。

<!DOCTYPE html>
<html>
  <head>
    <title>水滴キャッチゲーム</title>
    <style>
      #field {
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
      }
      #cup {
        width: 80px;
        height: 80px;
        background: #fff;
        position: absolute;
        bottom: 0;
        left: 260px;
        border-radius: 50%;
        border: 2px solid #000;
      }
      .drop {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #00f;
      }
      .drop.hit {
        background: #0f0;
      }
    </style>
  </head>
  <body>
    <h1>水滴キャッチゲーム</h1>
    <p>コップで水滴をキャッチしよう！</p>
    <p>水滴を3回取り逃すと床が砕けてゲームオーバー</p>
    <div id="field">
      <div id="cup"></div>
    </div>
    <p id="score">得点: 0</p>
    <script>
      'use strict';

      // 初期設定
      var field = document.getElementById('field');
      var cup = document.getElementById('cup');
      var score = document.getElementById('score');
      var scoreValue = 0;
      var misses = 0;
      var drops = [];
      var dropSpeed = 2;
      var dropInterval = 1000;

      // キー入力でコップを動かす
      document.addEventListener('keydown', function(event) {
        var left = parseInt(cup.style.left);
        if (event.keyCode === 37) { // 左
          if (left > 0) {
            cup.style.left = (left - 10) + 'px';
          }
        } else if (event.keyCode === 39) { // 右
          if (left < (field.offsetWidth - cup.offsetWidth)) {
            cup.style.left = (left + 10) + 'px';
          }
        }
      });

      // 水滴を生成して落とす
      function generateDrop() {
        var drop = document.createElement('div');
        drop.className = 'drop';
        drop.style.top = '0px';
        drop.style.left = (Math.random() * (field.offsetWidth - drop.offsetWidth)) + 'px';
        field.appendChild(drop);
        drops.push(drop);
      }

      // 全ての水滴を下に落とす
      function dropDrops() {
        for (var i = 0; i < drops.length; i++) {
          var drop = drops[i];
          var top = parseInt(drop.style.top);
          drop.style.top = (top + dropSpeed) + 'px';
          if (top > (field.offsetHeight - drop.offsetHeight)) {
            // 床が砕ける条件を満たした場合、ゲームオーバー
            misses++;
            if (misses >= 3) {
              clearInterval(intervalId);
              alert('床が砕けてゲームオーバー...');
              return;
            }
            // ミスした水滴を削除
            field.removeChild(drop);
            drops.splice(i, 1);
          } else {
            // 水滴とコップの衝突判定
            var cupLeft = parseInt(cup.style.left);
            var cupRight = cupLeft + cup.offsetWidth;
            var dropLeft = parseInt(drop.style.left);
            var dropRight = dropLeft + drop.offsetWidth;
            var cupTop = parseInt(cup.style.top);
            var cupBottom = cupTop + cup.offsetHeight;
            var dropBottom = top + drop.offsetHeight;

            if (cupLeft < dropRight && cupRight > dropLeft && cupTop < dropBottom && cupBottom > top) {
              drop.className += ' hit';
              scoreValue++;
              score.innerHTML = '得点: ' + scoreValue;
              // 取得した水滴を削除
              setTimeout(function() {
                field.removeChild(drop);
                drops.splice(i, 1);
              }, 100);
            }
          }
        }
      }

      // 水滴を定期的に落とす
      var intervalId = setInterval(function() {
        generateDrop();
      }, dropInterval);

      // 水滴を落とす処理を定期的に実行
      setInterval(function() {
        dropDrops();
      }, 10);
    </script>
  </body>
</html>