AI game creator

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

No:3950

3058

←

Prev Next

→

skydiving
Developer User1006｜Date and time 23/6/27 0:36:45
Build time 52.247 sec｜Game capacity 4.677KB｜

Script

スカイダイビングゲームを実装します。HTMLファイルとJavaScriptを含めます。以下はゲームの概要です。ゲームの概要： - スマホの傾きを利用したゲームです。 - プレイヤーは仮想のスカイダイビングを行います。 - プレイヤーはスコアを稼ぐためにできるだけ長く滞空する必要があります。 - プレイヤーが地面に着陸する前に、できるだけ多くのリングを通過することができると高得点を獲得できます。実際のゲームプログラムは以下の通りです：

以上がスカイダイビングゲームの実装になります。プレイヤーは仮想のスカイダイビングを楽しみながら、スコアを稼いでいきます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

スカイダイビングゲームを実装します。HTMLファイルとJavaScriptを含めます。以下はゲームの概要です。

ゲームの概要：
- スマホの傾きを利用したゲームです。
- プレイヤーは仮想のスカイダイビングを行います。
- プレイヤーはスコアを稼ぐためにできるだけ長く滞空する必要があります。
- プレイヤーが地面に着陸する前に、できるだけ多くのリングを通過することができると高得点を獲得できます。

実際のゲームプログラムは以下の通りです：

<!DOCTYPE html>
<html>
<head>
	<title>スカイダイビング</title>
	<meta charset="UTF-8">
</head>
<body>

<div id="game-screen" style="width:100%; height:100vh; background-color:skyblue; position:relative; overflow:hidden;">
		<img id="player" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/265/man-superhero_1f9b8.png" style="position:absolute; left:50%; transform:translateX(-50%); bottom:50px; width:70px; height:70px;">
	</div>

// 画面サイズが変わったときに再計算
		window.onresize = function() {
			screenWidth = window.innerWidth;
			screenHeight = window.innerHeight;
		}

// スマホ傾きのイベントを検知して処理
		window.addEventListener("deviceorientation", function(event) {
			if (!isGameOver) {
				var x = event.gamma / 45.0; // スマホを左右に傾けた値（-1.0 ～ 1.0）
				var y = event.beta / 45.0; // スマホを上下に傾けた値（-1.0 ～ 1.0）

// プレイヤーの位置を移動
				var playerLeft = (screenWidth - playerWidth) / 2.0;
				var playerBottom = 50.0 + screenHeight * 0.25 * (1.0 - y);
				var playerRight = playerLeft + playerWidth;
				var playerTop = playerBottom + playerHeight;

// 画面端にはみ出さないようにする
				if (playerLeft < 0) {
					playerLeft = 0;
					playerRight = playerLeft + playerWidth;
				}
				if (playerRight > screenWidth) {
					playerRight = screenWidth;
					playerLeft = playerRight - playerWidth;
				}
				if (playerBottom < 0) {
					playerBottom = 0;
					playerTop = playerBottom + playerHeight;
				}
				if (playerTop > screenHeight) {
					playerTop = screenHeight;
					playerBottom = playerTop - playerHeight;
				}

// プレイヤーを移動
				playerElement.style.left = playerLeft + "px";
				playerElement.style.bottom = playerBottom + "px";

// リングとの当たり判定を行う
				var ringElements = document.getElementsByClassName("ring");
				for (var i = 0; i < ringElements.length; i++) {
					var ring = ringElements[i];
					if (ring.style.display != "none") {
						var ringTop = parseFloat(ring.style.top.replace("px", ""));
						var ringLeft = parseFloat(ring.style.left.replace("px", ""));
						var ringRight = ringLeft + ringWidth;
						var ringBottom = ringTop + ringWidth;

if (playerLeft < ringRight && playerRight > ringLeft && playerTop > ringTop && playerBottom < ringBottom) {
							// プレイヤーがリングに触れた
							ring.style.display = "none";
							score++;
						} else if (playerBottom < ringTop) {
							// リングを逃して着陸した
							gameOver();
						}
					}
				}
			}
		});

// 一定間隔でリングを生成
		var ringInterval = setInterval(function() {
			if (!isGameOver) {
				var ringElement = document.createElement("img");
				ringElement.className = "ring";
				ringElement.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/link-symbol_1f517.png";
				ringElement.style.position = "absolute";
				ringElement.style.left = Math.random() * (screenWidth - ringWidth) + "px";
				ringElement.style.top = -(ringGap + ringWidth) + "px";
				document.getElementById("game-screen").appendChild(ringElement);
			}
		}, 2000);

// ゲームオーバー時に呼び出される関数
		function gameOver() {
			isGameOver = true;
			clearInterval(ringInterval);
			alert("スコア：" + score);
		}
	</script>

</body>
</html>

以上がスカイダイビングゲームの実装になります。プレイヤーは仮想のスカイダイビングを楽しみながら、スコアを稼いでいきます。