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

No:501

257

←

Prev Next

→

bat swing
Developer User2906｜Date and time 23/6/15 3:13:50
Build time 36.175 sec｜Game capacity 4.805KB｜

Script

こうもりブランコ

※ゲームの概要：プレイヤーはこうもりを操作して、空から降ってくる爆弾を避けながらブランコの上を飛び回り、スコアを競います。当たり判定とリトライ機能を実装しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>こうもりブランコ</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #89cff0;
			font-family: Arial, sans-serif;
		}
		
		h1 {
			text-align: center;
			font-size: 2em;
			margin: 0;
			padding: 1em 0;
		}
		
		#canvas {
			display: block;
			margin: 0 auto;
			background-color: #ffffff;
			box-shadow: 5px 5px 5px #444444;
		}
		
		.button {
			display: block;
			margin: 1em auto;
			padding: 1em;
			background-color: #ec407a;
			color: #ffffff;
			text-align: center;
			border-radius: 10px;
			box-shadow: 3px 3px 3px #444444;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>こうもりブランコ</h1>
	<canvas id="canvas" width="320" height="480"></canvas>
	<button class="button" id="startButton">スタート！</button>
	<script>
		// キャンバスの設定
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		
		// こうもりの設定
		var batImg = new Image();
		batImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/bat_1f987.png";
		var batSize = 64;
		var batX = canvas.width / 2 - batSize / 2;
		var batY = canvas.height - batSize * 2;
		var batSpeed = 5;
		var batDirection = "right";
		
		// ブランコの設定
		var swingImg = new Image();
		swingImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/ferris-wheel_1f3a1.png";
		var swingX = canvas.width / 2 - batSize / 2;
		var swingY = canvas.height - batSize * 2 - 120;
		
		// 障害物の設定
		var obstacleImg = new Image();
		obstacleImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/bomb_1f4a3.png";
		var obstacleSize = 32;
		var obstacleX = Math.random() * (canvas.width - obstacleSize);
		var obstacleY = -obstacleSize;
		var obstacleSpeed = 3;
		
		// スコアの設定
		var score = 0;
		
		// ゲーム開始
		function startGame() {
			// スタートボタン非表示
			document.getElementById("startButton").style.display = "none";
			
			// ゲームループ開始
			setInterval(update, 20);
			
			// キー入力処理
			document.addEventListener("keydown", function(event) {
				if (event.key === "ArrowLeft") {
					batDirection = "left";
				} else if (event.key === "ArrowRight") {
					batDirection = "right";
				}
			});
		}
		
		// ゲームループ
		function update() {
			// 画面クリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			// 障害物描画
			ctx.drawImage(obstacleImg, obstacleX, obstacleY, obstacleSize, obstacleSize);
			
			// ブランコ描画
			ctx.drawImage(swingImg, swingX, swingY, batSize, batSize);
			
			// こうもり描画
			ctx.drawImage(batImg, batX, batY, batSize, batSize);
			
			// 障害物移動
			obstacleY += obstacleSpeed;
			if (obstacleY > canvas.height) {
				obstacleX = Math.random() * (canvas.width - obstacleSize);
				obstacleY = -obstacleSize;
			}
			
			// こうもり移動
			if (batDirection === "left") {
				batX -= batSpeed;
			} else if (batDirection === "right") {
				batX += batSpeed;
			}
			if (batX < 0) {
				batX = 0;
			}
			if (batX > canvas.width - batSize) {
				batX = canvas.width - batSize;
			}
			
			// 当たり判定
			if (obstacleX + obstacleSize > batX && obstacleX < batX + batSize &&
				obstacleY + obstacleSize > batY && obstacleY < batY + batSize) {
				gameOver();
			}
			
			// スコア更新
			score++;
			ctx.fillStyle = "#000000";
			ctx.font = "bold 24px Arial";
			ctx.textAlign = "left";
			ctx.fillText("スコア：" + score, 10, 30);
		}
		
		// ゲームオーバー
		function gameOver() {
			// ゲームループ停止
			clearInterval(update);
			
			// 結果表示
			ctx.fillStyle = "#ff0000";
			ctx.font = "bold 48px Arial";
			ctx.textAlign = "center";
			ctx.fillText("ゲームオーバー", canvas.width / 2, canvas.height / 2 - 24);
			ctx.font = "bold 24px Arial";
			ctx.fillText("スコア：" + score, canvas.width / 2, canvas.height / 2 + 24);
			
			// リトライボタン表示
			var retryButton = document.createElement("button");
			retryButton.textContent = "リトライ！";
			retryButton.classList.add("button");
			retryButton.addEventListener("click", function() {
				location.reload();
			});
			document.body.appendChild(retryButton);
		}
		
		// スタートボタン処理
		document.getElementById("startButton").addEventListener("click", startGame);
	</script>
</body>
</html>