Simple HTML Game: Build Your First Game in the Browser

Here's a fun and simple HTML game you can create and play right in your web browser. Let's get started!

Game Rules

Use the arrow keys to move your character.
Collect as many coins as you can.
Avoid the enemies to stay in the game.

Game Setup

To set up the game, follow these easy steps:

Create a new HTML file: Start by creating a new HTML file using your favorite text editor. Save it with a name like 'simple_game.html'.
Add the HTML code: Copy and paste the following code into your HTML file:

<!DOCTYPE html>
<html>
<head>
	<title>Simple HTML Game</title>
	<style type='text/css'>
		#character {
			position: absolute;
			top: 100px;
			left: 100px;
		}
		.coin {
			position: absolute;
			background-color: yellow;
			width: 20px;
			height: 20px;
			border-radius: 50%;
		}
		.enemy {
			position: absolute;
			background-color: red;
			width: 20px;
			height: 20px;
			border-radius: 50%;
		}
	</style>
</head>
<body>

<div id='character'>*</div>

<div class='coin' style='top: 200px; left: 150px;'></div>
<div class='coin' style='top: 50px; left: 300px;'></div>
<div class='coin' style='top: 100px; left: 500px;'></div>

<div class='enemy' style='top: 150px; left: 250px;'></div>
<div class='enemy' style='top: 300px; left: 400px;'></div>
<div class='enemy' style='top: 200px; left: 600px;'></div>

<script type='text/javascript'>
	var character = document.getElementById('character');
	var moveAmount = 20;

	document.addEventListener('keydown', function(event) {
		if(event.key === 'ArrowLeft') {
			character.style.left = parseInt(character.style.left) - moveAmount + 'px';
		}
		else if(event.key === 'ArrowRight') {
			character.style.left = parseInt(character.style.left) + moveAmount + 'px';
		}
		else if(event.key === 'ArrowUp') {
			character.style.top = parseInt(character.style.top) - moveAmount + 'px';
		}
		else if(event.key === 'ArrowDown') {
			character.style.top = parseInt(character.style.top) + moveAmount + 'px';
		}
	});

	var coins = document.getElementsByClassName('coin');
	for(var i = 0; i < coins.length; i++) {
		coins[i].addEventListener('click', function() {
			this.style.display = 'none';
		});
	}

	var enemies = document.getElementsByClassName('enemy');
	setInterval(function(){
		for(var i = 0; i < enemies.length; i++) {
			var enemy = enemies[i];
			var top = parseInt(enemy.style.top);
			var left = parseInt(enemy.style.left);

			if(top > 400) {
				top = -20;
			}
			else {
				top += 5;
			}

			enemy.style.top = top + 'px';
			enemy.style.left = left + 'px';

			if(Math.abs(top - parseInt(character.style.top)) < 20 && Math.abs(left - parseInt(character.style.left)) < 20) {
				alert('Game Over!');
				location.reload();
			}
		}
	}, 50);
</script>

</body>
</html>

Save your file: Save your HTML file so you can open and play the game!

Game Play

Open your saved HTML file in a web browser (like Chrome, Firefox, or Safari). You should see the game! Use the arrow keys on your keyboard to move your character (*), collect the yellow coins, and avoid the red enemies. See how many coins you can collect before the enemies catch you!

Have fun creating and playing your simple HTML game! You can experiment with changing the colors, adding more coins, or making the enemies move differently. Enjoy exploring the world of game development!

Simple HTML Game: Create & Play a Basic Game in Your Browser

Simple HTML Game: Create & Play a Basic Game in Your Browser

Simple HTML Game: Build Your First Game in the Browser

Game Rules

Game Setup

Game Play