aiueo-o (Chinese dictionary arranged by rhyme, displaying the meanings of kanji)'s game

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

No:596

401

←

Prev Next

→

aiueo-o (Chinese dictionary arranged by rhyme, dis..ALL
Developer User3032｜Date and time 23/6/16 6:41:39
Build time 41.566 sec｜Game capacity 3.144KB｜

Script

こちらの要求に沿ったアプリの実装例を記述します。

😀

このアプリは「Emoji Run」といった名前のゲームです。プレイヤーは😀の絵文字で、画面の下部に位置します。プレイヤーを左右に動かすには、画面の左側をタップすると左に、右側をタップすると右に移動します。プレイヤーは画面の端にぶつかると跳ね返ります。画面上には🐍の絵文字が移動してきます。プレイヤーが🐍に当たるとゲームオーバーです。🐍は時間経過で徐々にスピードアップします。また、画面上に同時に表示される🐍の数も増えていきます。このアプリはスマホで遊ぶことを前提にしており、タッチイベントを使用しています。また、CSSアニメーションを使って🐍を移動させています。このアプリは1枚のHTMLファイルとして実装されています。

←

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>Emoji Run</title>
	<style>
		body {
			background-color: #00bfff;
			margin: 0;
			padding: 0;
			font-size: 30px;
			text-align: center;
		}
		#player {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
		.enemy {
			position: absolute;
			left: 100%;
			bottom: 0;
			animation: enemy-animation 3s linear infinite;
		}
		@keyframes enemy-animation {
			0% {
				left: 100%;
			}
			100% {
				left: -100%;
			}
		}
	</style>
</head>
<body>
	<div id="player">😀</div>
	<script>
		let player = document.getElementById("player");
		let moveLeft = false;
		let moveRight = false;
		document.addEventListener("touchstart", function(event) {
			let touchX = event.touches[0].clientX;
			let screenWidth = window.innerWidth;
			if (touchX < screenWidth / 2) {
				moveLeft = true;
			} else {
				moveRight = true;
			}
		});
		document.addEventListener("touchend", function(event) {
			moveLeft = false;
			moveRight = false;
		});
		setInterval(function() {
			let playerX = parseFloat(player.style.left);
			if (moveLeft) {
				playerX -= 10;
			} else if (moveRight) {
				playerX += 10;
			}
			if (playerX < 0) {
				playerX = 0;
			} else if (playerX > window.innerWidth) {
				playerX = window.innerWidth;
			}
			player.style.left = playerX + "px";
		}, 50);
		setInterval(function() {
			let enemy = document.createElement("div");
			enemy.innerHTML = "🐍";
			enemy.className = "enemy";
			enemy.style.left = (Math.random() * (window.innerWidth - 100)) + 50 + "px";
			document.body.appendChild(enemy);
			setTimeout(function() {
				document.body.removeChild(enemy);
			}, 3000);
			let enemyInterval = setInterval(function() {
				let enemyX = parseFloat(enemy.style.left);
				let enemyY = parseFloat(enemy.style.bottom);
				let playerX = parseFloat(player.style.left);
				let playerY = parseFloat(player.style.bottom);
				if (enemyX < playerX + 60 && enemyX + 60 > playerX &&
					enemyY < playerY + 60 && enemyY + 60 > playerY) {
					alert("Game Over");
					clearInterval(enemyInterval);
				}
			}, 50);
		}, 1500);
	</script>
</body>
</html>

このアプリは「Emoji Run」といった名前のゲームです。プレイヤーは😀の絵文字で、画面の下部に位置します。プレイヤーを左右に動かすには、画面の左側をタップすると左に、右側をタップすると右に移動します。プレイヤーは画面の端にぶつかると跳ね返ります。

画面上には🐍の絵文字が移動してきます。プレイヤーが🐍に当たるとゲームオーバーです。🐍は時間経過で徐々にスピードアップします。また、画面上に同時に表示される🐍の数も増えていきます。

このアプリはスマホで遊ぶことを前提にしており、タッチイベントを使用しています。また、CSSアニメーションを使って🐍を移動させています。このアプリは1枚のHTMLファイルとして実装されています。