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

No:3923

2045

←

Prev Next

→

parabola
Developer sayaensm｜Date and time 23/6/26 23:48:34
Build time 23.797 sec｜Game capacity 1.844KB｜

Script

を描くゲームを作ります。以下が実際のプログラムになります。

放物線ゲーム

このプログラムは、スマホの画面をタッチしてボールを打ち上げ、重力に従って放物線を描く簡単なゲームです。ボールが画面外に出ると反射して戻ってきます。スマホの画面操作にも対応しています。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

を描くゲームを作ります。

以下が実際のプログラムになります。

```html
<!DOCTYPE html>
<html>

<head>
	<title>放物線ゲーム</title>
</head>

<body>
	<h1>放物線ゲーム</h1>
	
	<canvas id="game-canvas"></canvas>

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

// ボールの初期座標と速度
		let x = canvas.width / 2;
		let y = canvas.height / 2;
		let vx = 0;
		let vy = 0;

// ボールを描画する関数
		function drawBall() {
			ctx.beginPath();
			ctx.arc(x, y, 20, 0, Math.PI * 2);
			ctx.fillStyle = "yellow";
			ctx.fill();
			ctx.closePath();
		}

// フレームごとに実行する関数
		function update() {
			// 重力を加える
			vy += 1;

// ボールの速度を更新
			x += vx;
			y += vy;

// 画面の端にボールが来たら反射する
			if (x < 0 || x > canvas.width) {
				vx *= -1;
			}
			if (y < 0 || y > canvas.height) {
				vy *= -0.8;
				y = canvas.height;
			}

// ボールを描画
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBall();

// 次のフレームを要求
			requestAnimationFrame(update);
		}

// ゲーム開始
		requestAnimationFrame(update);

// スマホ向けにタッチ操作で速度を変更する
		canvas.addEventListener("touchstart", function(event) {
			vx = (event.touches[0].clientX - x) / 10;
			vy = (event.touches[0].clientY - y) / 10;
		});
	</script>
</body>

</html>
```