Step 1:

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. Then create a folder name "imgs" in your "game" folder.

Step 2:

You will need to right-click and select "Save Image" and save all the sprite animations above into the "imgs" folder you have just created.

Step 3:

Add this CSS to your 'STYLE' section.

#playerGif {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

#enemyGif {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

Step 4:

Add a div for the player gif and a div for the enemy gif in the canvas container div.

<div id="canvasContainer">
	<canvas id="gameCanvas" class="canvas" width="800" height="600"></canvas>
	<img id="playerGif" src="./imgs/player-south.png" alt="Player GIF">
	<img id="enemyGif" src="./imgs/enemy-south.png" alt="Enemy GIF">
</div>
			

Step 5:

In the javascript section we will add the code for updating the gif position for the player and enemy blocks.

var game_over = false;

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

const player = {
	x: 300,
	y: 300,
	width: 16,
	height: 32,
	speed: 3,
	dx: 0,
	dy: 0,
	prevDx: 0,
	prevDy: 0
};

const enemy = {
	x: canvas.width - 300,
	y: canvas.height - 300,
	width: 16,
	height: 32,
	speed: 1,
	dx: 0,
	dy: 0,
	prevDx: 0,
	prevDy: 0
};
	
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);
}

function clearCanvas() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function movePlayer() {
	player.x += player.dx;
	player.y += player.dy;
	
	// Check collision with canvas boundries 
	if (checkBoundriesCollision()) {
		player.x -= player.dx;
		player.y -= player.dy;
		player.dx = 0;
		player.dy = 0;
	}
	
		// Update position of the player GIF
        playerGif.style.left = (player.x + 12) + "px";
        playerGif.style.top = (player.y + 20)  + "px";
		
        // Update player GIF based on movement direction
        if (player.dx > 0 && player.dx !== player.prevDx) {
            playerGif.src = "./imgs/player-east.png";
            player.prevDx = player.dx;
            player.prevDy = 0;
        } else if (player.dx < 0 && player.dx !== player.prevDx) {
            playerGif.src = "./imgs/player-west.png";
            player.prevDx = player.dx;
            player.prevDy = 0;
        } else if (player.dy > 0 && player.dy !== player.prevDy) {
            playerGif.src = "./imgs/player-south.png";
            player.prevDy = player.dy;
            player.prevDx = 0;
        } else if (player.dy < 0 && player.dy !== player.prevDy) {
            playerGif.src = "./imgs/player-north.png";
            player.prevDy = player.dy;
            player.prevDx = 0;
        }
}

function moveEnemy() {
	// Simple chase algorithm
	if (enemy.x <= player.x) {
		enemy.x += enemy.speed;
	} else {
		enemy.x -= enemy.speed;
	}

	if (enemy.y <= player.y) {
		enemy.y += enemy.speed;
	} else {
		enemy.y -= enemy.speed;
	}
	
	// Update position of the enemy GIF
	enemyGif.style.left = (enemy.x + 12) + "px";
	enemyGif.style.top = (enemy.y + 20) + "px";
	
	if (enemy.dx > 0 && enemy.dx !== enemy.prevDx) {
		enemyGif.src = "enemy-east.png";
		enemy.prevDx = enemy.dx;
		enemy.prevDy = 0;
	} else if (enemy.dx < 0 && enemy.dx !== enemy.prevDx) {
		enemyGif.src = "enemy-west.png";
		enemy.prevDx = enemy.dx;
		enemy.prevDy = 0;
	} else if (enemy.dy > 0 && enemy.dy !== enemy.prevDy) {
		enemyGif.src = "enemy-south.png";
		enemy.prevDy = enemy.dy;
		enemy.prevDx = 0;
	} else if (enemy.dy < 0 && enemy.dy !== enemy.prevDy) {
		enemyGif.src = "enemy-north.png";
		enemy.prevDy = enemy.dy;
		enemy.prevDx = 0;
	}
}

function checkBoundriesCollision() {
	// Check collision with canvas boundaries
	if (player.x < 0 || player.x + player.width > canvas.width || player.y < 0 || player.y + player.height > canvas.height) {
		return true;
	}

	return false;
}

function checkPlayerEnemyCollision() {
	if (
		player.x < enemy.x + enemy.width &&
		player.x + player.width > enemy.x &&
		player.y < enemy.y + enemy.height &&
		player.y + player.height > enemy.y
	) {
		game_over = true;
	}
}

