AI game creator

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

No:4201

970

←

Prev Next

→

The fun ones.
Developer User3765｜Date and time 23/6/27 14:09:17
Build time 24.588 sec｜Game capacity 2.323KB｜

Script

了解しました！　私はタッチ操作に最適化された「ジャンプゲーム」を作成することに決めました。以下は実際のプログラムです。

🐸

🌳

このゲームでは、画面をタップするとカエル（🐸）がジャンプし、上に進みます。障害物（🌳）に当たるとゲームオーバーになり、スコアがリセットされます。1秒ごとにスコアが加算され、障害物が出現するタイミングや速度がランダムに変わります。ご確認ください！

←

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>
		body {
			margin: 0;
			padding: 0;
		}

#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: 50px;
			cursor: pointer;
			animation: jump 0.5s infinite alternate;
		}

#obstacle {
			position: absolute;
			bottom: 100px;
			left: 100%;
			font-size: 50px;
			animation: move 1s linear infinite;
		}

@keyframes jump {
			from {
				bottom: 0;
			}

to {
				bottom: 50px;
			}
		}

@keyframes move {
			from {
				left: 100%;
			}

to {
				left: -100px;
			}
		}
	</style>
	<script>
		document.addEventListener("DOMContentLoaded", function(event) {
			let player = document.querySelector("#player");
			let obstacle = document.querySelector("#obstacle");
			let score = 0;

function jump() {
				player.style.animationPlayState = "paused";
				setTimeout(function() {
					player.style.animationPlayState = "running";
				}, 500);
			}

function checkCollision() {
				let playerRect = player.getBoundingClientRect();
				let obstacleRect = obstacle.getBoundingClientRect();

if (playerRect.right > obstacleRect.left &&
					playerRect.bottom > obstacleRect.top &&
					playerRect.left < obstacleRect.right &&
					playerRect.top < obstacleRect.bottom) {
					alert("ゲームオーバー！　スコア：" + score);
					score = 0;
					obstacle.style.animationDuration = "1s";
				}
			}

setInterval(function() {
				score++;
				obstacle.style.animationDuration = (Math.random() * 1.5 + 0.5) + "s";
				checkCollision();
			}, 1000);

player.addEventListener("click", jump);
		});
	</script>
</head>
<body>
	<div id="player">🐸</div>
	<div id="obstacle">🌳</div>
</body>
</html>