AI game creator

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

No:2924

4792

←

Prev Next

→

(Translated by.)
Developer User3494｜Date and time 23/6/23 4:14:01
Build time 42.394 sec｜Game capacity 3.866KB｜

Script

「ネコジャンプ」というゲームを作りました！

🐱

GAME OVER

このゲームは、ネコが朝ごはんを食べた後、公園で遊ぶというストーリーをもとにしています。ネコを操作して障害物を避け、できるだけ長く走り続けましょう！障害物に当たってしまうとゲームオーバーです。スペースキーを押すことでネコがジャンプします。障害物を避けながらできるだけスコアを稼ぎましょう！🐱🏃‍♀️💨

←

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>
		#neko {
			position: absolute;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 3em;
		}
		.obstacle {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: brown;
			bottom: 100px;
			border-radius: 50%;
			animation: move 5s infinite linear;
		}
		@keyframes move {
			0% {
				left: 0;
			}
			100% {
				left: calc(100% - 50px);
			}
		}
		.gameover {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 3em;
			display: none;
		}
	</style>
</head>
<body>
	<div id="neko">🐱</div>
	<div class="obstacle"></div>
	<div class="obstacle" style="bottom: 250px;"></div>
	<div class="obstacle" style="bottom: 400px;"></div>
	<div class="gameover">GAME OVER</div>
	<script>
		const neko = document.getElementById('neko');
		let isJumping = false;
		let gravity = 0.9;
		let obstacleTimer;
		let obstacleTime = 2000;
		let score = 0;
		const scoreEl = document.createElement('div');
		scoreEl.style.position = 'fixed';
		scoreEl.style.top = '10px';
		scoreEl.style.right = '10px';
		scoreEl.style.fontSize = '2em';
		document.body.appendChild(scoreEl);

document.addEventListener('keydown', function(event) {
			if (event.code === 'Space' && !isJumping) {
				jump();
			}
		});

function gameOver() {
			clearInterval(obstacleTimer);
			document.querySelector('.gameover').style.display = 'block';
		}

function updateScore() {
			score++;
			scoreEl.textContent = score + '点';
		}

function getDistance(element1, element2) {
			let rect1 = element1.getBoundingClientRect();
			let rect2 = element2.getBoundingClientRect();
			return Math.sqrt((rect1.x - rect2.x)**2 + (rect1.y - rect2.y)**2);
		}

obstacleTimer = setInterval(function() {
			const obstacle = document.createElement('div');
			obstacle.classList.add('obstacle');
			obstacle.style.left = '100%';
			obstacle.style.bottom = Math.random() * 400 + 50 + 'px';
			document.body.appendChild(obstacle);

let obstacleInterval = setInterval(function() {
				let position = parseInt(window.getComputedStyle(obstacle).getPropertyValue('left'));
				if (position <= -50) {
					clearInterval(obstacleInterval);
					obstacle.remove();
				}
				obstacle.style.left = position - 10 + 'px';

if (!document.querySelector('.gameover').style.display) {
					if (position < 100 && position > 0 && !isJumping) {
						checkCollision();
						updateScore();
					}
				}
			}, 20);
		}, obstacleTime);
	</script>
</body>
</html>