There are actually ten kinds of white.'s game

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

No:735

198

←

Prev Next

→

There are actually ten kinds of white.
Developer User3112｜Date and time 23/6/17 15:36:33
Build time 36.286 sec｜Game capacity 3.054KB｜

Script

以下に、JavaScriptを含んだ1枚のHTMLファイルで実装されたスマホ向けゲームの例を示します。

🚶

p>画面をタップしてジャンプ！

このゲームは「Emoji Jump」という名前で、操作方法は画面をタップすることでジャンプします。プレイヤーは🚶の絵文字で表され、障害物は青いドットのような模様の絵文字で表されます。スコアは画面右上に表示され、障害物を5個取るごとに1点加算されます。障害物に当たるとゲームオーバーとなり、スコアが表示されます。再プレイするには画面をリロードしてください。白が10種類あるとのことですが、質問には関係ないので回答しません。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

以下に、JavaScriptを含んだ1枚のHTMLファイルで実装されたスマホ向けゲームの例を示します。

<!DOCTYPE html>
<html>
<head>
	<title>Emoji Jump</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #FEE12B;
      		font-size: 3rem;
      		text-align: center;
      		margin: 0;
		}
		p {
			margin-top: 0;
		}
		#player {
			margin-top: 15vh;
			position: relative;
			animation: jump 0.3s ease forwards;
		}
		#player.active {
			animation: none;
      		bottom: 0;
		}
		@keyframes jump {
			0% {
				bottom: 0;
			}
			50% {
				bottom: 20vh;
			}
			100% {
				bottom: 0;
			}
		}
		.obstacle {
			position: absolute;
			bottom: 0;
      		width: 5vh;
      		height: 5vh;
      		border-radius: 50%;
      		background-color: #009BBE;
      		animation: move 2.5s linear infinite;
		}
		@keyframes move {
			0% {
				left: 100%;
			}
			100% {
				left: -5vh;
			}
		}
		.score {
			position: absolute;
			top: 10vh;
			right: 10vw;
			font-size: 2rem;
		}
	</style>
</head>
<body>
	<div id="player" class="🚶">🚶</div>
	p>画面をタップしてジャンプ！</p>
	<div id="score" class="score">0</div>
	<script>
		let score = 0;
		let gameOver = false;
		const player = document.getElementById("player");
		const scoreDisplay = document.getElementById("score");
		document.body.addEventListener("click", () => {
			if (gameOver) return;
			player.classList.add("active");
			setTimeout(() => {
				player.classList.remove("active");
			}, 300);
			score++;
			scoreDisplay.textContent = score;
			if (score % 5 === 0) {
				const obstacle = document.createElement("div");
				obstacle.classList.add("obstacle");
				obstacle.style.left = Math.random() * 90 + 5 + "vw";
				document.body.appendChild(obstacle);
				obstacle.addEventListener("animationiteration", () => {
					obstacle.remove();
				});
				const playerBottom = parseInt(getComputedStyle(player).bottom);
				const obstacleLeft = parseInt(obstacle.style.left);
				const obstacleSize = parseInt(getComputedStyle(obstacle).width);
				const distance = Math.sqrt((playerBottom ** 2) + ((obstacleLeft - 50) ** 2));
				if (distance < obstacleSize / 2 + 5 + player.offsetHeight) {
					gameOver = true;
					alert(`スコア：${score}\nゲームオーバー！もう一度やる場合は画面をリロードしてください。`);
				}
			}
		});
	</script>
</body>
</html>

白が10種類あるとのことですが、質問には関係ないので回答しません。