Avoiding enemies by jumping's game

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

No:1409

←

Prev Next

→

Avoiding enemies by jumping
Developer User3331｜Date and time 23/6/18 14:34:20
Build time 23.504 sec｜Game capacity 2.118KB｜

Script

得点：0

画面をタップしてジャンプしてください。

ゲーム概要：画面をタップすることでプレイヤーがジャンプします。プレイヤーは右側から左へと近づいてくる敵を回避しなければなりません。敵に接触するとゲームオーバーとなります。プレイヤーが敵を回避するたびに得点が加算されます。

←

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 {
			background-color: #F5DEB3;
			margin: 0;
		}
		#player {
			position: absolute;
			background-color: #FFC0CB;
			width: 50px;
			height: 50px;
			left: 20px;
			bottom: 0;
			animation: jump 0.3s ease-in-out infinite;
		}
		#enemy {
			position: absolute;
			background-color: #D8BFD8;
			width: 50px;
			height: 50px;
			right: 20px;
			bottom: 0;
			animation: moveEnemy 1s linear infinite;
		}
		@keyframes jump {
			0% {
				bottom: 0;
			}
			50% {
				bottom: 50px;
			}
			100% {
				bottom: 0;
			}
		}
		@keyframes moveEnemy {
			from {
				right: -50px;
			}
			to {
				right: 100vw;
			}
		}
	</style>
	<script>
		let player = document.getElementById("player");
		let enemy = document.getElementById("enemy");
		let score = 0;

document.addEventListener("touchstart", jump);

function checkCollision() {
			if (player.offsetTop >= enemy.offsetTop - 50 &&
				player.offsetLeft >= enemy.offsetLeft - 50 &&
				player.offsetLeft <= enemy.offsetLeft + 50) {
				alert("ゲームオーバー！\n得点：" + score);
				location.reload();
			}
		}

function updateScore() {
			score += 1;
			document.getElementById("score").innerHTML = "得点：" + score;
		}
	</script>
</head>
<body>
	<div id="player"></div>
	<div id="enemy"></div>
	<p id="score">得点：0</p>
	<p>画面をタップしてジャンプしてください。</p>
</body>
</html>