A game in which a character is in the middle of the screen, the screen scrolls horizontally, and obstacles are flowing by jumping to avoid them.'s game

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

No:948

115

←

Prev Next

→

A game in which a character is in the middle of th..ALL
Developer User3203｜Date and time 23/6/17 23:02:35
Build time 27.144 sec｜Game capacity 1.722KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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;
			height: 100%;
			background-color: #999;
			overflow: hidden;
			position: relative;
		}

#character {
			position: absolute;
			bottom: 50px;
			left: 50px;
			width: 50px;
			height: 50px;
			background-color: yellow;
			border-radius: 50%;
		}

.obstacle {
			position: absolute;
			bottom: 0;
			background-color: red;
			width: 50px;
			height: 100px;
			animation: obstacleFlow 2s linear infinite;
		}

@keyframes obstacleFlow {
			from {
				left: 100%;
			}
			to {
				left: -50px;
			}
		}
	</style>
</head>
<body onload="startGame()">
	<div id="character"></div>
	<script>
		let character;
		let jumpHeight = 100;
		let jumpDuration = 500;
		let obstacleSpeed = 2;
		let obstacleInterval = 1500;
		let gameInterval;

function startGame() {
			character = document.getElementById("character");
			document.body.addEventListener("touchstart", jump);
			gameInterval = setInterval(spawnObstacle, obstacleInterval);
		}

function jump(e) {
			character.style.bottom = jumpHeight + "px";
			character.style.transition = jumpDuration / 1000 + "s";
			setTimeout(function() {
				character.style.bottom = "50px";
				character.style.transition = jumpDuration / 1000 + "s";
			}, jumpDuration);
		}

function spawnObstacle() {
			let obstacle = document.createElement("div");
			obstacle.classList.add("obstacle");
			obstacle.style.left = "100%";
			obstacle.style.animationDuration = 1 / obstacleSpeed + "s";
			document.body.appendChild(obstacle);
			setTimeout(function() {
				obstacle.remove();
			}, obstacleSpeed * 1000 + 50);
		}
	</script>
</body>
</html>