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

No:2039

3594

←

Prev Next

→

Apparatus Gymnastics
Developer User3025｜Date and time 23/6/19 21:33:38
Build time 71.494 sec｜Game capacity 5.166KB｜

Script

器械体操

スタート！

ゲームオーバー

プレイヤーが器械体操の選手で、フロア上を左右に移動して障害物を避けます。スタートボタンを押した後、左右の矢印キーまたは画面左半分と右半分をタップして移動します。障害物に触れたらゲームオーバーです。スコアが1秒ごとに1ポイント増えます。

←

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>
		body {
			margin: 0;
			padding: 0;
			background-color: lightblue;
			font-family: Arial, sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
		h1 {
			font-size: 48px;
		}
		#score {
			font-size: 24px;
			color: white;
			background-color: black;
			padding: 5px 10px;
			border-radius: 10px;
		}
		#game {
			width: 300px;
			height: 500px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
		}
		#player {
			width: 50px;
			height: 50px;
			background-color: red;
			border-radius: 50%;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.obstacle {
			width: 50px;
			height: 50px;
			background-color: green;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			animation: moveObstacle 2s linear infinite;
		}
		@keyframes moveObstacle {
			0% {
				top: -50px;
			}
			100% {
				top: 500px;
			}
		}
		#start {
			position: absolute;
			top: 0;
			left: 0;
			background-color: yellow;
			padding: 10px 20px;
			border-radius: 10px;
			cursor: pointer;
			animation: flashStart 1s ease-in-out infinite;
		}
		@keyframes flashStart {
			0% {
				opacity: 1;
			}
			50% {
				opacity: 0.5;
			}
			100% {
				opacity: 1;
			}
		}
		#gameover {
			position: absolute;
			top: 0;
			left: 0;
			background-color: red;
			color: white;
			padding: 10px 20px;
			border-radius: 10px;
			display: none;
		}
	</style>
</head>
<body>
	<h1>器械体操</h1>
	<div id="score">0</div>
	<div id="game">
		<div id="player"></div>
		<div class="obstacle"></div>
		<div class="obstacle"></div>
		<div id="start">スタート！</div>
		<div id="gameover">ゲームオーバー</div>
	</div>
	<script>
		let player = document.getElementById('player');
		let obstacles = document.getElementsByClassName('obstacle');
		let start = document.getElementById('start');
		let gameover = document.getElementById('gameover');
		let score = document.getElementById('score');
		let gameStarted = false;
		let gameEnded = false;
		let playerInterval;
		let obstacleInterval;

start.addEventListener('click', function() {
			if (!gameStarted) {
				gameStarted = true;
				start.style.display = 'none';
				playerInterval = setInterval(movePlayer, 50);
				obstacleInterval = setInterval(addObstacle, 2000);
			}
		});

function addObstacle() {
			if (!gameEnded) {
				let obstacle = document.createElement('div');
				obstacle.classList.add('obstacle');
				obstacle.style.left = Math.floor(Math.random() * 250) + 25 + 'px';
				game.appendChild(obstacle);
			}
		}

function isColliding(element1, element2) {
			let rect1 = element1.getBoundingClientRect();
			let rect2 = element2.getBoundingClientRect();
			return !(
				rect1.bottom < rect2.top ||
				rect1.top > rect2.bottom ||
				rect1.right < rect2.left ||
				rect1.left > rect2.right
			);
		}

document.addEventListener('keydown', movePlayer);

document.addEventListener('keyup', function() {
			if (!gameEnded) {
				player.classList.remove('player-move');
			}
		});

document.addEventListener('touchend', function() {
			if (!gameEnded) {
				player.classList.remove('player-move');
			}
		});

setInterval(function() {
			if (gameStarted && !gameEnded) {
				score.innerText++;
			}
		}, 1000);
	</script>
</body>
</html>