<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dungeon Treasure Game</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
margin-bottom: 10px;
}
#info {
margin: 15px auto;
padding: 10px;
background: white;
border-radius: 8px;
width: fit-content;
min-width: 300px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#message {
margin-top: 10px;
font-weight: bold;
min-height: 24px;
}
#game {
display: grid;
grid-template-columns: repeat(16, 30px);
grid-template-rows: repeat(16, 30px);
gap: 4px;
justify-content: center;
margin: 20px auto;
}
.cell {
width: 30px;
height: 30px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
user-select: none;
}
.floor {
background: #ddd;
}
.wall {
background: #444;
}
.player {
background: #4da6ff;
color: white;
}
.treasure {
background: gold;
}
.trap {
background: #ff7a7a;
}
.exit {
background: #7bd87b;
}
#controls {
margin-top: 20px;
}
#controls button,
#restartBtn {
font-size: 18px;
padding: 10px 16px;
margin: 5px;
cursor: pointer;
border: none;
border-radius: 6px;
background: #333;
color: white;
}
#controls button:hover,
#restartBtn:hover {
background: #555;
}
.control-row {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>Dungeon Treasure Game</h1>
<div id="info">
<div>Health: <span id="health">3</span></div>
<div>Score: <span id="score">0</span></div>
<div>Treasures left: <span id="treasuresLeft">0</span></div>
<div id="message">Collect all treasures and find the exit!</div>
</div>
<div id="game"></div>
<div id="controls">
<div class="control-row">
<button onclick="movePlayer(-1, 0)">⬆️ Up</button>
</div>
<div class="control-row">
<button onclick="movePlayer(0, -1)">⬅️ Left</button>
<button onclick="movePlayer(1, 0)">⬇️ Down</button>
<button onclick="movePlayer(0, 1)">➡️ Right</button>
</div>
<div class="control-row">
<button id="restartBtn" onclick="restartGame()">Restart</button>
</div>
</div>
<script>
// global variables
let map = [];
let player = {
row: 0,
col: 0,
health: 3,
score: 0,
};
let gameOver = false;
function restartGame() {
let generatedMap = generateMaze(16, 16);
map = generatedMap.map((row) => [...row]);
player.health = 3;
player.score = 0;
gameOver = false;
updateInfo();
renderMap();
}
function updateInfo() {
// todo: update #health, #score and #treasuresLeft
}
function renderMap() {
const game = document.getElementById("game");
// clear current game field
game.innerHTML = "";
// create new game field
for (let row = 0; row < map.length; row++) {
for (let col = 0; col < map[row].length; col++) {
const cell = document.createElement("div");
cell.classList.add("cell");
const tile = map[row][col];
// add css classes for correct visualization
if (player.row === row && player.col === col) {
cell.classList.add("player");
cell.textContent = "😀";
} else if (tile === "#") {
cell.classList.add("wall");
} else if (tile === "." || tile === "S") {
cell.classList.add("floor");
} else if (tile === "T") {
cell.classList.add("treasure");
cell.textContent = "💎";
} else if (tile === "X") {
cell.classList.add("trap");
cell.textContent = "⚠️";
} else if (tile === "E") {
cell.classList.add("exit");
cell.textContent = "🚪";
}
game.appendChild(cell);
}
}
}
function movePlayer(rowChange, colChange) {
// TODO
}
function generateMaze(rows, cols) {
const map = [];
// 1. Create empty map
for (let row = 0; row < rows; row++) {
const newRow = [];
for (let col = 0; col < cols; col++) {
newRow.push(".");
}
map.push(newRow);
}
// 2. Start is always top-left
map[0][0] = "S";
// 3. Exit is always bottom-right
map[map.length - 1][map[map.length - 1].length - 1] = "E";
// place walls and treasures
map[2][5] = "#";
map[10][10] = "T";
return map;
}
document.addEventListener("keydown", function (event) {
if (event.key === "ArrowUp") {
movePlayer(-1, 0);
} else if (event.key === "ArrowDown") {
movePlayer(1, 0);
} else if (event.key === "ArrowLeft") {
movePlayer(0, -1);
} else if (event.key === "ArrowRight") {
movePlayer(0, 1);
}
});
restartGame();
</script>
</body>
</html>