diff --git a/css/style.css b/css/style.css index 8beaf1c..87e1421 100644 --- a/css/style.css +++ b/css/style.css @@ -30,20 +30,20 @@ body { /* GRID */ .row { display: block; - height: 30px; + height: 15px; overflow: hidden; } .cell { display: inline-block; font-family: "Noto Mono", monospace; - font-size: 32px; + font-size: 16px; font-weight: bold; - height: 30px; - line-height: 30px; + height: 15px; + line-height: 15px; overflow: hidden; text-align: center; - width: 20px; + width: 10px; } /* HUD */ diff --git a/js/logic.js b/js/logic.js index 196c790..06e17ac 100644 --- a/js/logic.js +++ b/js/logic.js @@ -2,9 +2,9 @@ const logic = (function() { 'use strict'; -const MOVE_SPEED = 0.25; -const TURN_SPEED = Math.PI / 60; -const HP_TICK = 125; +const MOVE_SPEED = 0.50; +const TURN_SPEED = Math.PI / 40; +const HP_TICK = 60; const Keys = inputSystem.Keys; @@ -43,6 +43,7 @@ function goNextMap() { level.setLoc(startPos.x, startPos.y, startPos.t); levelElem.textContent = levelNum; + renderer.drawToElements(); } function updateHp() { @@ -88,6 +89,8 @@ function run() { } } + let moved = false; + const cs = inputSystem.getStates(); const delta = { f: keysToSign(cs, Keys.FORWARD, Keys.BACK) * MOVE_SPEED, @@ -102,6 +105,7 @@ function run() { if ((delta.f || delta.l || delta.t) && !died) { level.adjustPlayerLoc(delta); + moved = true; } hpTimer--; @@ -141,7 +145,9 @@ function run() { } updateHp(); - renderer.drawToElements(); + if (moved) { + renderer.drawToElements(); + } } return {run, init}; diff --git a/js/main.js b/js/main.js index f7c48a1..73eab4d 100644 --- a/js/main.js +++ b/js/main.js @@ -2,7 +2,7 @@ 'use strict'; -const LOGIC_FRAME_TIME = 16; +const LOGIC_FRAME_TIME = 33; window.onload = () => { const container = document.getElementById('container'); diff --git a/js/renderer.js b/js/renderer.js index 68acf38..298b823 100644 --- a/js/renderer.js +++ b/js/renderer.js @@ -2,14 +2,16 @@ const renderer = (function() { 'use strict'; -const CELL_WIDTH = 20; -const CELL_HEIGHT = 30; +const CELL_WIDTH = 10; +const CELL_HEIGHT = 15; const DIST_FACTOR = 0.5; const FOV = 100 / 360 * Math.PI * 2; -const NUM_COLS = 64; // CHANGE THIS HERE IF YOU MUCK WITH THE RENDERER AGAIN +const NUM_COLS = 128; // CHANGE THIS HERE IF YOU MUCK WITH THE RENDERER AGAIN const cells = []; +const renderedHeights = Array(NUM_COLS).fill(0); +const renderedWall = Array(NUM_COLS).fill(null); let entLayer = null; let cellWidth = 0; @@ -31,7 +33,7 @@ function makeElements(container, layerElem, width, height) { row.className = 'row'; const isCeil = isCeiling(i, vCells); - const dist = 1 - 0.25 / Math.abs(10.5 - i); + const dist = 1 - 0.5 / Math.pow(Math.abs(20.5 - i), .5); const baseV = isCeil ? 40 : 90; const color = `hsl(0,0%,${Math.round(baseV * dist)}%)`; row.style.color = color; @@ -39,6 +41,7 @@ function makeElements(container, layerElem, width, height) { for (let j = 0; j < hCells; ++j) { const cell = document.createElement('div'); cell.className = 'cell'; + cell.textContent = isCeil ? '~' : '.'; row.appendChild(cell); cells.push(cell); @@ -54,47 +57,84 @@ function drawToElements() { const dt = FOV / NUM_COLS; const player = level.getPlayerLoc(); - const test = []; + let repaints = 0; for (let i = 0; i < NUM_COLS; ++i) { const tAdjust = dt * (i - NUM_COLS / 2); const ct = player.t + tAdjust; let wallDist = 9999; - let wallCol = null; + let hitWall = null; for (const wall of map.getWalls()) { const dist = wall.checkRay(player.x, player.y, ct) * DIST_FACTOR; if (dist && dist < wallDist) { wallDist = dist; - wallCol = wall.color; + hitWall = wall; } } - test.push([Math.round(10 / Math.max(wallDist, 0.5) / Math.cos(tAdjust)), - wallCol, wallDist]); - } - - for (let i = 0; i < cells.length; ++i) { - const cell = cells[i]; - const v = Math.floor(i / cellWidth); - const h = i % cellWidth; - const isWall = (Math.abs(10 - v) < test[h][0]); - if (isWall) { - cell.textContent = '\u2592'; + const wallHeight = Math.min(Math.round( + 20 / Math.max(wallDist, 0.5) / Math.cos(tAdjust)), 21); + const renderedHeight = renderedHeights[i]; + + if (wallHeight < renderedHeight) { + const ua = 21 - renderedHeight; + const ub = 21 - wallHeight; + const la = wallHeight + 20; + const lb = renderedHeight + 20; + + // clear walls + for (let v = ua; v < ub; ++v) { + const cell = cells[v * NUM_COLS + i]; + cell.textContent = '~'; + cell.removeAttribute('style'); + repaints++; + } + for (let v = la + 1; v <= lb; ++v) { + const cell = cells[v * NUM_COLS + i]; + cell.textContent = '.'; + cell.removeAttribute('style'); + repaints++; + } + } else if (wallHeight > renderedHeight) { + const ua = 21 - wallHeight; + const ub = 21 - renderedHeight; + const la = renderedHeight + 20; + const lb = wallHeight + 20; + + const [ch, cs, cl] = hitWall.color; + const colorStr = `hsl(${ch},${cs}%,${cl}%)`; + + // add on walls + for (let v = ua; v <= ub; ++v) { + const cell = cells[v * NUM_COLS + i]; + cell.textContent = '\u2592'; + cell.style.color = colorStr; + repaints++; + } + for (let v = la; v <= lb; ++v) { + const cell = cells[v * NUM_COLS + i]; + cell.textContent = '\u2592'; + cell.style.color = colorStr; + repaints++; + } + } - const [ch, cs, cl] = test[h][1]; - cell.style.color = `hsl(${ch},${cs}%,${cl}%)`; + // repaint wall column if necessary + if (renderedWall[i] != hitWall) { + const [ch, cs, cl] = hitWall.color; + const colorStr = `hsl(${ch},${cs}%,${cl}%)`; - // can't do this cause the performance kinda sux, but it looks - // sooooo nice :( - //const lAdjust = 0.5 + 0.5 / test[h][2]; - //cell.style.color = `hsl(${ch},${cs}%,${Math.round(cl*lAdjust)}%)`; - } else { - const isCeil = isCeiling(v, cells.length / cellWidth); - cell.textContent = (v == 10) ? ' ' : (isCeil ? '~' : '.'); - cell.style.color = ''; + for (let v = 21 - wallHeight; v <= 20 + wallHeight; ++v) { + const cell = cells[v * cellWidth + i]; + cell.style.color = colorStr; + repaints++; + } } + + renderedHeights[i] = wallHeight; + renderedWall[i] = hitWall; } const mapNode = map.findNode(player.x, player.y); @@ -117,7 +157,7 @@ function drawToElements() { if (dt < FOV / 2 && dt > -FOV / 2) { const dist = e.getDistance(player.x, player.y) * DIST_FACTOR; - const showSize = 10 / Math.max(dist, 0.5) / Math.cos(dt) * e.size; + const showSize = 20 / Math.max(dist, 0.5) / Math.cos(dt) * e.size; const x = 640 - dt / Math.PI * 640 * 4 - showSize / 2; const y = 630 / 2 - showSize / 2; @@ -130,7 +170,7 @@ function drawToElements() { elem.style.lineHeight = `${Math.round(showSize)}px`; elem.style.fontSize = `${Math.round(showSize)}px`; } else { - elem.style.display = ''; + elem.removeAttribute('style'); } } }