Simple HTML Game: Collect Coins and Avoid Enemies

Here's a straightforward HTML game you can play in your browser.

Instructions

Use the arrow keys on your keyboard to move the player.
Gather as many coins as possible while staying clear of the enemies.
You have three lives. If you collide with an enemy, you lose a life.

Game

To start playing, copy and paste the following code into a new HTML document, save it, and open the HTML file in your web browser.

<!DOCTYPE html>
<html>
<head>
	<title>Simple HTML Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #333;
		}
		#player {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			height: 50px;
			width: 50px;
			background-color: yellow;
			border-radius: 50%;
		}
		.coin {
			position: absolute;
			height: 20px;
			width: 20px;
			background-color: gold;
			border-radius: 50%;
		}
		.enemy {
			position: absolute;
			height: 30px;
			width: 30px;
			background-color: red;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id='player'></div>
	<script>
		var player = document.getElementById('player');
		var score = 0;
		var lives = 3;
		var coins = document.getElementsByClassName('coin');
		var enemies = document.getElementsByClassName('enemy');
		
		function movePlayer(e) {
			switch(e.keyCode) {
				case 37:
					if (player.offsetLeft > 0) {
						player.style.left = player.offsetLeft - 10 + 'px';
					}
					break;
				case 38:
					if (player.offsetTop > 0) {
						player.style.top = player.offsetTop - 10 + 'px';
					}
					break;
				case 39:
					if (player.offsetLeft < window.innerWidth - player.offsetWidth) {
						player.style.left = player.offsetLeft + 10 + 'px';
					}
					break;
				case 40:
					if (player.offsetTop < window.innerHeight - player.offsetHeight) {
						player.style.top = player.offsetTop + 10 + 'px';
					}
					break;
			}
			checkCollision();
			checkWin();
		}
		
		function createCoins() {
			for (var i = 0; i < 10; i++) {
				var coin = document.createElement('div');
				coin.className = 'coin';
				coin.style.top = Math.floor(Math.random() * (window.innerHeight - 20)) + 'px';
				coin.style.left = Math.floor(Math.random() * (window.innerWidth - 20)) + 'px';
				document.body.appendChild(coin);
			}
		}
		
		function createEnemies() {
			for (var i = 0; i < 5; i++) {
				var enemy = document.createElement('div');
				enemy.className = 'enemy';
				enemy.style.top = Math.floor(Math.random() * (window.innerHeight - 30)) + 'px';
				enemy.style.left = Math.floor(Math.random() * (window.innerWidth - 30)) + 'px';
				document.body.appendChild(enemy);
			}
		}
		
		function checkCollision() {
			for (var i = 0; i < coins.length; i++) {
				if (collision(player, coins[i])) {
					coins[i].parentNode.removeChild(coins[i]);
					score++;
				}
			}
			for (var i = 0; i < enemies.length; i++) {
				if (collision(player, enemies[i])) {
					lives--;
					if (lives == 0) {
						alert('Game Over! Your score is ' + score);
						location.reload();
					} else {
						player.style.top = window.innerHeight / 2 + 'px';
						player.style.left = window.innerWidth / 2 + 'px';
					}
				}
			}
		}
		
		function collision(a, b) {
			var aRect = a.getBoundingClientRect();
			var bRect = b.getBoundingClientRect();
			
			return !(
				(aRect.bottom < bRect.top) || (aRect.top > bRect.bottom) || (aRect.right < bRect.left) || (aRect.left > bRect.right)
			);
		}
		
		function checkWin() {
			if (score == 10) {
				alert('Congratulations! You won with a score of ' + score);
				location.reload();
			}
		}
		
		createCoins();
		createEnemies();
		document.addEventListener('keydown', movePlayer);
	</script>
</body>
</html>

Have fun playing!

Simple HTML Game: Collect Coins and Avoid Enemies