function showGameOverPopup() {
    // Create a new div element
    const gameOverDiv = document.createElement("div");
    
    // Set styles for the div
	gameOverDiv.style.position = "absolute";
	gameOverDiv.style.width = "100%";
    gameOverDiv.style.top = "50%";
    gameOverDiv.style.left = "50%";
    gameOverDiv.style.transform = "translate(-50%, -50%)";
    gameOverDiv.style.backgroundColor = "rgba(0, 0, 0, 0)";
    gameOverDiv.style.color = "red";
    gameOverDiv.style.fontSize = "64px";
    gameOverDiv.style.padding = "20px";
    gameOverDiv.style.textAlign = "center";
    gameOverDiv.style.borderRadius = "10px";
    gameOverDiv.style.zIndex = "9999";
	gameOverDiv.style.fontFamily = "'Press Start 2P', system-ui"; // Use Press Start 2P font
    
    // Set the text content
    gameOverDiv.textContent = "Game Over";
    
	// Get the existing canvas container element
	var canvasContainer = document.getElementById("canvasContainer");
	
	// Append gameOverDiv to canvasContainer
	canvasContainer.appendChild(gameOverDiv);
}

function gameLoop() {
    if (!game_over) {
        clearCanvas();
        drawPlayer();
        drawEnemy();
        movePlayer();
		moveEnemy();
        checkPlayerEnemyCollision();
        requestAnimationFrame(gameLoop);
    } else {
        // Show game over popup
        showGameOverPopup();		
		// You can add game over logic here
    }
}

document.addEventListener("keydown", function (event) {
	switch (event.key) {
		case "w":
			player.dy = -player.speed;
			break;
		case "a":
			player.dx = -player.speed;
			break;
		case "s":
			player.dy = player.speed;
			break;
		case "d":
			player.dx = player.speed;
			break;
	}
});

document.addEventListener("keyup", function (event) {
	switch (event.key) {
		case "w":
		case "s":
			player.dy = 0;
			break;
		case "a":
		case "d":
			player.dx = 0;
			break;
	}
});

gameLoop();
			

The Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<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;
		border:20px solid grey;
		border-radius:10px;
	}
	
	#canvasContainer {
		position: relative;
		width: 800px; /* Adjust width as needed */
		height: 600px; /* Adjust height as needed */
		margin: auto; /* Center the container */
	}
	
	#playerGif {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		image-rendering: pixelated;
		image-rendering: -moz-crisp-edges;
		image-rendering: crisp-edges;
	}

	#enemyGif {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		image-rendering: pixelated;
		image-rendering: -moz-crisp-edges;
		image-rendering: crisp-edges;
	}
</style>
</head>
<body>

<div id="canvasContainer">
	<canvas id="gameCanvas" class="canvas" width="800" height="600"></canvas>
	<img id="playerGif" src="./imgs/player-south.png" alt="Player GIF">
	<img id="enemyGif" src="./imgs/enemy-south.png" alt="Enemy GIF">
</div>

<script>
var game_over = false;

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

const player = {
	x: 300,
	y: 300,
	width: 16,
	height: 32,
	speed: 3,
	dx: 0,
	dy: 0,
	prevDx: 0,
	prevDy: 0
};

const enemy = {
	x: canvas.width - 300,
	y: canvas.height - 300,
	width: 16,
	height: 32,
	speed: 1,
	dx: 0,
	dy: 0,
	prevDx: 0,
	prevDy: 0
};
	
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);
}

function clearCanvas() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function movePlayer() {
	player.x += player.dx;
	player.y += player.dy;
	
	// Check collision with canvas boundries 
	if (checkBoundriesCollision()) {
		player.x -= player.dx;
		player.y -= player.dy;
		player.dx = 0;
		player.dy = 0;
	}
	
		// Update position of the player GIF
        playerGif.style.left = (player.x + 12) + "px";
        playerGif.style.top = (player.y + 20)  + "px";
		
        // Update player GIF based on movement direction
        if (player.dx > 0 && player.dx !== player.prevDx) {
            playerGif.src = "./imgs/player-east.png";
            player.prevDx = player.dx;
            player.prevDy = 0;
        } else if (player.dx < 0 && player.dx !== player.prevDx) {
            playerGif.src = "./imgs/player-west.png";
            player.prevDx = player.dx;
            player.prevDy = 0;
        } else if (player.dy > 0 && player.dy !== player.prevDy) {
            playerGif.src = "./imgs/player-south.png";
            player.prevDy = player.dy;
            player.prevDx = 0;
        } else if (player.dy < 0 && player.dy !== player.prevDy) {
            playerGif.src = "./imgs/player-north.png";
            player.prevDy = player.dy;
            player.prevDx = 0;
        }
}

