HTML Anatomy

Step 1:

Open up notepad and paste in Code 1 below. Save and name the file index.html

It is recommended you create a folder structure as shown above. Put your index.html file into a folder named "game" in your Documents folder.

Code 1: The Header and Body

This is the bare bones of a blank HTML page


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dungeon Chase</title>
<style>
</style>
</head>
<body>
Hello World
<script>
</script>
</body>
</html>

Step 2:

Open up a browser and drag the index.html file into the browser and you will see a blank white page with the words "Hello World".

Code 2: Putting the Canvas Element into the HTML Body

Next, we are going to insert a canvas element between the 'body' tags of the HTML document. You can remove the words "Hellow World" in your HTML document.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dungeon Chase</title>
<style>
</style>
</head>
<body>

<div id="canvasContainer">
	<canvas id="gameCanvas" class="canvas" width="800" height="600"></canvas>
</div>

<script>

</script>
</body>
</html>

Step 3:

In your notepad and paste in Code 3 below and save. Refresh your browser and you will see a black canvas in your browser as shown in the above image.

Code 3: CSS

Here we insert the CSS in between the 'style' tags. CSS allows us to define how each element will look like.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dungeon Chase</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
        position: relative;
    }
    #gameCanvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
		}
    canvas {
        display: block;
        margin: 0 auto;
    }
	.canvas {
		background-color:black;
	}
	#canvasContainer {
		position: relative;
		width: 800px; /* Adjust width as needed */
		height: 600px; /* Adjust height as needed */
		margin: auto; /* Center the container */
	}
</style>
</head>
<body>

<div id="canvasContainer">
	<canvas id="gameCanvas" class="canvas" width="800" height="600"></canvas>
</div>

<script>
</script>
</body>
</html>

Step 4:

Insert the javascript in Code 4 between the 'script' tags Code 4 below and save.

Refresh your browser and you will see a red rectangle and a blue rectangle on your canvas.

Code 4: Javascript


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dungeon Chase</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
        position: relative;
    }
    #gameCanvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
		}
    canvas {
        display: block;
        margin: 0 auto;
    }
	.canvas {
		background-color:black;
	}
	
	#canvasContainer {
		position: relative;
		width: 800px; /* Adjust width as needed */
		height: 600px; /* Adjust height as needed */
		margin: auto; /* Center the container */
	}
</style>
</head>
<body>

<div id="canvasContainer">
	<canvas id="gameCanvas" class="canvas" width="800" height="600"></canvas>
</div>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const player = {
	x: 300,
	y: 300,
	width: 16,
	height: 32
};

const enemy = {
	x: canvas.width - 300,
	y: canvas.height - 300,
	width: 16,
	height: 32
};
	
function drawPlayer() {
	ctx.fillStyle = "blue"; // Adjust the alpha value (last parameter) for transparency // "rgba(0, 0, 0, 0)"
	ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawEnemy() {
	ctx.fillStyle =   "red"; // "rgba(0, 0, 0, 0)"
	ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
}

drawPlayer();
drawEnemy();

</script>
</body>
</html>