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

No:7342

4629

←

Prev Next

→

Ballistic Calculation
Developer User4009｜Date and time 23/7/6 22:54:08
Build time 14.45 sec｜Game capacity 2.161KB｜

Script

了解しました。以下に、弾道計算のゲームのサンプルプログラムを示します。

弾道計算ゲーム

このプログラムは、クリックした場所から指定したターゲットまでの距離を計算する弾道計算ゲームです。クリックした位置から弾が発射され、ターゲットに命中するまで弾の軌道を描画します。命中した後に、命中までの距離をポップアップで表示します。

←

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>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>弾道計算ゲーム</h1>
    <canvas id="canvas" width="400" height="400"></canvas>

const targetX = Math.floor(Math.random() * canvas.width);
      const targetY = Math.floor(Math.random() * canvas.height);

ctx.fillStyle = "red";
      ctx.beginPath();
      ctx.arc(targetX, targetY, 10, 0, Math.PI * 2);
      ctx.fill();

canvas.addEventListener("click", function(event) {
        const rect = canvas.getBoundingClientRect();
        const mouseX = event.clientX - rect.left;
        const mouseY = event.clientY - rect.top;

const dx = targetX - mouseX;
        const dy = targetY - mouseY;

const angle = Math.atan2(dy, dx);
        const velocity = 10;

let x = mouseX;
        let y = mouseY;

const drawBullet = setInterval(function() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);

x += Math.cos(angle) * velocity;
          y += Math.sin(angle) * velocity;

ctx.beginPath();
          ctx.arc(x, y, 5, 0, Math.PI * 2);
          ctx.fill();

if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
            clearInterval(drawBullet);

const distance = Math.sqrt((targetX - x) ** 2 + (targetY - y) ** 2);
            alert(`距離: ${distance.toFixed(2)} ピクセル`);
          }
        }, 16);
      });
    </script>
  </body>
</html>
```