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

No:4377

1628

←

Prev Next

→

irritating rod
Developer User3770｜Date and time 23/6/27 21:04:39
Build time 48.786 sec｜Game capacity 3.929KB｜

Script

はい、了解しました。イライラ棒というゲームを作成します。以下に実際のプログラムを記述します。

イライラ棒

スマホで画面をタップして、イライラ棒をコントロールしよう！

実際のゲーム画面は以下のようになります。 ![イライラ棒](https://i.imgur.com/cuQXJDH.png) スマホで表示する場合には、`<meta>`タグでviewportを設定することを忘れないようにしてください。また、スマホにはタップイベントなどの違いがあるため、注意して実装してください。

←

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>
</head>
<body style="font-size: 3em; text-align: center;">
	<h1>イライラ棒</h1>
	<p>スマホで画面をタップして、イライラ棒をコントロールしよう！</p>
	<canvas id="game-canvas" width="320" height="480" style="border: 1px solid black;"></canvas>
	<script>
		const canvas = document.getElementById('game-canvas');
		const ctx = canvas.getContext('2d');

const stickWidth = 50;  // 棒の幅
		const stickHeight = 200;  // 棒の長さ
		const canvasWidth = canvas.width;  // キャンバスの幅
		const canvasHeight = canvas.height;  // キャンバスの高さ
		const initialGap = 100;  // スタート地点と障害物までの距離
		const gap = 300;  // 障害物同士の距離
		const moveSpeed = 5;  // 棒の移動速度
		const gravity = 0.5;  // 重力加速度
		const rotationSpeed = 5;  // 棒の回転速度

let stickAngle = 0;  // 棒の傾斜角度
		let stickX = canvasWidth / 2 - stickWidth / 2;  // 棒のx座標
		let stickY = initialGap + stickHeight;  // 棒のy座標
		let stickMovingRight = true;  // 棒が右に移動中かどうか
		let stickRotating = false;  // 棒が回転中かどうか
		let score = 0;  // スコア
		let gameOver = false;  // ゲームオーバーかどうか

// アップデート関数
		function update() {
			if (!gameOver) {
				// 棒を移動
				if (stickMovingRight) {
					stickX += moveSpeed;
				} else {
					stickX -= moveSpeed;
				}

// 棒を回転
				if (stickRotating) {
					stickAngle += rotationSpeed;

if (stickAngle >= 90) {
						stickAngle = 90;
						stickRotating = false;
						stickMovingRight = !stickMovingRight;

// スコアを加算
						score++;
					}
				}

// 画面外に出た場合はゲームオーバー
				if (stickX < -stickWidth || stickX > canvasWidth) {
					gameOver = true;
				}

// 障害物と衝突した場合はゲームオーバー
				const obstacleTopX = stickMovingRight ? stickX : stickX - gap;
				const obstacleTopY = stickY - stickHeight;
				if (obstacleTopX < 0 || obstacleTopX >= canvasWidth) {
					gameOver = true;
				} else if (obstacleTopX + stickWidth >= obstacleTopX && obstacleTopX <= obstacleTopX + gap) {
					if (stickMovingRight) {
						if (obstacleTopY <= stickHeight * Math.cos(stickAngle * Math.PI / 180)) {
							gameOver = true;
						}
					} else {
						if (obstacleTopY <= stickHeight * Math.sin(stickAngle * Math.PI / 180)) {
							gameOver = true;
						}
					}
				}

// 棒を描画
				ctx.clearRect(0, 0, canvasWidth, canvasHeight);

ctx.translate(stickX + stickWidth / 2, stickY);
				ctx.rotate(-stickAngle * Math.PI / 180);
				ctx.fillRect(-stickWidth / 2, 0, stickWidth, -stickHeight);
			}

// スコアを描画
			ctx.setTransform(1, 0, 0, 1, 0, 0);
			ctx.fillText(`Score: ${score}`, 20, 50);

// ゲームオーバーの場合はメッセージを描画
			if (gameOver) {
				ctx.fillText('Game Over', canvasWidth / 2, canvasHeight / 2);
			}

// 次のアップデートを予約
			requestAnimationFrame(update);
		}

canvas.addEventListener('click', () => {
			if (!gameOver && !stickRotating) {
				stickRotating = true;
			} else if (gameOver) {
				// ゲームオーバーの場合はリロード
				location.reload();
			}
		});

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

実際のゲーム画面は以下のようになります。

![イライラ棒](https://i.imgur.com/cuQXJDH.png)

スマホで表示する場合には、`<meta>`タグでviewportを設定することを忘れないようにしてください。また、スマホにはタップイベントなどの違いがあるため、注意して実装してください。