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

No:4535

753

←

Prev Next

→

Guided parachute drops to a small goal
Developer User3694｜Date and time 23/6/28 3:27:21
Build time 32.665 sec｜Game capacity 2.877KB｜

Script

するゲームを作ります。プレイヤーは画面タップでパラシュートを開閉し、風向きや強さによってコントロールします。gameOver時にはスコア表示などを行い、再プレイ可能です。以下が実装例になります：

パラシュートゲーム

画面タップでパラシュートを開閉し、小さなゴールに落下させましょう。

Score: 0

←

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>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>パラシュートゲーム</h1>
	<p>画面タップでパラシュートを開閉し、小さなゴールに落下させましょう。</p>
	<p id="score">Score: 0</p>
	<canvas id="gameCanvas" width="300" height="500"></canvas>
	<script>
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var gameRunning = true;
		var chuteOpen = false;
		var chuteWidth = 40;
		var chuteHeight = 80;
		var chuteX = canvas.width/2 - chuteWidth/2;
		var chuteY = 0;
		var chuteVelY = 0;
		var chuteAcceleration = 0.1;
		var numTaps = 0;
		var goalX = canvas.width/2 - 20;
		var goalY = canvas.height - 50;
		var goalSize = 40;

canvas.addEventListener("touchstart", function() {
			chuteOpen = !chuteOpen;
			numTaps++;
		});

function update() {
			if (chuteOpen) {
				chuteVelY += chuteAcceleration;
			} else {
				chuteVelY -= chuteAcceleration;
			}
			chuteY += chuteVelY;

// calculate wind speed based on number of taps
			var windSpeed = ((numTaps % 10) - 5) / 2;

// update chute position based on wind speed
			chuteX += windSpeed;

// check for collision with goal
			if (chuteY + chuteHeight >= goalY && chuteX + chuteWidth >= goalX && chuteX <= goalX + goalSize) {
				score += 10;
				reset();
			}

// check for collision with ground
			if (chuteY + chuteHeight >= canvas.height) {
				gameRunning = false;
			}

// update score
			document.getElementById("score").innerHTML = "Score: " + score;
		}

function draw() {
			// clear canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// draw chute
			ctx.fillStyle = "#0066CC";
			ctx.fillRect(chuteX, chuteY, chuteWidth, chuteHeight);

// draw goal
			ctx.fillStyle = "#00CC00";
			ctx.fillRect(goalX, goalY, goalSize, goalSize);

// draw ground
			ctx.fillStyle = "#663300";
			ctx.fillRect(0, canvas.height - 20, canvas.width, 20);
		}

function gameLoop() {
			update();
			draw();

if (gameRunning) {
				window.requestAnimationFrame(gameLoop);
			} else {
				ctx.font = "30px Arial";
				ctx.fillStyle = "red";
				ctx.fillText("Game Over", canvas.width/2 - 75, canvas.height/2);
			}
		}

function reset() {
			chuteOpen = false;
			chuteX = canvas.width/2 - chuteWidth/2;
			chuteY = 0;
			chuteVelY = 0;
			numTaps = 0;
			goalX = Math.random() * (canvas.width - goalSize);
			score += 5;
		}

// start game loop
		gameLoop();
	</script>
</body>
</html>