Game Over Banner

Step 1:

Instead of the ugly Game Over alert box, we are now going to replace it with a Game Over banner.

The important code to add is this:

When this function is called, it will dynamically insert a HTML DIV element into the webpage, and set its CSS accordingly, thus showing the GAME OVER banner.


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);
}

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 */
	}
</style>
</head>
<body>

<div id="canvasContainer">
	<canvas id="gameCanvas" class="canvas" width="800" height="600"></canvas>
</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;
	}
}

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();
        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>