AI game creator

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

No:21328

169

←

Prev Next

→

放物線
Developer User5574｜Date and time 23/10/15 0:32:41
Build time 74.988 sec｜Game capacity 2.251KB｜

Script

了解です。以下に、放物線のゲームを実装したHTMLファイルの一例を示します。

このコードでは、canvas要素を使ってボールを描画し、重力の影響を受けながら放物線の動きを実現しています。ユーザーがスマホの画面をタッチすると、ボールがジャンプします。ボールが画面端に当たると跳ね返ります。ボールの動きはアニメーションとして描画され、ゲームは無限に続きます。このコードを1枚のHTMLファイルとして保存し、ブラウザで開くとゲームがプレイできるようになります。

←

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>
  <style>
    canvas { background-color: #eee; }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// 描画関数
      function draw() {
        // キャンバスをクリア
        ctx.clearRect(0, 0, width, height);

// ボールを描画
        ctx.beginPath();
        ctx.arc(ballX, ballY, 10, 0, Math.PI*2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();

// ボールの位置を更新
        ballX += ballSpeedX;
        ballY += ballSpeedY;

// ボールの速度を重力によって更新
        ballSpeedY += 0.2;

// ボールがキャンバスの端に当たったら跳ね返る
        if (ballX > width - 10 || ballX < 10) {
          ballSpeedX *= -1;
        }
        if (ballY > height - 10) {
          ballSpeedY *= -0.8;
        }

// アニメーションを続ける
        requestAnimationFrame(draw);
      }

// タッチイベントでボールをジャンプさせる
      document.addEventListener("touchstart", function() {
        ballSpeedY = -8;
      });

// ゲームスタート
      draw();
    };
  </script>
</body>
</html>
```

このコードでは、canvas要素を使ってボールを描画し、重力の影響を受けながら放物線の動きを実現しています。ユーザーがスマホの画面をタッチすると、ボールがジャンプします。ボールが画面端に当たると跳ね返ります。ボールの動きはアニメーションとして描画され、ゲームは無限に続きます。

このコードを1枚のHTMLファイルとして保存し、ブラウザで開くとゲームがプレイできるようになります。