くるくるボール

クリックして開始！

このゲームは、画面中央にある赤いボールをクリックしてスコアを稼ぐゲームです。ボールは壁にぶつかると跳ね返ります。スコアが上がると、ボールの速度が変化します。ユーザーランキングは実装していませんが、上記のコードをベースに改善し、ランキングシステムを実装することも可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

は「くるくるボール」です。

HTMLファイルに以下のコードを実装してください。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>くるくるボール</title>
  </head>
  <body>
    <h1>くるくるボール</h1>
    <canvas id="canvas" width="300" height="300"></canvas>
    <p>クリックして開始！</p>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      let ballX;
      let ballY;
      let angle;
      let vx;
      let vy;
      let startTime;
      let elapsedTime;
      let score;
      let isPlaying;

function init() {
        ballX = canvas.width / 2;
        ballY = canvas.height / 2;
        angle = Math.random() * 2 * Math.PI;
        vx = 3 * Math.cos(angle);
        vy = 3 * Math.sin(angle);
        startTime = Date.now();
        elapsedTime = 0;
        score = 0;
        isPlaying = true;
        draw();
      }

canvas.addEventListener('click', (e) => {
        if (!isPlaying) {
          init();
        }
      });

canvas.addEventListener('mousemove', (e) => {
        if (isPlaying) {
          const rect = e.target.getBoundingClientRect();
          const mouseX = e.clientX - rect.left;
          const mouseY = e.clientY - rect.top;
          const distance = Math.sqrt((mouseX - ballX) ** 2 + (mouseY - ballY) ** 2);
          if (distance < 10) {
            score++;
            angle = Math.random() * 2 * Math.PI;
            vx = 3 * Math.cos(angle);
            vy = 3 * Math.sin(angle);
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
          }
        }
      });

init();
    </script>
  </body>
</html>
```

このゲームは、画面中央にある赤いボールをクリックしてスコアを稼ぐゲームです。ボールは壁にぶつかると跳ね返ります。スコアが上がると、ボールの速度が変化します。

ユーザーランキングは実装していませんが、上記のコードをベースに改善し、ランキングシステムを実装することも可能です。