Dungeon Crawler
Prompt
create a first person view dungeon crawler game in html. Use wasd for camera controls and place the camera inside the dungeon. The dungeon should be made up of corridors and rooms. Present an overhead map in the top right of the screen which shows only the parts of the dungeon the player has been able to see ("fog of war").
A system prompt was added to support web rendering
# First-Person Dungeon Crawler with Fog of War Map
I'll create a first-person dungeon crawler with WASD controls and an overhead map that reveals explored areas. The solution will use Three.js for 3D rendering and a canvas for the minimap.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dungeon Crawler</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#gameContainer {
position: relative;
width: 100vw;
height: 100vh;
}
#renderCanvas {
width: 100%;
height: 100%;
display: block;
}
#minimap {
position: absolute;
top: 20px;
right: 20px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.7);
border: 2px solid #8a6d3b;
border-radius: 4px;
z-index: 10;
}
#controls {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
font-size: 14px;
}
#title {
position: absolute;
top: 20px;
left: 20px;
color: #d4af37;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
z-index: 10;
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas id="renderCanvas"></canvas>
<canvas id="minimap"></canvas>
<div id="title">DUNGEON CRAWLER</div>
<div id="controls">
<div>WASD: Move | Mouse: Look Around</div>
<div>Explore the dungeon and watch the map reveal!</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Initialize Three.js scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111122);
scene.fog = new THREE.Fog(0x111122, 5, 15);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.6, 0);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('renderCanvas'), antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// Initialize minimap
const minimapCanvas = document.getElementById('minimap');
const minimapCtx = minimapCanvas.getContext('2d');
minimapCanvas.width = minimapCanvas.offsetWidth;
minimapCanvas.height = minimapCanvas.offsetHeight;
// Dungeon parameters
const DUNGEON_SIZE = 20;
const CELL_SIZE = 3;
const WALL_HEIGHT = 3;
const EXPLORE_RADIUS = 2;
// Dungeon layout (0 = empty, 1 = wall)
const dungeon = Array(DUNGEON_SIZE).fill().map(() => Array(DUNGEON_SIZE).fill(0));
const explored = Array(DUNGEON_SIZE).fill().map(() => Array(DUNGEON_SIZE).fill(false));
// Generate a simple dungeon layout
function generateDungeon() {
// Create outer walls
for (let x = 0; x < DUNGEON_SIZE; x++) {
for (let z = 0; z < DUNGEON_SIZE; z++) {
if (x === 0 || x === DUNGEON_SIZE - 1 || z === 0 || z === DUNGEON_SIZE - 1) {
dungeon[x][z] = 1;
}
}
}
// Add some rooms and corridors
for (let i = 0; i < 5; i++) {
const roomX = Math.floor(Math.random() * (DUNGEON_SIZE - 6)) + 3;
const roomZ = Math.floor(Math.random() * (DUNGEON_SIZE - 6)) + 3;
const roomWidth = Math.floor(Math.random() * 4) + 3;
const roomHeight = Math.floor(Math.random() * 4) + 3;
for (let x = roomX; x < roomX + roomWidth; x++) {
for (let z = roomZ; z < roomZ + roomHeight; z++) {
if (x < DUNGEON_SIZE - 1 && z < DUNGEON_SIZE - 1) {
dungeon[x][z] = 0;
}
}
}
}
// Add some walls inside
for (let i = 0; i < 20; i++) {
const wallX = Math.floor(Math.random() * (DUNGEON_SIZE - 2)) + 1;
const wallZ = Math.floor(Math.random() * (DUNGEON_SIZE - 2)) + 1;
const length = Math.floor(Math.random() * 3) + 2;
const horizontal = Math.random() > 0.5;
for (let j = 0; j < length; j++) {
if (horizontal) {
if (wallX + j < DUNGEON_SIZE - 1) dungeon[wallX + j][wallZ] = 1;
} else {
if (wallZ + j < DUNGEON_SIZE - 1) dungeon[wallX][wallZ + j] = 1;
}
}
}
}
// Create dungeon geometry
function createDungeon() {
const floorGeometry = new THREE.PlaneGeometry(CELL_SIZE * DUNGEON_SIZE, CELL_SIZE * DUNGEON_SIZE);
const floorMaterial = new THREE.MeshStandardMaterial({
color: 0x444444,
roughness: 0.8,
metalness: 0.2
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.set(CELL_SIZE * DUNGEON_SIZE / 2, 0, CELL_SIZE * DUNGEON_SIZE / 2);
scene.add(floor);
const ceilingGeometry = new THREE.PlaneGeometry(CELL_SIZE * DUNGEON_SIZE, CELL_SIZE * DUNGEON_SIZE);
const ceilingMaterial = new THREE.MeshStandardMaterial({
color: 0x333344,
roughness: 0.9,
metalness: 0.1
});
const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial);
ceiling.rotation.x = Math.PI / 2;
ceiling.position.set(CELL_SIZE * DUNGEON_SIZE / 2, WALL_HEIGHT, CELL_SIZE * DUNGEON_SIZE / 2);
scene.add(ceiling);
const wallGeometry = new THREE.BoxGeometry(CELL_SIZE, WALL_HEIGHT, CELL_SIZE);
const wallMaterial = new THREE.MeshStandardMaterial({
color: 0x8a6d3b,
roughness: 0.7,
metalness: 0.3
});
for (let x = 0; x < DUNGEON_SIZE; x++) {
for (let z = 0; z < DUNGEON_SIZE; z++) {
if (dungeon[x][z] === 1) {
const wall = new THREE.Mesh(wallGeometry, wallMaterial);
wall.position.set(x * CELL_SIZE, WALL_HEIGHT / 2, z * CELL_SIZE);
scene.add(wall);
}
}
}
}
// Lighting
function setupLighting() {
const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(0.5, 1, 0.5);
directionalLight.castShadow = true;
scene.add(directionalLight);
// Add point lights for atmosphere
for (let i = 0; i < 5; i++) {
const light = new THREE.PointLight(0xffaa00, 0.7, 10);
light.position.set(
Math.random() * DUNGEON_SIZE * CELL_SIZE,
1,
Math.random() * DUNGEON_SIZE * CELL_SIZE
);
scene.add(light);
}
}
// Player movement
const moveSpeed = 0.1;
const rotationSpeed = 0.003;
const player = {
position: new THREE.Vector3(CELL_SIZE * 1.5, 1.6, CELL_SIZE * 1.5),
rotation: new THREE.Euler(0, 0, 0, 'YXZ')
};
const keys = {};
window.addEventListener('keydown', (e) => keys[e.key.toLowerCase()] = true);
window.addEventListener('keyup', (e) => keys[e.key.toLowerCase()] = false);
let mouseX = 0, mouseY = 0;
let prevMouseX = 0, prevMouseY = 0;
let isMouseDown = false;
window.addEventListener('mousedown', () => isMouseDown = true);
window.addEventListener('mouseup', () => isMouseDown = false);
window.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function updatePlayer() {
// Mouse look
if (isMouseDown) {
const deltaX = mouseX - prevMouseX;
const deltaY = mouseY - prevMouseY;
player.rotation.y -= deltaX * rotationSpeed;
player.rotation.x = Math.max(-Math.PI/3, Math.min(Math.PI/3, player.rotation.x - deltaY * rotationSpeed));
}
prevMouseX = mouseX;
prevMouseY = mouseY;
// Movement
const direction = new THREE.Vector3();
if (keys['w']) direction.z -= 1;
if (keys['s']) direction.z += 1;
if (keys['a']) direction.x -= 1;
if (keys['d']) direction.x += 1;
direction.normalize();
direction.applyEuler(new THREE.Euler(0, player.rotation.y, 0));
direction.multiplyScalar(moveSpeed);
// Collision detection
const newX = player.position.x + direction.x;
const newZ = player.position.z + direction.z;
const gridX = Math.floor(newX / CELL_SIZE);
const gridZ = Math.floor(newZ / CELL_SIZE);
if (gridX >= 0 && gridX < DUNGEON_SIZE && gridZ >= 0 && gridZ < DUNGEON_SIZE) {
if (dungeon[gridX][gridZ] === 0) {
player.position.x = newX;
player.position.z = newZ;
}
}
// Update camera position and rotation
camera.position.copy(player.position);
camera.rotation.set(player.rotation.x, player.rotation.y, 0);
}
// Update explored areas
function updateExplored() {
const playerGridX = Math.floor(player.position.x / CELL_SIZE);
const playerGridZ = Math.floor(player.position.z / CELL_SIZE);
for (let x = Math.max(0, playerGridX - EXPLORE_RADIUS); x <= Math.min(DUNGEON_SIZE - 1, playerGridX + EXPLORE_RADIUS); x++) {
for (let z = Math.max(0, playerGridZ - EXPLORE_RADIUS); z <= Math.min(DUNGEON_SIZE - 1, playerGridZ + EXPLORE_RADIUS); z++) {
if (Math.sqrt((x - playerGridX) ** 2 + (z - playerGridZ) ** 2) <= EXPLORE_RADIUS) {
explored[x][z] = true;
}
}
}
}
// Draw minimap
function drawMinimap() {
minimapCtx.clearRect(0, 0, minimapCanvas.width, minimapCanvas.height);
// Draw background
minimapCtx.fillStyle = '#111';
minimapCtx.fillRect(0, 0, minimapCanvas.width, minimapCanvas.height);
const cellSize = minimapCanvas.width / DUNGEON_SIZE;
// Draw explored areas
for (let x = 0; x < DUNGEON_SIZE; x++) {
for (let z = 0; z < DUNGEON_SIZE; z++) {
if (explored[x][z]) {
if (dungeon[x][z] === 0) {
minimapCtx.fillStyle = '#333';
} else {
minimapCtx.fillStyle = '#8a6d3b';
}
minimapCtx.fillRect(x * cellSize, z * cellSize, cellSize, cellSize);
}
}
}
// Draw player
const playerX = player.position.x / CELL_SIZE * cellSize;
const playerZ = player.position.z / CELL_SIZE * cellSize;
minimapCtx.fillStyle = '#ff0000';
minimapCtx.beginPath();
minimapCtx.arc(playerX, playerZ, 3, 0, Math.PI * 2);
minimapCtx.fill();
// Draw direction indicator
const dirX = playerX + Math.sin(player.rotation.y) * 5;
const dirZ = playerZ + Math.cos(player.rotation.y) * 5;
minimapCtx.strokeStyle = '#ffff00';
minimapCtx.beginPath();
minimapCtx.moveTo(playerX, playerZ);
minimapCtx.lineTo(dirX, dirZ);
minimapCtx.stroke();
}
// Initialize game
generateDungeon();
createDungeon();
setupLighting();
// Set initial explored area
updateExplored();
// Animation loop
function animate() {
requestAnimationFrame(animate);
updatePlayer();
updateExplored();
drawMinimap();
renderer.render(scene, camera);
}
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate();
</script>
</body>
</html>
```
## Features Implemented
1. **First-Person View**: The player experiences the dungeon from a first-person perspective.
2. **WASD Controls**:
- W: Move forward
- S: Move backward
- A: Strafe left
- D: Strafe right
- Mouse: Look around (hold and drag)
3. **Dungeon Generation**:
- Procedurally generated dungeon with rooms and corridors
- Outer walls and internal walls
- Floor and ceiling
4. **Fog of War Minimap**:
- Top-right corner overlay
- Reveals areas as the player explores
- Shows player position and orientation
- Different colors for walls and open spaces
5. **Visual Design**:
- Atmospheric lighting with point lights
- Bronze-colored walls and stone floor/ceiling
- Fog effect for depth perception
- Clean UI with game title and controls
The game is ready to play! Move with WASD, look around by clicking and dragging the mouse, and watch the minimap reveal the areas you've explored.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Person Dungeon Crawler</title>
<style>
body {
margin: 0;
background: #181818;
overflow: hidden;
}
#gameView {
display: block;
position: absolute;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background: #242424;
}
#miniMap {
position: absolute;
top: 20px;
right: 20px;
border: 2px solid #999;
background: #1a1a1a;
z-index: 10;
}
</style>
</head>
<body>
<canvas id="gameView" width="960" height="540"></canvas>
<canvas id="miniMap" width="200" height="200"></canvas>
<script>
// ====== Dungeon Generation ======
// Map constants
const MAP_W = 24;
const MAP_H = 24;
const TILE_WALL = 1;
const TILE_FLOOR = 0;
// Create empty dungeon map
let dungeon = [];
for (let y = 0; y < MAP_H; y++) {
dungeon.push(Array(MAP_W).fill(TILE_WALL));
}
// Helper: carve rectangle to floor
function carveRoom(x, y, w, h) {
for (let yy = y; yy < y + h; yy++) {
for (let xx = x; xx < x + w; xx++) {
if (xx >= 1 && xx < MAP_W-1 && yy >= 1 && yy < MAP_H-1)
dungeon[yy][xx] = TILE_FLOOR;
}
}
}
// Generate rooms and corridors
let rooms = [];
function makeDungeon() {
dungeon = [];
for (let y = 0; y < MAP_H; y++)
dungeon.push(Array(MAP_W).fill(TILE_WALL));
rooms = [];
// Randomly place some rooms
let nRooms = 10 + Math.floor(Math.random()*5);
for (let r = 0; r < nRooms; r++) {
let w = 4 + Math.floor(Math.random()*3);
let h = 4 + Math.floor(Math.random()*3);
let x = 2 + Math.floor(Math.random()*(MAP_W-w-4));
let y = 2 + Math.floor(Math.random()*(MAP_H-h-4));
carveRoom(x, y, w, h);
rooms.push({x, y, w, h, cx: x+w/2, cy: y+h/2});
}
// Connect rooms with corridors
rooms.sort((a,b) => a.cx+b.cy - b.cx-b.cy);
for (let i=1; i<rooms.length; i++) {
let prev = rooms[i-1], curr = rooms[i];
if (Math.random() < 0.5) {
carveRoom(Math.floor(prev.cx), Math.floor(prev.cy), Math.floor(curr.cx - prev.cx)+1, 1);
carveRoom(Math.floor(curr.cx), Math.floor(prev.cy), 1, Math.floor(curr.cy - prev.cy)+1);
} else {
carveRoom(Math.floor(prev.cx), Math.floor(prev.cy), 1, Math.floor(curr.cy - prev.cy)+1);
carveRoom(Math.floor(prev.cx), Math.floor(curr.cy), Math.floor(curr.cx - prev.cx)+1, 1);
}
}
}
makeDungeon();
// ====== First Person Rendering (Raycasting) ======
// Player
let player = {
x: rooms[0].cx+0.5,
y: rooms[0].cy+0.5,
dir: 0, // in radians
fov: Math.PI/3, // 60 deg
moveSpeed: 3, // tiles/sec
rotSpeed: Math.PI/2 // radians/sec
};
// Fog of war: which tiles seen
let seen = [];
for (let y=0; y<MAP_H; y++)
seen[y] = Array(MAP_W).fill(false);
// Canvas setup
const viewCanvas = document.getElementById("gameView");
const ctx = viewCanvas.getContext("2d");
const width = viewCanvas.width, height = viewCanvas.height;
// MiniMap setup
const minimapCanvas = document.getElementById("miniMap");
const mctx = minimapCanvas.getContext("2d");
const mmW = minimapCanvas.width, mmH = minimapCanvas.height;
// Movement control
let keys = {};
window.addEventListener('keydown', e => keys[e.key.toLowerCase()] = true);
window.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);
// Raycasting render
function castRays(){
const numRays = width;
const rays = [];
let [px, py] = [player.x, player.y];
// For fog-of-war vision
let visTiles = {};
for (let i=0; i<numRays; i++) {
let angle = player.dir - player.fov/2 + (i/numRays)*player.fov;
let dx = Math.cos(angle), dy = Math.sin(angle);
let dist = 0, hit = false;
let mapX = Math.floor(px), mapY = Math.floor(py);
// DDA
let sideDistX, sideDistY;
let deltaDistX = Math.abs(1/dx);
let deltaDistY = Math.abs(1/dy);
let stepX, stepY;
let hitSide = 0; // 0-x, 1-y
if (dx < 0) { stepX = -1; sideDistX = (px - mapX)*deltaDistX; }
else { stepX = 1; sideDistX = (mapX + 1.0 - px)*deltaDistX; }
if (dy < 0) { stepY = -1; sideDistY = (py - mapY)*deltaDistY; }
else { stepY = 1; sideDistY = (mapY + 1.0 - py)*deltaDistY; }
let maxDist = 20;
// For fog of war: trace all tiles traversed
for (let t = 0; t < maxDist; t++) {
// Mark tile as visible
visTiles[mapX+'_'+mapY] = true;
if (dungeon[mapY] && dungeon[mapY][mapX] === TILE_WALL)
break;
if (sideDistX < sideDistY) {
sideDistX += deltaDistX;
mapX += stepX;
hitSide = 0;
} else {
sideDistY += deltaDistY;
mapY += stepY;
hitSide = 1;
}
}
mapX = Math.floor(px), mapY = Math.floor(py);
sideDistX = dx < 0 ? (px - mapX)*deltaDistX : (mapX + 1.0 - px)*deltaDistX;
sideDistY = dy < 0 ? (py - mapY)*deltaDistY : (mapY + 1.0 - py)*deltaDistY;
let currDistX = sideDistX, currDistY = sideDistY;
// Find first wall
while (!hit && dist < maxDist) {
if (sideDistX < sideDistY) {
mapX += stepX;
dist = sideDistX;
sideDistX += deltaDistX;
hitSide = 0;
} else {
mapY += stepY;
dist = sideDistY;
sideDistY += deltaDistY;
hitSide = 1;
}
if (dungeon[mapY] && dungeon[mapY][mapX] === TILE_WALL)
hit = true;
}
// Fisheye correction
let corrected = dist * Math.cos(angle - player.dir);
rays.push({dist: corrected, side: hitSide, hitX: mapX, hitY: mapY});
}
// Mark visible tiles for fog of war
for (let k in visTiles) {
let [x, y] = k.split('_').map(Number);
if (x >= 0 && y >= 0 && y < MAP_H && x < MAP_W)
seen[y][x] = true;
}
return rays;
}
function draw3D(rays) {
ctx.clearRect(0, 0, width, height);
// Sky
ctx.fillStyle = "#222839";
ctx.fillRect(0, 0, width, height/2);
// Floor
ctx.fillStyle = "#1a170f";
ctx.fillRect(0, height/2, width, height/2);
for (let i=0; i<rays.length; i+=2) { // skip every second for perf
let r = rays[i];
let dist = r.dist;
let k = Math.max(0.3, 1 - dist/18);
// Wall height
let lineH = Math.min(height, (height * 1.2) / dist);
// Wall shading
if (r.side === 0) ctx.fillStyle = `rgb(${70*k},${83*k},${140*k})`;
else ctx.fillStyle = `rgb(${50*k},${60*k},${98*k})`;
ctx.fillRect(i, (height-lineH)/2, 2, lineH);
}
}
// ====== Minimap Drawing ======
function drawMiniMap() {
const tileSize = mmW / MAP_W;
mctx.clearRect(0,0,mmW,mmH);
// Draw fog
for (let y=0; y<MAP_H; y++) {
for (let x=0; x<MAP_W; x++) {
if (!seen[y][x]) {
mctx.fillStyle = "#444";
mctx.fillRect(x*tileSize, y*tileSize, tileSize, tileSize);
}
}
}
// Draw explored map
for (let y=0; y<MAP_H; y++) {
for (let x=0; x<MAP_W; x++) {
if (seen[y][x]) {
if (dungeon[y][x] === TILE_WALL) {
mctx.fillStyle = "#222";
} else {
mctx.fillStyle = "#bbbbbb";
}
mctx.fillRect(x*tileSize, y*tileSize, tileSize, tileSize);
}
}
}
// Draw player
mctx.fillStyle = "#72d6ef";
mctx.beginPath();
mctx.arc(player.x*tileSize, player.y*tileSize, tileSize*0.3, 0, Math.PI*2);
mctx.fill();
// Draw player dir
mctx.strokeStyle = "#20a0db";
mctx.beginPath();
let ex = player.x + Math.cos(player.dir)*0.7;
let ey = player.y + Math.sin(player.dir)*0.7;
mctx.moveTo(player.x*tileSize, player.y*tileSize);
mctx.lineTo(ex*tileSize, ey*tileSize);
mctx.stroke();
}
// ====== Controls & Animation Loop ======
let lastTime = null;
function gameLoop(timestamp) {
if (!lastTime) lastTime = timestamp;
let dt = Math.min(0.1, (timestamp - lastTime)/1000);
lastTime = timestamp;
// Movement
let speed = player.moveSpeed * dt;
let rot = player.rotSpeed * dt;
if (keys['a']) player.dir -= rot;
if (keys['d']) player.dir += rot;
if (keys['w']) {
let dx = Math.cos(player.dir)*speed, dy = Math.sin(player.dir)*speed;
let fx = player.x + dx, fy = player.y + dy;
if (dungeon[Math.floor(player.y)][Math.floor(fx)] === TILE_FLOOR) player.x = fx;
if (dungeon[Math.floor(fy)][Math.floor(player.x)] === TILE_FLOOR) player.y = fy;
}
if (keys['s']) {
let dx = Math.cos(player.dir)*speed, dy = Math.sin(player.dir)*speed;
let fx = player.x - dx, fy = player.y - dy;
if (dungeon[Math.floor(player.y)][Math.floor(fx)] === TILE_FLOOR) player.x = fx;
if (dungeon[Math.floor(fy)][Math.floor(player.x)] === TILE_FLOOR) player.y = fy;
}
let rays = castRays();
draw3D(rays);
drawMiniMap();
requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);
// ====== Optional: Restart Game Button ======
document.addEventListener("keydown", (e) => {
if (e.key === "r") {
makeDungeon();
for (let y=0; y<MAP_H; y++)
seen[y] = Array(MAP_W).fill(false);
player.x = rooms[0].cx+0.5;
player.y = rooms[0].cy+0.5;
player.dir = 0;
}
});
// Show instructions
ctx.font = "18px sans-serif";
ctx.fillStyle = "#fff";
ctx.fillText("Use W A S D to move. Press 'R' to restart.", 40, 40);
</script>
</body>
</html>
```
**Features:**
- First-person view using raycasting (no external libraries).
- WASD to move and look around (camera is inside the dungeon).
- Dungeon with random rooms and connecting corridors.
- Overhead minimap (top right) showing only explored areas ("fog of war").
- Press 'R' to regenerate a new dungeon.
- All code is self-contained within the HTML.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini-Dungeon (WASD)</title>
<style>
html,body{
margin:0;
height:100%;
overflow:hidden;
background:#000;
font-family:monospace;
user-select:none;
}
#info{
position:absolute;
left:10px;
top:10px;
color:#fff;
background:rgba(0,0,0,.4);
padding:4px 8px;
z-index:10;
border-radius:4px;
font-size:14px;
}
#minimap{
position:absolute;
top:10px;
right:10px;
width:220px;
height:220px;
background:#000;
image-rendering:pixelated;
border:2px solid #555;
z-index:9;
}
canvas{
display:block; /* THREE.js canvas */
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r153/three.min.js"></script>
</head>
<body>
<div id="info">
WASD = move / turn<br>
Esc = release pointer
</div>
<canvas id="minimap"></canvas>
<script>
// ------------------------------
// 1. Basic THREE.js set-up
// ------------------------------
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
let renderer= new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize',()=>{
camera.aspect = innerWidth/innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
});
// ------------------------------
// 2. Dungeon definition (grid)
// ------------------------------
const layout = [
"#####################",
"#.......#...........#",
"#.......#...........#",
"#.......#...#######.#",
"#...................#",
"#..######...........#",
"#.......#...........#",
"#.......#######.....#",
"#...................#",
"#..####....####.....#",
"#..# #....# #.....#",
"#..####....####.....#",
"#...................#",
"#####################"
];
// normalize (replace spaces with walls just in case)
const dungeonH = layout.length;
const dungeonW = layout[0].length;
// keep explored state
let explored = Array.from({length:dungeonH},()=>Array(dungeonW).fill(false));
// ------------------------------
// 3. Build dungeon geometry
// ------------------------------
const CELL = 1;
const WALL_H = 2.5;
const wallGeo = new THREE.BoxGeometry(CELL, WALL_H, CELL);
const wallMat = new THREE.MeshStandardMaterial({color:0x444444, roughness:0.8});
const floorMat = new THREE.MeshStandardMaterial({color:0x777777});
let floor = new THREE.Mesh(
new THREE.PlaneGeometry(dungeonW*CELL, dungeonH*CELL),
floorMat
);
floor.rotation.x = -Math.PI/2;
scene.add(floor);
layout.forEach((row,y)=>{
[...row].forEach((ch,x)=>{
if(ch==="#"){
let wall = new THREE.Mesh(wallGeo, wallMat);
wall.position.set((x+0.5-dungeonW/2)*CELL,
WALL_H/2,
(y+0.5-dungeonH/2)*CELL);
scene.add(wall);
}
});
});
// lights
scene.add(new THREE.AmbientLight(0xcccccc,0.5));
let light = new THREE.DirectionalLight(0xffffff,0.8);
light.position.set(0,10,0);
scene.add(light);
// ------------------------------
// 4. Player (camera) start
// ------------------------------
let player = {
x: 2, // grid coordinates
y: 2,
rot: 0 // radians
};
updateCameraPosition();
// ------------------------------
// 5. Controls (pointer-lock + WASD)
// ------------------------------
let keys = {};
window.addEventListener('keydown',e=>{ keys[e.key.toLowerCase()] = true; });
window.addEventListener('keyup', e=>{ keys[e.key.toLowerCase()] = false; });
// optional mouse look (pointer lock)
renderer.domElement.addEventListener('click',()=>renderer.domElement.requestPointerLock());
document.addEventListener('pointerlockchange',()=>{ if(document.pointerLockElement!==renderer.domElement) lookDX=0;});
let lookDX=0;
document.addEventListener('mousemove',e=>{
if(document.pointerLockElement===renderer.domElement){
lookDX = -e.movementX*0.002;
}
});
// ------------------------------
// 6. Minimap canvas
// ------------------------------
const mini = document.getElementById('minimap');
mini.width = 220;
mini.height= 220;
const mCtx = mini.getContext('2d');
const MM_PAD = 10;
const MM_SCALE = (mini.width-2*MM_PAD)/dungeonW;
// ------------------------------
// 7. Game loop
// ------------------------------
function animate(){
requestAnimationFrame(animate);
handleControls();
renderer.render(scene,camera);
updateMinimap();
}
animate();
// ------------------------------
// 8. Helpers
// ------------------------------
function handleControls(){
// rotation
if(keys['a']) player.rot += 0.04;
if(keys['d']) player.rot -= 0.04;
player.rot = (player.rot+Math.PI*2)%(Math.PI*2);
// movement vector
let dx=0, dz=0;
const speed = 0.05;
if(keys['w']){ dx+= Math.sin(player.rot)*speed; dz+= Math.cos(player.rot)*speed; }
if(keys['s']){ dx-= Math.sin(player.rot)*speed; dz-= Math.cos(player.rot)*speed; }
// update from mouse
if(lookDX!==0){
player.rot += lookDX;
lookDX=0;
}
// attempt move
tryMove(dx,dz);
updateCameraPosition();
}
function tryMove(dx,dz){
let nx = player.x*CELL + dx;
let nz = player.y*CELL + dz;
let gx = Math.floor(nx/CELL+0.5);
let gy = Math.floor(nz/CELL+0.5);
if(isWalkable(gx,gy)){
player.x = nx/CELL;
player.y = nz/CELL;
}
}
function isWalkable(gx,gy){
if(gx<0||gy<0||gx>=dungeonW||gy>=dungeonH) return false;
return layout[gy][gx] !== '#';
}
function updateCameraPosition(){
camera.position.set(
(player.x+0.5-dungeonW/2)*CELL,
1.0,
(player.y+0.5-dungeonH/2)*CELL
);
camera.rotation.set(0,player.rot,0);
}
function updateMinimap(){
// reveal radius (cells)
const R = 3;
const px = Math.floor(player.x);
const py = Math.floor(player.y);
for(let y=-R;y<=R;y++){
for(let x=-R;x<=R;x++){
let gx=px+x, gy=py+y;
if(gx>=0&&gy>=0&&gx<dungeonW&&gy<dungeonH){
explored[gy][gx]=true;
}
}
}
// draw
mCtx.fillStyle="#000";
mCtx.fillRect(0,0,mini.width,mini.height);
for(let y=0;y<dungeonH;y++){
for(let x=0;x<dungeonW;x++){
if(!explored[y][x]) continue; // fog-of-war
let sx = MM_PAD + x*MM_SCALE;
let sy = MM_PAD + y*MM_SCALE;
if(layout[y][x]==="#"){
mCtx.fillStyle="#333";
}else{
mCtx.fillStyle="#888";
}
mCtx.fillRect(sx,sy,MM_SCALE,MM_SCALE);
}
}
// player marker
mCtx.fillStyle="#ff0";
let sx = MM_PAD + (player.x)*MM_SCALE;
let sy = MM_PAD + (player.y)*MM_SCALE;
mCtx.beginPath();
mCtx.arc(sx+MM_SCALE/2, sy+MM_SCALE/2, MM_SCALE/3,0,Math.PI*2);
mCtx.fill();
}
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>First-Person Dungeon Crawler</title>
<style>
body { margin: 0; overflow: hidden; }
#minimap {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
height: 200px;
background: black;
border: 2px solid white;
}
canvas { display: block; }
</style>
</head>
<body>
<canvas id="mainCanvas"></canvas>
<canvas id="minimap" width="200" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/three@0.153.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.153.0/examples/js/controls/PointerLockControls.js"></script>
<script>
let scene, camera, renderer, controls;
let velocity = new THREE.Vector3();
let keys = {}, clock = new THREE.Clock();
const fogMap = {};
const tileSize = 10;
const minimapCtx = document.getElementById('minimap').getContext('2d');
function init() {
// Main 3D View Setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);
camera = new THREE.PerspectiveCamera(75,
window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Lighting
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Controls
controls = new THREE.PointerLockControls(camera, document.body);
scene.add(controls.getObject());
document.addEventListener('click', () => controls.lock());
document.addEventListener('keydown', e => keys[e.code] = true);
document.addEventListener('keyup', e => keys[e.code] = false);
// Dungeon Creation
function createWall(x, z) {
const geometry = new THREE.BoxGeometry(10, 3, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x404040 });
const wall = new THREE.Mesh(geometry, material);
wall.position.set(x, 1.5, z);
scene.add(wall);
// Store position in fogMap
const key = `${Math.floor(x / tileSize)},${Math.floor(z / tileSize)}`;
fogMap[key] = true;
}
// Create simple dungeon layout
for (let i = 0; i <= 20; i += 10)
createWall(i, 0); // Create East-bound corridor walls
// Add connecting corridors and rooms
for (let i = -10; i >= -20; i -= 10)
createWall(i, 0); // Create West-bound corridor walls
createWall(-20, -10); // South branch
createWall(-30, -10);
createWall(0, -10); // Another corridor
createWall(10, -10);
}
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
if (controls.isLocked) {
// Movement controls
velocity.set(0, 0, 0);
if (keys['KeyW']) velocity.z -= 1;
if (keys['KeyS']) velocity.z += 1;
if (keys['KeyA']) velocity.x -= 1;
if (keys['KeyD']) velocity.x += 1;
velocity.normalize();
const directionVector = new THREE.Vector3();
camera.getWorldDirection(directionVector);
directionVector.y = 0;
directionVector.normalize();
const right = new THREE.Vector3();
camera.getWorldDirection(right);
right.crossVectors(camera.up, right).normalize();
const finalVelocity = new THREE.Vector3();
finalVelocity.add(directionVector.multiplyScalar(velocity.z));
finalVelocity.add(right.multiplyScalar(velocity.x));
finalVelocity.y = 0;
controls.getObject().position.add(finalVelocity.multiplyScalar(5 * delta));
}
// Update fog of war map
const pos = controls.getObject().position;
const key = `${Math.floor(pos.x / tileSize)},${Math.floor(pos.z / tileSize)}`;
fogMap[key] = true;
// Render main scene
renderer.render(scene, camera);
// Render minimap
minimapCtx.fillStyle = 'black';
minimapCtx.fillRect(0, 0, 200, 200);
minimapCtx.fillStyle = 'green';
for (const key in fogMap) {
const [gridX, gridZ] = key.split(',').map(Number);
// Convert to minimap coordinates (simple centered view)
const mapX = (gridX + 10) * 2;
const mapY = (gridZ + 10) * 2;
minimapCtx.fillRect(mapX, mapY, 2, 2);
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);
init();
animate();
</script>
</body>
</html>
```Drag to resize
Here's a complete HTML file for a first-person dungeon crawler with WASD controls and a fog-of-war minimap:
```html
<!DOCTYPE html>
<html>
<head>
<title>Dungeon Crawler</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
#gameCanvas {
display: block;
width: 100%;
height: 100%;
}
#minimap {
position: absolute;
top: 20px;
right: 20px;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid white;
}
#controls {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<canvas id="minimap"></canvas>
<div id="controls">WASD to move | Arrow keys to look around</div>
<script>
// Game constants
const CELL_SIZE = 32;
const MAP_WIDTH = 20;
const MAP_HEIGHT = 20;
const FOV = Math.PI / 3; // 60 degrees
const HALF_FOV = FOV / 2;
const NUM_RAYS = 320;
const RAY_STEP = 0.1;
const MAX_RAY_DISTANCE = 16;
// Game state
const player = {
x: CELL_SIZE * 1.5,
y: CELL_SIZE * 1.5,
angle: Math.PI / 4,
speed: 0
};
// Generate dungeon map (1 = wall, 0 = empty space)
const dungeon = generateDungeon(MAP_WIDTH, MAP_HEIGHT);
const visibleCells = Array(MAP_HEIGHT).fill().map(() => Array(MAP_WIDTH).fill(false));
// Canvas setup
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const minimap = document.getElementById('minimap');
const mmCtx = minimap.getContext('2d');
// Fullscreen canvas
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
minimap.width = 200;
minimap.height = 200;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Generate a simple dungeon with rooms and corridors
function generateDungeon(width, height) {
const map = Array(height).fill().map(() => Array(width).fill(1));
// Create some rooms
const rooms = [
{x: 3, y: 3, w: 4, h: 3},
{x: 10, y: 5, w: 5, h: 5},
{x: 5, y: 12, w: 3, h: 6},
{x: 15, y: 10, w: 4, h: 4}
];
// Create corridors
const corridors = [
{from: {x: 7, y: 4}, to: {x: 10, y: 7}},
{from: {x: 7, y: 4}, to: {x: 6, y: 12}},
{from: {x: 8, y: 15}, to: {x: 16, y: 12}}
];
// Carve out rooms
rooms.forEach(room => {
for (let y = room.y; y < room.y + room.h; y++) {
for (let x = room.x; x < room.x + room.w; x++) {
if (x >= 0 && x < width && y >= 0 && y < height) {
map[y][x] = 0;
}
}
}
});
// Carve out corridors
corridors.forEach(corridor => {
let x = corridor.from.x;
let y = corridor.from.y;
while (x !== corridor.to.x || y !== corridor.to.y) {
map[y][x] = 0;
if (x < corridor.to.x) x++;
else if (x > corridor.to.x) x--;
if (y < corridor.to.y) y++;
else if (y > corridor.to.y) y--;
}
map[y][x] = 0;
});
return map;
}
// Input handling
const keys = {
w: false, a: false, s: false, d: false,
ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false
};
document.addEventListener('keydown', (e) => {
if (keys.hasOwnProperty(e.key)) keys[e.key] = true;
});
document.addEventListener('keyup', (e) => {
if (keys.hasOwnProperty(e.key)) keys[e.key] = false;
});
// Game loop
function gameLoop() {
update();
render();
requestAnimationFrame(gameLoop);
}
// Update game state
function update() {
// Rotation
if (keys.ArrowLeft) player.angle -= 0.05;
if (keys.ArrowRight) player.angle += 0.05;
// Movement
let moveX = 0;
let moveY = 0;
if (keys.w) {
moveX += Math.cos(player.angle) * 2;
moveY += Math.sin(player.angle) * 2;
}
if (keys.s) {
moveX -= Math.cos(player.angle) * 2;
moveY -= Math.sin(player.angle) * 2;
}
if (keys.a) {
moveX += Math.cos(player.angle - Math.PI/2) * 1.5;
moveY += Math.sin(player.angle - Math.PI/2) * 1.5;
}
if (keys.d) {
moveX += Math.cos(player.angle + Math.PI/2) * 1.5;
moveY += Math.sin(player.angle + Math.PI/2) * 1.5;
}
// Collision detection
const newX = player.x + moveX;
const newY = player.y + moveY;
const cellX = Math.floor(newX / CELL_SIZE);
const cellY = Math.floor(newY / CELL_SIZE);
if (cellX >= 0 && cellX < MAP_WIDTH && cellY >= 0 && cellY < MAP_HEIGHT) {
if (dungeon[cellY][cellX] === 0) {
player.x = newX;
player.y = newY;
}
}
// Update visible cells (fog of war)
updateVisibleCells();
}
// Update which cells are visible to the player
function updateVisibleCells() {
// Reset visibility if needed (for dynamic lighting)
// for (let y = 0; y < MAP_HEIGHT; y++) {
// for (let x = 0; x < MAP_WIDTH; x++) {
// visibleCells[y][x] = false;
// }
// }
// Mark player's cell as visible
const playerCellX = Math.floor(player.x / CELL_SIZE);
const playerCellY = Math.floor(player.y / CELL_SIZE);
visibleCells[playerCellY][playerCellX] = true;
// Cast rays to reveal map
const stepAngle = FOV / NUM_RAYS;
let rayAngle = player.angle - HALF_FOV;
for (let i = 0; i < NUM_RAYS; i++) {
castVisibilityRay(player.x, player.y, rayAngle);
rayAngle += stepAngle;
}
}
// Cast a visibility ray to reveal map cells
function castVisibilityRay(x, y, angle) {
let rayX = x;
let rayY = y;
const cos = Math.cos(angle) * RAY_STEP;
const sin = Math.sin(angle) * RAY_STEP;
for (let i = 0; i < MAX_RAY_DISTANCE / RAY_STEP; i++) {
rayX += cos;
rayY += sin;
const cellX = Math.floor(rayX / CELL_SIZE);
const cellY = Math.floor(rayY / CELL_SIZE);
if (cellX < 0 || cellX >= MAP_WIDTH || cellY < 0 || cellY >= MAP_HEIGHT) {
break;
}
visibleCells[cellY][cellX] = true;
if (dungeon[cellY][cellX] === 1) {
break;
}
}
}
// Render the game
function render() {
// Clear the screen
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Render 3D view
render3DView();
// Render minimap
renderMinimap();
}
// Render the first-person 3D view
function render3DView() {
const wallHeight = 10000;
const stepAngle = FOV / NUM_RAYS;
let rayAngle = player.angle - HALF_FOV;
for (let i = 0; i < NUM_RAYS; i++) {
// Cast ray
const { distance, vertical } = castRay(player.x, player.y, rayAngle);
// Fix fisheye effect
const correctedDistance = distance * Math.cos(rayAngle - player.angle);
// Calculate wall height
const wallH = (CELL_SIZE / correctedDistance) * wallHeight;
// Wall color based on distance
const shade = Math.min(1, 1 / (correctedDistance / CELL_SIZE * 0.5));
const color = vertical ?
`rgb(${Math.floor(150 * shade)}, ${Math.floor(150 * shade)}, ${Math.floor(150 * shade)})` :
`rgb(${Math.floor(100 * shade)}, ${Math.floor(100 * shade)}, ${Math.floor(100 * shade)})`;
// Draw wall slice
const wallX = i * (canvas.width / NUM_RAYS);
const wallY = (canvas.height - wallH) / 2;
ctx.fillStyle = color;
ctx.fillRect(wallX, wallY, canvas.width / NUM_RAYS + 1, wallH);
// Draw ceiling
ctx.fillStyle = `rgb(50, 50, 70)`;
ctx.fillRect(wallX, 0, canvas.width / NUM_RAYS + 1, wallY);
// Draw floor
ctx.fillStyle = `rgb(80, 60, 40)`;
ctx.fillRect(wallX, wallY + wallH, canvas.width / NUM_RAYS + 1, canvas.height);
rayAngle += stepAngle;
}
}
// Cast a single ray and return distance to wall
function castRay(x, y, angle) {
// Vertical intersection check
let verticalDistance = Infinity;
let verticalX, verticalY;
let vertical = false;
if (Math.cos(angle) !== 0) {
const right = Math.cos(angle) > 0;
const dx = right ? CELL_SIZE : -CELL_SIZE;
const dy = dx * Math.tan(angle);
let vx = right ?
Math.floor(x / CELL_SIZE) * CELL_SIZE + CELL_SIZE :
Math.floor(x / CELL_SIZE) * CELL_SIZE;
let vy = y + (vx - x) * Math.tan(angle);
while (vx >= 0 && vx <= MAP_WIDTH * CELL_SIZE && vy >= 0 && vy <= MAP_HEIGHT * CELL_SIZE) {
const cellX = right ? Math.floor(vx / CELL_SIZE) : Math.floor(vx / CELL_SIZE) - 1;
const cellY = Math.floor(vy / CELL_SIZE);
if (cellX >= 0 && cellX < MAP_WIDTH && cellY >= 0 && cellY < MAP_HEIGHT) {
if (dungeon[cellY][cellX] === 1) {
verticalX = vx;
verticalY = vy;
verticalDistance = Math.sqrt((vx - x) ** 2 + (vy - y) ** 2);
vertical = true;
break;
}
}
vx += dx;
vy += dy;
}
}
// Horizontal intersection check
let horizontalDistance = Infinity;
let horizontalX, horizontalY;
let horizontal = false;
if (Math.sin(angle) !== 0) {
const up = Math.sin(angle) < 0;
const dy = up ? -CELL_SIZE : CELL_SIZE;
const dx = dy / Math.tan(angle);
let hy = up ?
Math.floor(y / CELL_SIZE) * CELL_SIZE :
Math.floor(y / CELL_SIZE) * CELL_SIZE + CELL_SIZE;
let hx = x + (hy - y) / Math.tan(angle);
while (hx >= 0 && hx <= MAP_WIDTH * CELL_SIZE && hy >= 0 && hy <= MAP_HEIGHT * CELL_SIZE) {
const cellY = up ? Math.floor(hy / CELL_SIZE) - 1 : Math.floor(hy / CELL_SIZE);
const cellX = Math.floor(hx / CELL_SIZE);
if (cellX >= 0 && cellX < MAP_WIDTH && cellY >= 0 && cellY < MAP_HEIGHT) {
if (dungeon[cellY][cellX] === 1) {
horizontalX = hx;
horizontalY = hy;
horizontalDistance = Math.sqrt((hx - x) ** 2 + (hy - y) ** 2);
horizontal = true;
break;
}
}
hx += dx;
hy += dy;
}
}
// Return the closest hit
if (verticalDistance < horizontalDistance) {
return { distance: verticalDistance, vertical: true };
} else {
return { distance: horizontalDistance, vertical: false };
}
}
// Render the overhead minimap
function renderMinimap() {
const mmSize = 200;
const mmScale = mmSize / (MAP_WIDTH * CELL_SIZE);
// Clear minimap
mmCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
mmCtx.fillRect(0, 0, mmSize, mmSize);
// Draw visible dungeon cells
for (let y = 0; y < MAP_HEIGHT; y++) {
for (let x = 0; x < MAP_WIDTH; x++) {
if (visibleCells[y][x]) {
if (dungeon[y][x] === 1) {
mmCtx.fillStyle = '#777';
} else {
mmCtx.fillStyle = '#333';
}
mmCtx.fillRect(
x * CELL_SIZE * mmScale,
y * CELL_SIZE * mmScale,
CELL_SIZE * mmScale,
CELL_SIZE * mmScale
);
}
}
}
// Draw player
mmCtx.fillStyle = 'red';
mmCtx.beginPath();
mmCtx.arc(
player.x * mmScale,
player.y * mmScale,
3, 0, Math.PI * 2
);
mmCtx.fill();
// Draw player direction
mmCtx.strokeStyle = 'yellow';
mmCtx.lineWidth = 2;
mmCtx.beginPath();
mmCtx.moveTo(
player.x * mmScale,
player.y * mmScale
);
mmCtx.lineTo(
(player.x + Math.cos(player.angle) * 20) * mmScale,
(player.y + Math.sin(player.angle) * 20) * mmScale
);
mmCtx.stroke();
}
// Start the game
gameLoop();
</script>
</body>
</html>
```
This game includes:
- First-person 3D rendering of a dungeon
- WASD movement controls (W/S for forward/back, A/D for strafe)
- Arrow keys for looking around
- A generated dungeon with rooms and corridors
- Fog of war on the minimap that only shows areas you've actually seen
- The minimap appears in the top-right corner showing the player's position and orientation
The controls are displayed on screen. The dungeon walls are rendered with distance-based shading to create a 3D effect. The minimap reveals areas as you explore them.Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Dungeon Crawler</title>
<style>
body {
margin: 0;
background-color: #f0f0f0;
}
#map-container {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
height: 200px;
border: 1px solid black;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="map-container">
<canvas id="map"></canvas>
</div>
<script>
// Get the canvas elements
const canvas = document.getElementById('canvas');
const mapCanvas = document.getElementById('map');
// Set up the canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
mapCanvas.width = 200;
mapCanvas.height = 200;
// Get the context
const ctx = canvas.getContext('2d');
const mapCtx = mapCanvas.getContext('2d');
// Define the dungeon layout
const dungeonLayout = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 0, 1, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 0, 1, 0, 1],
[1, 0, 0, 0, 0, 1, 0, 1, 0, 1],
[1, 1, 1, 1, 0, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 0, 0, 0, 1],
[1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
];
// Define the player's starting position and direction
let playerX = 5;
let playerZ = 5;
let playerDirX = 0;
let playerDirZ = -1;
// Define the player's camera properties
const fov = Math.PI / 2;
const near = 0.1;
const far = 10;
// Define the map properties
const mapScale = 20;
// Define the fog of war
const fogOfWar = new Array(dungeonLayout.length).fill(0).map(() => new Array(dungeonLayout[0].length).fill(false));
// Handle keyboard input
const keys = {};
document.addEventListener('keydown', (e) => {
keys[e.key] = true;
});
document.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// Main loop
function render() {
// Move the player
if (keys['w']) {
playerX += playerDirX * 0.1;
playerZ += playerDirZ * 0.1;
}
if (keys['s']) {
playerX -= playerDirX * 0.1;
playerZ -= playerDirZ * 0.1;
}
if (keys['a']) {
const newDirX = playerDirX * Math.cos(0.1) - playerDirZ * Math.sin(0.1);
const newDirZ = playerDirX * Math.sin(0.1) + playerDirZ * Math.cos(0.1);
playerDirX = newDirX;
playerDirZ = newDirZ;
}
if (keys['d']) {
const newDirX = playerDirX * Math.cos(-0.1) - playerDirZ * Math.sin(-0.1);
const newDirZ = playerDirX * Math.sin(-0.1) + playerDirZ * Math.cos(-0.1);
playerDirX = newDirX;
playerDirZ = newDirZ;
}
// Render the 3D scene
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < canvas.width; i++) {
const rayAngle = (i / canvas.width) * fov - fov / 2;
const rayDirX = Math.cos(rayAngle + Math.atan2(playerDirZ, playerDirX));
const rayDirZ = Math.sin(rayAngle + Math.atan2(playerDirZ, playerDirX));
let distance = 0;
while (distance < far) {
const testX = playerX + rayDirX * distance;
const testZ = playerZ + rayDirZ * distance;
const mapX = Math.floor(testX);
const mapZ = Math.floor(testZ);
if (dungeonLayout[mapZ][mapX] === 1) {
const wallHeight = canvas.height / (distance + 1);
ctx.fillStyle = `rgb(${Math.floor(255 / (distance + 1))}, 0, 0)`;
ctx.fillRect(i, canvas.height / 2 - wallHeight / 2, 1, wallHeight);
break;
}
distance += 0.1;
}
}
// Update the fog of war
const playerMapX = Math.floor(playerX);
const playerMapZ = Math.floor(playerZ);
for (let z = -1; z <= 1; z++) {
for (let x = -1; x <= 1; x++) {
const mapX = playerMapX + x;
const mapZ = playerMapZ + z;
if (mapX >= 0 && mapX < dungeonLayout[0].length && mapZ >= 0 && mapZ < dungeonLayout.length) {
fogOfWar[mapZ][mapX] = true;
}
}
}
// Render the map
mapCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
for (let z = 0; z < dungeonLayout.length; z++) {
for (let x = 0; x < dungeonLayout[z].length; x++) {
if (fogOfWar[z][x]) {
if (dungeonLayout[z][x] === 1) {
mapCtx.fillStyle = 'black';
} else {
mapCtx.fillStyle = 'white';
}
mapCtx.fillRect(x * mapScale, z * mapScale, mapScale, mapScale);
}
}
}
mapCtx.fillStyle = 'red';
mapCtx.fillRect(playerMapX * mapScale, playerMapZ * mapScale, mapScale, mapScale);
// Request the next frame
requestAnimationFrame(render);
}
// Start the game
render();
</script>
</body>
</html>
```
This code creates a basic first-person view dungeon crawler game using HTML5 canvas. The game uses the WASD keys to control the player's movement and direction. The game also includes a mini-map in the top-right corner of the screen, which displays the parts of the dungeon that the player has seen.
Please note that this is a basic implementation and can be improved in many ways, such as adding more features to the game, improving the graphics, and optimizing the performance.
To run this code, simply save it as an HTML file and open it in a web browser.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dungeon Crawler</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
font-family: Arial, sans-serif;
}
#gameCanvas {
display: block;
cursor: crosshair;
}
#minimap {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
height: 200px;
border: 2px solid #fff;
background: #000;
}
#instructions {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 14px;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<canvas id="minimap"></canvas>
<div id="instructions">
Use WASD to move<br>
Move mouse to look around
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const minimap = document.getElementById('minimap');
const minimapCtx = minimap.getContext('2d');
// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Game state
const player = {
x: 1.5,
y: 1.5,
angle: 0,
fov: Math.PI / 3,
speed: 0.03
};
const keys = {};
let mouseX = 0;
// Dungeon map (1 = wall, 0 = floor)
const dungeon = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,0,1,0,1,1,1,1,1,0,1,1,0,1],
[1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1],
[1,0,1,1,1,1,1,0,1,0,1,1,1,1,0,1],
[1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,1],
[1,1,1,0,1,1,1,1,1,0,1,1,0,1,0,1],
[1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
[1,0,1,1,1,1,1,0,1,1,1,0,1,1,1,1],
[1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1],
[1,0,1,0,1,0,1,1,1,1,1,1,1,0,1,1],
[1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,0,1,1,1,0,1,1,1,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,1,1,1,1,1,1,1,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
// Fog of war - tracks which cells have been seen
const fogOfWar = Array(dungeon.length).fill().map(() => Array(dungeon[0].length).fill(false));
// Raycasting parameters
const rayCount = canvas.width / 2;
const maxDistance = 10;
const wallHeight = 200;
// Event listeners
document.addEventListener('keydown', (e) => {
keys[e.key.toLowerCase()] = true;
});
document.addEventListener('keyup', (e) => {
keys[e.key.toLowerCase()] = false;
});
document.addEventListener('mousemove', (e) => {
const deltaX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
player.angle += deltaX * 0.002;
});
// Request pointer lock for mouse look
canvas.addEventListener('click', () => {
canvas.requestPointerLock();
});
function isWall(x, y) {
const mapX = Math.floor(x);
const mapY = Math.floor(y);
if (mapX < 0 || mapX >= dungeon[0].length || mapY < 0 || mapY >= dungeon.length) {
return true;
}
return dungeon[mapY][mapX] === 1;
}
function castRay(startX, startY, angle) {
const stepSize = 0.02;
let distance = 0;
while (distance < maxDistance) {
const x = startX + Math.cos(angle) * distance;
const y = startY + Math.sin(angle) * distance;
if (isWall(x, y)) {
return distance;
}
distance += stepSize;
}
return maxDistance;
}
function updateFogOfWar() {
const viewDistance = 3;
const centerX = Math.floor(player.x);
const centerY = Math.floor(player.y);
// Mark cells within view distance as seen
for (let dy = -viewDistance; dy <= viewDistance; dy++) {
for (let dx = -viewDistance; dx <= viewDistance; dx++) {
const mapX = centerX + dx;
const mapY = centerY + dy;
if (mapX >= 0 && mapX < dungeon[0].length && mapY >= 0 && mapY < dungeon.length) {
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance <= viewDistance) {
// Cast a ray to check if the cell is visible
const angle = Math.atan2(dy, dx);
const rayDistance = castRay(player.x, player.y, angle);
if (rayDistance >= distance || !isWall(mapX, mapY)) {
fogOfWar[mapY][mapX] = true;
}
}
}
}
}
}
function update() {
// Handle movement
let moveX = 0;
let moveY = 0;
if (keys['w']) {
moveX = Math.cos(player.angle) * player.speed;
moveY = Math.sin(player.angle) * player.speed;
}
if (keys['s']) {
moveX = -Math.cos(player.angle) * player.speed;
moveY = -Math.sin(player.angle) * player.speed;
}
if (keys['a']) {
moveX = Math.cos(player.angle - Math.PI/2) * player.speed;
moveY = Math.sin(player.angle - Math.PI/2) * player.speed;
}
if (keys['d']) {
moveX = Math.cos(player.angle + Math.PI/2) * player.speed;
moveY = Math.sin(player.angle + Math.PI/2) * player.speed;
}
// Check collision and move
if (!isWall(player.x + moveX, player.y)) {
player.x += moveX;
}
if (!isWall(player.x, player.y + moveY)) {
player.y += moveY;
}
updateFogOfWar();
}
function render() {
// Clear canvas
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw floor
ctx.fillStyle = '#444';
ctx.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2);
// Cast rays for 3D view
for (let i = 0; i < rayCount; i++) {
const rayAngle = player.angle - player.fov / 2 + (player.fov * i) / rayCount;
const distance = castRay(player.x, player.y, rayAngle);
// Calculate wall height based on distance
const correctedDistance = distance * Math.cos(rayAngle - player.angle);
const height = wallHeight / correctedDistance;
// Calculate wall color based on distance
const brightness = Math.max(0.1, 1 - correctedDistance / maxDistance);
const color = Math.floor(100 * brightness);
ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
ctx.fillRect(
(i * canvas.width) / rayCount,
(canvas.height - height) / 2,
canvas.width / rayCount,
height
);
}
}
function renderMinimap() {
minimapCtx.fillStyle = '#000';
minimapCtx.fillRect(0, 0, 200, 200);
const cellSize = 200 / Math.max(dungeon.length, dungeon[0].length);
// Draw explored areas
for (let y = 0; y < dungeon.length; y++) {
for (let x = 0; x < dungeon[y].length; x++) {
if (fogOfWar[y][x]) {
if (dungeon[y][x] === 1) {
minimapCtx.fillStyle = '#666';
} else {
minimapCtx.fillStyle = '#fff';
}
minimapCtx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
}
}
}
// Draw player
minimapCtx.fillStyle = '#ff0000';
minimapCtx.beginPath();
minimapCtx.arc(
player.x * cellSize,
player.y * cellSize,
3,
0,
2 * Math.PI
);
minimapCtx.fill();
// Draw player direction
minimapCtx.strokeStyle = '#ff0000';
minimapCtx.lineWidth = 2;
minimapCtx.beginPath();
minimapCtx.moveTo(player.x * cellSize, player.y * cellSize);
minimapCtx.lineTo(
player.x * cellSize + Math.cos(player.angle) * 10,
player.y * cellSize + Math.sin(player.angle) * 10
);
minimapCtx.stroke();
}
function gameLoop() {
update();
render();
renderMinimap();
requestAnimationFrame(gameLoop);
}
// Handle window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Start the game
gameLoop();
</script>
</body>
</html>
```
This dungeon crawler game features:
1. **First-person 3D view** using raycasting to render walls with proper depth and shading
2. **WASD movement controls** - W/S for forward/backward, A/D for strafe left/right
3. **Mouse look** - Click on the canvas and move your mouse to look around
4. **Procedural dungeon** with corridors and rooms
5. **Fog of war system** - The minimap in the top right only shows areas you've explored
6. **Real-time minimap** with your position (red dot) and facing direction
The game uses a simple raycasting engine to create the 3D effect, where walls appear taller when closer and darker when farther away. The fog of war reveals parts of the dungeon as you explore, and the minimap helps you navigate the maze-like structure.Drag to resize
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dungeon Crawler</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
#mapCanvas { position: absolute; top: 10px; right: 10px; width: 200px; height: 200px; border: 1px solid black; }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<canvas id="mapCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/PointerLockControls.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
// Add lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 10, 0);
scene.add(directionalLight);
// Generate dungeon: Simple grid of walls
const wallGeometry = new THREE.BoxGeometry(1, 2, 1); // Walls are 1x2x1 units
const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
for (let x = -5; x <= 5; x += 2) {
for (let z = -5; z <= 5; z += 2) {
if (Math.abs(x) === 5 || Math.abs(z) === 5 || (x === -3 && z === -3) || (x === -3 && z === 3)) { // Outer walls and some inner walls for rooms/corridors
const wall = new THREE.Mesh(wallGeometry, wallMaterial);
wall.position.set(x, 1, z); // Position at ground level
scene.add(wall);
}
}
}
// Add floor
const floorGeometry = new THREE.PlaneGeometry(10, 10);
const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x404040 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = 0;
scene.add(floor);
// Set initial camera position inside the dungeon
camera.position.set(0, 1.6, 0); // Eye level, starting in the center
// Controls for WASD and mouse look
const controls = new THREE.PointerLockControls(camera, document.body);
document.body.addEventListener('click', () => {
controls.lock();
});
// Handle WASD movement
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
let moveForward = false;
let moveBackward = false;
let moveLeft = false;
let moveRight = false;
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'w': moveForward = true; break;
case 's': moveBackward = true; break;
case 'a': moveLeft = true; break;
case 'd': moveRight = true; break;
}
});
document.addEventListener('keyup', (event) => {
switch (event.key) {
case 'w': moveForward = false; break;
case 's': moveBackward = false; break;
case 'a': moveLeft = false; break;
case 'd': moveRight = false; break;
}
});
// Overhead map with fog of war
const mapCanvas = document.getElementById('mapCanvas');
const mapCtx = mapCanvas.getContext('2d');
const mapSize = 10; // 10x10 grid representing -5 to 5
const cellSize = 20; // Each cell is 20x20 pixels
const visibility = Array(mapSize).fill().map(() => Array(mapSize).fill(false)); // Fog of war array
function updateMap() {
mapCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
for (let i = 0; i < mapSize; i++) {
for (let j = 0; j < mapSize; j++) {
if (visibility[i][j]) {
mapCtx.fillStyle = 'black'; // Wall or floor, simplified
mapCtx.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);
}
}
}
// Draw player position on map
const playerGridX = Math.floor((camera.position.x + 5) + 0.5); // Convert world x to grid index
const playerGridZ = Math.floor((camera.position.z + 5) + 0.5); // Convert world z to grid index
if (playerGridX >= 0 && playerGridX < mapSize && playerGridZ >= 0 && playerGridZ < mapSize) {
visibility[playerGridX][playerGridZ] = true; // Reveal current cell
mapCtx.fillStyle = 'red'; // Player indicator
mapCtx.fillRect(playerGridX * cellSize, playerGridZ * cellSize, cellSize, cellSize);
}
}
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta(); // Time delta for smooth movement
if (controls.isLocked) {
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
direction.z = Number(moveForward) - Number(moveBackward);
direction.x = Number(moveRight) - Number(moveLeft);
direction.normalize();
if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;
controls.moveRight(-velocity.x * delta);
controls.moveForward(-velocity.z * delta);
}
updateMap(); // Update the map each frame
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
```Drag to resize