537 lines
16 KiB
JavaScript
Executable File
537 lines
16 KiB
JavaScript
Executable File
import { sprintf } from "sprintf-js";
|
||
import { Vector2i } from "./vec2.js";
|
||
import { AsciiWindow } from "./ascrii_window.js";
|
||
|
||
const PI_OVER_TWO = Math.PI / 2;
|
||
|
||
/**
|
||
* Enum Cardinal Direction (east north west south)
|
||
* @constant
|
||
* @readonly
|
||
*/
|
||
const CardinalDirection = {
|
||
/** @constant @readonly @type {number} Going east increases X */
|
||
EAST: 0,
|
||
/** @constant @readonly @type {number} Going south increases Y */
|
||
SOUTH: 1,
|
||
/** @constant @readonly @type {number} Going west decreases X */
|
||
WEST: 2,
|
||
/** @constant @readonly @type {number} Going south decreases Y */
|
||
NORTH: 3,
|
||
};
|
||
|
||
/**
|
||
* Enum Relative Direction (forward, left, right, backwards)
|
||
* @readonly
|
||
*/
|
||
const RelativeMovement = {
|
||
FORWARD: 0,
|
||
LEFT: 3,
|
||
BACKWARD: 2,
|
||
RIGHT: 1,
|
||
};
|
||
|
||
class Player {
|
||
_posV = new Vector2i();
|
||
_directionV = new Vector2i(0, 1);
|
||
|
||
get x() {
|
||
return this._posV.x;
|
||
}
|
||
|
||
get y() {
|
||
return this._posV.y;
|
||
}
|
||
|
||
set x(x) {
|
||
this._posV.x = x | 0;
|
||
}
|
||
|
||
set y(y) {
|
||
this._posV.y = y | 0;
|
||
}
|
||
|
||
get angle() {
|
||
return this._directionV.angle();
|
||
}
|
||
|
||
get orientation() {
|
||
return this._directionV.cardinalDirection();
|
||
}
|
||
|
||
set orientation(o) {
|
||
//
|
||
// Sanitize o
|
||
o = ((o | 0) + 4) % 4;
|
||
|
||
if (o === CardinalDirection.EAST) {
|
||
this._directionV = new Vector2i(1, 0);
|
||
return;
|
||
}
|
||
if (o === CardinalDirection.NORTH) {
|
||
this._directionV = new Vector2i(0, 1);
|
||
return;
|
||
}
|
||
if (o === CardinalDirection.WEST) {
|
||
this._directionV = new Vector2i(-1, 0);
|
||
return;
|
||
}
|
||
if (o === CardinalDirection.SOUTH) {
|
||
this._directionV = new Vector2i(0, -1);
|
||
return;
|
||
}
|
||
}
|
||
|
||
withinAABB(maxX, maxY, minX = 0, minY = 0) {
|
||
return this._posV.x >= minX && this._posV.x <= maxX && this._posV.y >= minY && this._posV.y <= maxY;
|
||
}
|
||
}
|
||
|
||
class DungeonCrawler {
|
||
get isAnimating() {
|
||
return this.animation.frames.length > 0;
|
||
}
|
||
|
||
constructor() {
|
||
/** @type {number} Number of times per second we poll for controller inputs */
|
||
this.pollsPerSec = 60;
|
||
/** @type {number} */
|
||
this.debounce = 0;
|
||
|
||
/** @constant @readonly */
|
||
this.keys = {
|
||
/** @constant @readonly */
|
||
handlers: {},
|
||
/** @constant @readonly */
|
||
pressed: {},
|
||
/** @constant @readonly */
|
||
names: {},
|
||
};
|
||
|
||
this.map = {
|
||
/** @readonly height of map */
|
||
width: 0,
|
||
|
||
/** @readonly width of map */
|
||
height: 0,
|
||
|
||
/**
|
||
* @readonly
|
||
* @type {Uint8Array[]}
|
||
* info about each cell/tile in the map (is it floor, is it a wall, etc.)
|
||
*
|
||
* The number 0 is navigable and has no decoration.
|
||
* The number 1 is not navigable, and is a nondescript wall.
|
||
*
|
||
* 1 bit for navigable
|
||
* 3 bits for cell type decoration / voxel type
|
||
* 2 bits for floor decoration.
|
||
* 2 bits for ceiling decoration.
|
||
*/
|
||
cells: [],
|
||
};
|
||
|
||
this.animation = {
|
||
/** @constant @readonly @type {number} Number of frames per second used in animations */
|
||
fps: 30,
|
||
|
||
/** @constant @readonly number of seconds a typical animation takes */
|
||
duration: 0.7,
|
||
|
||
/** Array storing information about each frame of an animation to show */
|
||
frames: [],
|
||
};
|
||
|
||
/** @readonly */
|
||
this.rendering = {
|
||
enabled: true,
|
||
ticker: 0,
|
||
maxDepth: 5,
|
||
fov: Math.PI / 3, // 60 degrees, increase maybe?
|
||
view: new AsciiWindow(document.getElementById("viewport"), 120, 40),
|
||
};
|
||
|
||
/** @readonly */
|
||
this.minimap = {
|
||
parentElement: document.getElementById("minimap"),
|
||
/** @type {Element[][]} */
|
||
elements: [],
|
||
};
|
||
|
||
/**
|
||
* @typedef Player
|
||
* @type {object}
|
||
* @property {number} x integer. Player's x-coordinate on the grid.
|
||
* @property {number} y integer. Player's y-coordinate on the grid.
|
||
*/
|
||
this.player = new Player();
|
||
|
||
this.setupControls();
|
||
this.setupAnimationLoop();
|
||
|
||
this.loadMap();
|
||
this.render(this.player.x, this.player.y, this.player.orientation * PI_OVER_TWO, this.animation.frames.length);
|
||
this.updateCompass();
|
||
}
|
||
|
||
loadMap() {
|
||
this.minimap.parentElement.innerHTML = "";
|
||
|
||
const mapString = document.getElementById("mapText").value;
|
||
const lines = mapString.trim().split("\n");
|
||
|
||
const h = (this.map.height = lines.length);
|
||
const w = (this.map.width = Math.max(...lines.map((line) => line.length)));
|
||
|
||
this.map.cells = new Array(h).fill().map(() => new Uint8Array(w));
|
||
this.minimap.elements = new Array(h).fill().map(() => new Array(w));
|
||
this.minimap.parentElement.innerHTML = "";
|
||
|
||
for (let y = 0; y < h; y++) {
|
||
//
|
||
const row = document.createElement("div");
|
||
|
||
for (let x = 0; x < w; x++) {
|
||
const isFree = lines[y][x] === " ";
|
||
|
||
//
|
||
// === Internal map ===
|
||
//
|
||
this.map.cells[y][x] = isFree ? 0 : 1;
|
||
|
||
//
|
||
// === Mini Map ===
|
||
//
|
||
const mmElement = document.createElement("span");
|
||
mmElement.textContent = isFree ? " " : "#";
|
||
row.appendChild(mmElement);
|
||
this.minimap.elements[y][x] = mmElement;
|
||
}
|
||
this.minimap.parentElement.appendChild(row);
|
||
}
|
||
|
||
// Find a starting position (first open space)
|
||
for (let y = 1; y < this.map.height - 1; y++) {
|
||
for (let x = 1; x < this.map.width - 1; x++) {
|
||
if (this.isWall(x, y)) {
|
||
continue;
|
||
}
|
||
this.player.x = x;
|
||
this.player.y = y;
|
||
return;
|
||
}
|
||
}
|
||
this.updateMinimap();
|
||
}
|
||
|
||
startTurnAnimation(clockwise, quarterTurns = 1) {
|
||
if (this.isAnimating) {
|
||
throw new Error("Cannot start an animation while one is already running");
|
||
}
|
||
|
||
if (quarterTurns === 0) {
|
||
return;
|
||
}
|
||
|
||
const newDirection = clockwise
|
||
? this.player._directionV.clone().rotateCW(quarterTurns)
|
||
: this.player._directionV.clone().rotateCCW(quarterTurns);
|
||
|
||
const ticks = Math.floor(this.animation.duration * this.animation.fps);
|
||
const startAngle = this.player.angle;
|
||
const slice = this.player._directionV.angleTo(newDirection) / ticks;
|
||
|
||
this.animation.frames = [];
|
||
|
||
for (let i = 1; i < ticks; i++) {
|
||
this.animation.frames.push([
|
||
this.player.x, //
|
||
this.player.y, //
|
||
startAngle + slice * i, //
|
||
]);
|
||
}
|
||
|
||
this.animation.frames.push([this.player.x, this.player.y, newDirection.angle()]);
|
||
|
||
//
|
||
//
|
||
this.player._directionV = newDirection;
|
||
this.updateMinimap();
|
||
this.updateCompass();
|
||
}
|
||
|
||
/** @type {RelativeMovement} Direction the player is going to move */
|
||
startMoveAnimation(direction) {
|
||
if (this.isAnimating) {
|
||
throw new Error("Cannot start an animation while one is already running");
|
||
}
|
||
|
||
const targetV = this.player._directionV.rotatedCCW(direction | 0).added(this.player._posV);
|
||
|
||
if (this.isWall(targetV.x, targetV.y)) {
|
||
this.debounce = (this.pollsPerSec / 5) | 0;
|
||
console.info(
|
||
"bumped into wall at %s (mypos: %s), direction=%d",
|
||
targetV,
|
||
this.player._posV,
|
||
this.player.angle,
|
||
);
|
||
return;
|
||
}
|
||
|
||
const ticks = Math.floor(this.animation.duration * this.animation.fps);
|
||
const stepX = (targetV.x - this.player.x) / ticks;
|
||
const stepY = (targetV.y - this.player.y) / ticks;
|
||
|
||
this.animation.frames = [];
|
||
for (let i = 1; i < ticks; i++) {
|
||
this.animation.frames.push([
|
||
this.player.x + stepX * i, //
|
||
this.player.y + stepY * i, //
|
||
this.player.angle, //
|
||
]);
|
||
}
|
||
this.animation.frames.push([targetV.x, targetV.y, this.player.angle]);
|
||
this.player._posV = targetV;
|
||
this.updateMinimap();
|
||
this.updateCompass(); // technically not necessary, but Im anticipating the need + compensating for my bad memory.
|
||
}
|
||
|
||
setupControls() {
|
||
this.keys.pressed = {};
|
||
|
||
this.keys.handlers = {
|
||
KeyA: () => this.startMoveAnimation(RelativeMovement.LEFT),
|
||
KeyD: () => this.startMoveAnimation(RelativeMovement.RIGHT),
|
||
KeyS: () => this.startMoveAnimation(RelativeMovement.BACKWARD),
|
||
KeyW: () => this.startMoveAnimation(RelativeMovement.FORWARD),
|
||
ArrowUp: () => this.startMoveAnimation(RelativeMovement.FORWARD),
|
||
ArrowDown: () => this.startMoveAnimation(RelativeMovement.BACKWARD),
|
||
ArrowLeft: () => this.startTurnAnimation(true),
|
||
ArrowRight: () => this.startTurnAnimation(false),
|
||
KeyQ: () => this.startTurnAnimation(true),
|
||
KeyE: () => this.startTurnAnimation(false),
|
||
};
|
||
this.keys.names = Object.keys(this.keys.handlers);
|
||
|
||
document.addEventListener(
|
||
"keydown",
|
||
(e) => {
|
||
const id = e.code;
|
||
this.keys.pressed[id] = true;
|
||
},
|
||
true,
|
||
);
|
||
|
||
document.addEventListener(
|
||
"keyup",
|
||
(e) => {
|
||
const id = e.code;
|
||
this.keys.pressed[id] = false;
|
||
},
|
||
true,
|
||
);
|
||
|
||
const ticks = Math.round(1000 / this.pollsPerSec);
|
||
this.keys.interval = setInterval(() => {
|
||
this.handleKeyboardInput();
|
||
}, ticks);
|
||
}
|
||
|
||
handleKeyboardInput() {
|
||
if (this.debounce > 0) {
|
||
this.debounce--;
|
||
return;
|
||
}
|
||
|
||
if (this.isAnimating) {
|
||
return;
|
||
}
|
||
|
||
//
|
||
// Check each key we can handle.
|
||
for (let key of this.keys.names) {
|
||
if (this.keys.pressed[key]) {
|
||
this.debounce = Math.floor(this.animation.fps * this.animation.animationDuration) - 1;
|
||
const keyHandler = this.keys.handlers[key];
|
||
keyHandler();
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
handleAnimation() {
|
||
if (!this.isAnimating) {
|
||
return;
|
||
}
|
||
|
||
const [x, y, a] = this.animation.frames.shift();
|
||
const framesLeft = this.animation.frames.length;
|
||
this.render(x, y, a, framesLeft);
|
||
}
|
||
|
||
// _____ ___ ____ ___
|
||
// |_ _/ _ \| _ \ / _ \ _
|
||
// | || | | | | | | | | (_)
|
||
// | || |_| | |_| | |_| |_
|
||
// |_| \___/|____/ \___/(_)
|
||
// -----------------------------
|
||
// Animation loop
|
||
// requestAnimationFrame(loop);
|
||
// requires using deltaT rather than ticks, etc.
|
||
setupAnimationLoop() {
|
||
const ticks = Math.round(1000 / this.animation.fps);
|
||
this.animation.interval = setInterval(() => this.handleAnimation(), ticks);
|
||
}
|
||
|
||
isWall(x, y) {
|
||
let mapX = x | 0;
|
||
let mapY = y | 0;
|
||
|
||
if (mapX < 0 || mapX >= this.map.width || mapY < 0 || mapY >= this.map.height) {
|
||
return true;
|
||
}
|
||
|
||
return this.map.cells[mapY][mapX] !== 0;
|
||
}
|
||
|
||
castRay(camX, camY, camAngle, angleOffset) {
|
||
const rayAngle = camAngle + angleOffset;
|
||
const rayX = Math.cos(rayAngle);
|
||
const rayY = Math.sin(rayAngle);
|
||
const fishEye = Math.cos(angleOffset); // corrects fish-eye effect https://stackoverflow.com/questions/66591163/how-do-i-fix-the-warped-perspective-in-my-raycaster
|
||
// const fishEye = 1;
|
||
|
||
let distance = Math.SQRT1_2 / 2;
|
||
let step = 0.0001;
|
||
|
||
while (distance < this.rendering.maxDepth) {
|
||
const testX = camX + rayX * distance;
|
||
const testY = camY + rayY * distance;
|
||
|
||
if (this.isWall(testX, testY)) {
|
||
return [
|
||
distance * fishEye,
|
||
{
|
||
// testX,
|
||
// testY,
|
||
// rayDistance: distance, // the distance the ray traveled, not the distance the object was away from us
|
||
color: (1 - distance / this.rendering.maxDepth) * 1.0,
|
||
},
|
||
];
|
||
}
|
||
|
||
distance += step;
|
||
}
|
||
|
||
return [this.rendering.maxDepth, "#000"];
|
||
}
|
||
|
||
render(x, y, direction) {
|
||
if (!this.rendering.enabled) {
|
||
return false;
|
||
}
|
||
|
||
this.rendering.ticker++;
|
||
|
||
x += 0.5;
|
||
y += 0.5;
|
||
|
||
const h = this.rendering.view.height;
|
||
const w = this.rendering.view.width;
|
||
|
||
// const middle = this.rendering.height / 2;
|
||
// Hack to simulate bouncy walking by moving the middle of the screen up and down a bit
|
||
const bounce = Math.sin(this.rendering.ticker / 4) * 0.2;
|
||
const middle = h / 2 + bounce;
|
||
|
||
for (let screenX = 0; screenX < w; screenX++) {
|
||
//
|
||
//
|
||
const rayOffset = (screenX / w) * this.rendering.fov - this.rendering.fov / 2;
|
||
|
||
//
|
||
// Cast the ray, one ray per column, just like wolfenstein
|
||
const [distance, wall] = this.castRay(x, y, direction, rayOffset);
|
||
|
||
//
|
||
// Start drawing
|
||
for (let screenY = 0; screenY < h; screenY++) {
|
||
//
|
||
// Calculate how high walls are at the distance of the ray's intersection
|
||
const wallH = middle / distance;
|
||
|
||
//
|
||
// Given the current y-coordinate and distance, are we hitting the ceiling?
|
||
if (screenY < middle - wallH) {
|
||
this.rendering.view.put(screenX, screenY, "´", "#999");
|
||
continue;
|
||
}
|
||
|
||
//
|
||
// Given the current y-coordinate and distance, are we hitting the floor?
|
||
if (screenY > middle + wallH) {
|
||
this.rendering.view.put(screenX, screenY, "~", "#b52");
|
||
continue;
|
||
}
|
||
|
||
//
|
||
// We've either hit a wall or the limit of our visibility,
|
||
// So we Determine the color of the pixel to draw.
|
||
const color = wall && wall.color ? wall.color : 1 - distance / this.rendering.maxDepth;
|
||
|
||
// TODO: Lerp these characters.
|
||
// const distancePalette = ["█", "▓", "▒", "░", " "];
|
||
const distancePalette = ["#", "%", "+", "÷", " "];
|
||
const char = distancePalette[distance | 0];
|
||
|
||
this.rendering.view.put(screenX, screenY, char, color);
|
||
}
|
||
}
|
||
this.rendering.view.commitToDOM();
|
||
}
|
||
|
||
updateCompass() {
|
||
//
|
||
//
|
||
// Update the compass
|
||
document.getElementById("compass").textContent = sprintf(
|
||
"%s %s (%d --> %.2f [%dº])",
|
||
this.player._posV,
|
||
Object.keys(CardinalDirection)[this.player.orientation].toLowerCase(),
|
||
this.player.orientation,
|
||
this.player.orientation * PI_OVER_TWO,
|
||
this.player.orientation * 90,
|
||
);
|
||
}
|
||
|
||
updateMinimap() {
|
||
if (!this.player.withinAABB(this.map.width - 1, this.map.height - 1)) {
|
||
console.error("Player out of bounds");
|
||
return;
|
||
}
|
||
|
||
//
|
||
// Remove the old player symbol
|
||
const playerEl = document.querySelector(".player");
|
||
if (playerEl) {
|
||
playerEl.className = "";
|
||
}
|
||
|
||
// This is just for debugging!
|
||
//
|
||
|
||
for (let y = 0; y < this.map.height; y++) {
|
||
for (let x = 0; x < this.map.width; x++) {
|
||
this.minimap.elements[y][x].textContent = this.map.cells[y][x] ? "#" : " ";
|
||
}
|
||
}
|
||
// Add the player token to the minimap
|
||
const dirForCSS = Object.keys(CardinalDirection)[this.player.orientation].toLowerCase();
|
||
this.minimap.elements[this.player.y][this.player.x].classList.add("player", dirForCSS);
|
||
}
|
||
}
|
||
|
||
// Start the game
|
||
window.game = new DungeonCrawler();
|