Bunny girl jumping rope's game

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

No:676

524

←

Prev Next

→

Bunny girl jumping rope
Developer User3082｜Date and time 23/6/17 10:53:21
Build time 60.301 sec｜Game capacity 4.532KB｜

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>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="320" height="480"></canvas>
	<script>
		// ゲームの設定
		var gameSettings = {
			jumpHeight: 100, // ジャンプの高さ
			speed: 3, // 移動速度
			gravity: 0.4, // 重力
			obstacleSpawnInterval: 80, // 障害物の出現間隔
			obstacleSpeed: 4 // 障害物の移動速度
		};

// キャンバスの設定
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");

// リソースの読み込み
		var bunnygirlImg = new Image();
		bunnygirlImg.src = "https://example.com/bunnygirl.png";
		var ropeImg = new Image();
		ropeImg.src = "https://example.com/rope.png";
		var obstacleImg = new Image();
		obstacleImg.src = "https://example.com/obstacle.png";
		var coinImg = new Image();
		coinImg.src = "https://example.com/coin.png";

// ゲームオブジェクトの定義
		var bunnygirl = {
			x: 50,
			y: 200,
			vy: 0,
			score: 0,
			isDead: false
		};
		var obstacles = [];
		var coins = [];

// ゲームループの定義
		var loop = setInterval(function() {
			// ゲームオーバーの場合
			if (bunnygirl.isDead) {
				clearInterval(loop);
				ctx.fillStyle = "white";
				ctx.font = "bold 48px sans-serif";
				ctx.textAlign = "center";
				ctx.fillText("GAME OVER", canvas.width / 2, canvas.height / 2);
				ctx.font = "bold 24px sans-serif";
				ctx.fillText("SCORE: " + bunnygirl.score, canvas.width / 2, canvas.height / 2 + 50);
			}
			// ゲーム続行の場合
			else {
				// キャンバスをクリア
				ctx.clearRect(0, 0, canvas.width, canvas.height);

// 障害物の出現
				if (Math.random() < 1 / gameSettings.obstacleSpawnInterval) {
					obstacles.push({
						x: canvas.width,
						y: 370,
						width: 60,
						height: 60
					});
				}

// コインの出現
				if (Math.random() < 1 / 50) {
					coins.push({
						x: canvas.width,
						y: Math.random() * (canvas.height - 200) + 100,
						width: 30,
						height: 30
					});
				}

// バニーガールの移動
				bunnygirl.vy += gameSettings.gravity;
				bunnygirl.y += bunnygirl.vy;
				if (bunnygirl.y > 370) {
					bunnygirl.y = 370;
					bunnygirl.vy = 0;
				}

// キャラクターの描画
				ctx.drawImage(bunnygirlImg, bunnygirl.x, bunnygirl.y, 80, 80);

// 障害物の移動と描画
				for (var i = 0; i < obstacles.length; i++) {
					obstacles[i].x -= gameSettings.obstacleSpeed;
					ctx.drawImage(obstacleImg, obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);

// 当たり判定
					if (bunnygirl.x + 40 < obstacles[i].x + obstacles[i].width &&
						bunnygirl.x + 40 + 40 > obstacles[i].x &&
						bunnygirl.y + 40 < obstacles[i].y + obstacles[i].height &&
						bunnygirl.y + 40 + 40 > obstacles[i].y) {
						bunnygirl.isDead = true;
					}
				}

// コインの移動と描画
				for (var i = 0; i < coins.length; i++) {
					coins[i].x -= gameSettings.speed;
					ctx.drawImage(coinImg, coins[i].x, coins[i].y, coins[i].width, coins[i].height);

// 当たり判定
					if (bunnygirl.x + 40 < coins[i].x + coins[i].width &&
						bunnygirl.x + 40 + 40 > coins[i].x &&
						bunnygirl.y + 40 < coins[i].y + coins[i].height &&
						bunnygirl.y + 40 + 40 > coins[i].y) {
						bunnygirl.score += 10;
						coins.splice(i--, 1);
					}
				}

// 得点の表示
				ctx.fillStyle = "white";
				ctx.font = "bold 24px sans-serif";
				ctx.fillText("SCORE: " + bunnygirl.score, 10, 30);
			}
		}, 10);

// タッチイベントの定義
		canvas.addEventListener("touchstart", function() {
			if (!bunnygirl.isDead) {
				bunnygirl.vy = -gameSettings.jumpHeight;
			}
		});
		canvas.addEventListener("touchend", function() {
			if (!bunnygirl.isDead) {
				bunnygirl.vy += gameSettings.gravity;
			}
		});
	</script>
</body>
</html>