AI game creator

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

No:3598

3284

←

Prev Next

→

＜ルール＞ - ユーザーは飛行機を操作し、障害物を避けながらスコアを稼ぐ。 - スマホを傾けるこ..ALL
Developer User3589｜Date and time 23/6/25 18:58:43
Build time 35.125 sec｜Game capacity 2.894KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>飛行機ゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			width: 100%;
			height: 100vh;
			background-color: skyblue;
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// キャンバスに関する設定
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		let canvasWidth = canvas.width;
		let canvasHeight = canvas.height;
		let score = 0;
		
		// 飛行機の初期設定
		let plane = {
			x: canvasWidth/2,
			y: canvasHeight/2,
			width: 50,
			height: 50
		}
		
		// 障害物の設定
		let obstacle = [];
		
		function randomObstacle() {
			let x = Math.floor(Math.random() * canvasWidth);
			let y = -50;
			let width = Math.floor(Math.random() * 50) + 50;
			let height = Math.floor(Math.random() * 50) + 50;
			return {
				x: x,
				y: y,
				width: width,
				height: height,
				speed: Math.floor(Math.random() * 5) + 5
			}
		}
		
		obstacle.push(randomObstacle());
		
		// スマホの傾きによる飛行機の移動
		window.addEventListener("deviceorientation", function(event) {
			let g = event.gamma;
			plane.x += g * 0.1;
			if (plane.x < 0) {
				plane.x = 0;
			}
			if (plane.x > canvasWidth) {
				plane.x = canvasWidth;
			}
		});
		
		// 衝突判定
		function collision(object1, object2) {
			if (object1.x < object2.x + object2.width &&
				object1.x + object1.width > object2.x &&
				object1.y < object2.y + object2.height &&
				object1.y + object1.height > object2.y) {
				return true;
			} else {
				return false;
			}
		}
		
		// 描画
		function draw() {
			// 背景
			ctx.fillStyle = "skyblue";
			ctx.fillRect(0, 0, canvasWidth, canvasHeight);
			
			// 飛行機
			ctx.fillStyle = "orange";
			ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
			
			// 障害物
			ctx.fillStyle = "gray";
			for (let i = 0; i < obstacle.length; i++) {
				ctx.fillRect(obstacle[i].x, obstacle[i].y, obstacle[i].width, obstacle[i].height);
			}
			
			// スコア
			ctx.fillStyle = "white";
			ctx.font = "24px Arial";
			ctx.fillText("Score: " + score, 10, 30);
			
			// 衝突判定
			for (let i = 0; i < obstacle.length; i++) {
				if (collision(plane, obstacle[i])) {
					ctx.fillStyle = "black";
					ctx.font = "50px Arial";
					ctx.fillText("Game Over", canvasWidth/2 - 125, canvasHeight/2);
					return;
				}
			}
			
			// 障害物の移動と追加
			for (let i = 0; i < obstacle.length; i++) {
				obstacle[i].y += obstacle[i].speed;
				if (obstacle[i].y > canvasHeight) {
					obstacle.splice(i, 1);
				}
			}
			if (score % 500 == 0) {
				obstacle.push(randomObstacle());
			}
			
			// スコアの加算
			score += 1;
			
			// 描画の繰り返し
			requestAnimationFrame(draw);
		}
		
		// ゲーム開始
		draw();
	</script>
</body>
</html>