2D横スクロールゲーム

以下が、JavaScriptを使って実装した簡単な2D横スクロールゲームです。セキュリティ脆弱性のあるコードは含んでいません。

<!DOCTYPE html>
<html>
<head>
	<title>2D Sidescrolling Game</title>
	<style>
		body {
			margin: 0;
			overflow: hidden;
			background-color: lightblue;
		}
		#player {
			position: absolute;
			top: 0;
			left: 0;
			width: 50px;
			height: 50px;
			background-color: orange;
		}
		#ground {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 50px;
			background-color: green;
		}
		#obstacle {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<div id="ground"></div>
	<div id="obstacle"></div>

	<script>
		let player = document.getElementById("player");
		let ground = document.getElementById("ground");
		let obstacle = document.getElementById("obstacle");

		let playerTop = 0;
		let playerLeft = 0;
		let obstacleLeft = 1000;
		let score = 0;

		function updateScore() {
			score++;
			document.title = "2D Sidescrolling Game Score: " + score;
		}

		function checkCollision() {
			let playerBox = player.getBoundingClientRect();
			let obstacleBox = obstacle.getBoundingClientRect();

			if (playerBox.right >= obstacleBox.left && playerBox.bottom >= obstacleBox.top && playerBox.left <= obstacleBox.right && playerBox.top <= obstacleBox.bottom) {
				alert("GAME OVER!");
				showToast("再読み込みしてください");
			}
		}

		document.addEventListener("keydown", function(event) {
			switch (event.keyCode) {
				case 32:
					playerTop -= 100;
					break;
				case 37:
					playerLeft -= 10;
					break;
				case 39:
					playerLeft += 10;
					break;
			}
		});

		function gameLoop() {
			obstacleLeft -= 10;

			if (obstacleLeft < -50) {
				obstacleLeft = 1000;
				updateScore();
			}

			checkCollision();

			playerTop += 10;
			player.style.top = playerTop + "px";
			player.style.left = playerLeft + "px";

			obstacle.style.left = obstacleLeft + "px";

			requestAnimationFrame(gameLoop);
		}

		requestAnimationFrame(gameLoop);
	</script>
</body>
</html>

ジョーク：ゲームオーバーの代わりに、「Next time, try jumping instead of walking into walls!」というメッセージを表示することができます。