I jump on the pillar I threw and fly away.'s game | AI game creator

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

No:3640

559

I jump on the pillar I threw and fly away.
Developer User3655｜Date and time 23/6/25 23:37:30
Build time 37.605 sec｜Game capacity 3.799KB｜

プログラムを考えてみました。

🐒

Score: 0

このプログラムは「Jumping Monkey Game」という名前のゲームになっています。遊び方： 1. ページを開くとモンキーが表示されます。 2. ゲーム画面の下にある黒い柱が左から右に移動してきます。 3. 柱がモンキーと重なったときにスペースキーを押すと、モンキーがジャンプして柱から跳び上がります。 4. モンキーが柱と重ならないようにしながら、できるだけ長くゲームを続けてください。 5. スコアは、飛び越えた柱の数によって決まります。スコアが上がると、柱が移動するスピードが速くなります。このゲームは、スペースキーを押すとモンキーがジャンプするようになっています。スコアが上がると、柱の移動スピードが速くなります。音声が流れるようになっており、スマホでも遊びやすくなっています。また、モンキーと柱は絵文字で表示されており、見た目が楽しい仕様になっています。

→ 　

3　

1　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

プログラムを考えてみました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Jumping Monkey Game</title>
	<style>
		#game-container {
			background-color: #88ccee;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 3rem;
			color: white;
		}

#monkey {
			font-size: 5rem;
			margin-bottom: 2rem;
		}

#pillar {
			background-color: #884422;
			width: 10rem;
			height: 15rem;
			position: relative;
			margin-bottom: 5rem;
			transition: 0.5s;
		}

#pillar:hover {
			background-color: #aa6622;
		}

#top {
			width: inherit;
			height: 2rem;
			top: 0;
			position: absolute;
		}

#bottom {
			width: inherit;
			height: 2rem;
			bottom: 0;
			position: absolute;
		}

@keyframes pillar-move {
			0% {
				left: 100%;
			}
			100% {
				left: -10rem;
			}
		}

</style>
	<script>
		var monkey = document.getElementById("monkey");
		var pillar = document.getElementById("pillar");
		var score = 0;

var jumpAudio = new Audio("https://actions.google.com/sounds/v1/cartoon/cartoon_boing.ogg");

document.addEventListener("keydown", function(event) {
			if (event.keyCode === 32) {
				jump();
			}
		});

pillar.addEventListener("animationiteration", function() {
			increaseScore();
			movePillar();
		});

function increaseScore() {
			score++;
			document.getElementById("score").innerHTML = "Score: " + score;
		}

function jump() {
			var currentPosition = parseInt(window.getComputedStyle(monkey).getPropertyValue("bottom"));
			var jumpHeight = 100;
			if (currentPosition < jumpHeight) {
				jumpAudio.play();
				var jumpInterval = setInterval(function() {
					monkey.style.bottom = currentPosition + "px";
					currentPosition += 20;
					if (currentPosition >= jumpHeight) {
						clearInterval(jumpInterval);
						var fallInterval = setInterval(function() {
							monkey.style.bottom = currentPosition + "px";
							currentPosition -= 20;
							if (currentPosition <= 0) {
								clearInterval(fallInterval);
							}
						}, 25);
					}
				}, 25);
			}
		}

function movePillar() {
			var randomHeight = Math.floor(Math.random() * 200) + 100;
			var topHeight = 600 - randomHeight - 40;
			pillar.style.height = randomHeight + "px";
			pillar.style.top = topHeight + "px";
			pillar.style.animation = "pillar-move 2s linear";
			pillar.addEventListener("animationend", function() {
				pillar.style.animation = "";
			});
		}
	</script>
</head>
<body>
	<div id="game-container">
		<div id="monkey">🐒</div>
		<div id="pillar">
			<div id="top"></div>
			<div id="bottom"></div>
		</div>
		<div id="score">Score: 0</div>
	</div>
</body>
</html>

このプログラムは「Jumping Monkey Game」という名前のゲームになっています。

遊び方：

1. ページを開くとモンキーが表示されます。
2. ゲーム画面の下にある黒い柱が左から右に移動してきます。
3. 柱がモンキーと重なったときにスペースキーを押すと、モンキーがジャンプして柱から跳び上がります。
4. モンキーが柱と重ならないようにしながら、できるだけ長くゲームを続けてください。
5. スコアは、飛び越えた柱の数によって決まります。スコアが上がると、柱が移動するスピードが速くなります。

このゲームは、スペースキーを押すとモンキーがジャンプするようになっています。スコアが上がると、柱の移動スピードが速くなります。音声が流れるようになっており、スマホでも遊びやすくなっています。また、モンキーと柱は絵文字で表示されており、見た目が楽しい仕様になっています。