function moveEnemy() {
	// Simple chase algorithm
	if (enemy.x <= player.x) {
		enemy.x += enemy.speed;
	} else {
		enemy.x -= enemy.speed;
	}

	if (enemy.y <= player.y) {
		enemy.y += enemy.speed;
	} else {
		enemy.y -= enemy.speed;
	}
	
	// Update position of the enemy GIF
	enemyGif.style.left = (enemy.x + 12) + "px";
	enemyGif.style.top = (enemy.y + 20) + "px";
	
	if (enemy.dx > 0 && enemy.dx !== enemy.prevDx) {
		enemyGif.src = "enemy-east.png";
		enemy.prevDx = enemy.dx;
		enemy.prevDy = 0;
	} else if (enemy.dx < 0 && enemy.dx !== enemy.prevDx) {
		enemyGif.src = "enemy-west.png";
		enemy.prevDx = enemy.dx;
		enemy.prevDy = 0;
	} else if (enemy.dy > 0 && enemy.dy !== enemy.prevDy) {
		enemyGif.src = "enemy-south.png";
		enemy.prevDy = enemy.dy;
		enemy.prevDx = 0;
	} else if (enemy.dy < 0 && enemy.dy !== enemy.prevDy) {
		enemyGif.src = "enemy-north.png";
		enemy.prevDy = enemy.dy;
		enemy.prevDx = 0;
	}
}

function checkBoundriesCollision() {
	// Check collision with canvas boundaries
	if (player.x < 0 || player.x + player.width > canvas.width || player.y < 0 || player.y + player.height > canvas.height) {
		return true;
	}

	return false;
}

function checkPlayerEnemyCollision() {
	if (
		player.x < enemy.x + enemy.width &&
		player.x + player.width > enemy.x &&
		player.y < enemy.y + enemy.height &&
		player.y + player.height > enemy.y
	) {
		game_over = true;
	}
}

function showGameOverPopup() {
    // Create a new div element
    const gameOverDiv = document.createElement("div");
    
    // Set styles for the div
	gameOverDiv.style.position = "absolute";
	gameOverDiv.style.width = "100%";
    gameOverDiv.style.top = "50%";
    gameOverDiv.style.left = "50%";
    gameOverDiv.style.transform = "translate(-50%, -50%)";
    gameOverDiv.style.backgroundColor = "rgba(0, 0, 0, 0)";
    gameOverDiv.style.color = "red";
    gameOverDiv.style.fontSize = "64px";
    gameOverDiv.style.padding = "20px";
    gameOverDiv.style.textAlign = "center";
    gameOverDiv.style.borderRadius = "10px";
    gameOverDiv.style.zIndex = "9999";
	gameOverDiv.style.fontFamily = "'Press Start 2P', system-ui"; // Use Press Start 2P font
    
    // Set the text content
    gameOverDiv.textContent = "Game Over";
    
	// Get the existing canvas container element
	var canvasContainer = document.getElementById("canvasContainer");
	
	// Append gameOverDiv to canvasContainer
	canvasContainer.appendChild(gameOverDiv);
}

function gameLoop() {
    if (!game_over) {
        clearCanvas();
        drawPlayer();
        drawEnemy();
        movePlayer();
		moveEnemy();
        checkPlayerEnemyCollision();
        requestAnimationFrame(gameLoop);
    } else {
        // Show game over popup
        showGameOverPopup();		
		// You can add game over logic here
    }
}

document.addEventListener("keydown", function (event) {
	switch (event.key) {
		case "w":
			player.dy = -player.speed;
			break;
		case "a":
			player.dx = -player.speed;
			break;
		case "s":
			player.dy = player.speed;
			break;
		case "d":
			player.dx = player.speed;
			break;
	}
});

document.addEventListener("keyup", function (event) {
	switch (event.key) {
		case "w":
		case "s":
			player.dy = 0;
			break;
		case "a":
		case "d":
			player.dx = 0;
			break;
	}
});

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