const SNES_WIDTH = 256; const SNES_HEIGHT = 224; const Orientation = { UP: 'up', DOWN: 'down', LEFT: 'left', RIGHT: 'right' } function bound(low, x, high) { return Math.max(low, Math.min(x, high)); } class Input { constructor() { this.up = false; this.down = false; this.left = false; this.right = false; this.a = false; this.b = false; this.x = false; this.y = false; this.l = false; this.r = false; this.select = false; this.start = false; this.keysPressed = {}; window.addEventListener('gamepadconnected', this.gamepadConnected); window.addEventListener('gamepaddisconnected', this.gamepadDisconnected); document.addEventListener('keydown', (e) => this.keyDown(e)); document.addEventListener('keyup', (e) => this.keyUp(e)); } keyDown(e) { this.keysPressed[e.key] = true; } keyUp(e) { this.keysPressed[e.key] = false; } update() { // Default ZSNES keybindings. See: // http://zsnes-docs.sourceforge.net/html/readme.htm#default_keys this.up = this.keysPressed['ArrowUp']; this.down = this.keysPressed['ArrowDown']; this.left = this.keysPressed['ArrowLeft']; this.right = this.keysPressed['ArrowRight']; this.start = this.keysPressed['Enter']; this.select = this.keysPressed['Shift']; this.a = this.keysPressed['x']; this.b = this.keysPressed['z']; this.x = this.keysPressed['s']; this.y = this.keysPressed['a']; this.l = this.keysPressed['d']; this.r = this.keysPressed['c']; const gamepad = navigator.getGamepads()[0]; if (gamepad == null || !gamepad.connected || gamepad.axes.length < 2 || gamepad.buttons.length < 12) { return; } // TODO: have a config screen instead of hard-coding the 8Bitdo SNES30 pad. // TODO: handle connects / disconnects more correctly. this.up |= gamepad.axes[1] < 0; this.down |= gamepad.axes[1] > 0; this.left |= gamepad.axes[0] < 0; this.right |= gamepad.axes[0] > 0; this.a |= gamepad.buttons[0].pressed; this.b |= gamepad.buttons[1].pressed; this.x |= gamepad.buttons[3].pressed; this.y |= gamepad.buttons[4].pressed; this.l |= gamepad.buttons[6].pressed; this.r |= gamepad.buttons[7].pressed; this.select |= gamepad.buttons[10].pressed; this.start |= gamepad.buttons[11].pressed; debug(this.toString()); } gamepadConnected(e) { debug('gamepad connected! :)'); console.log('gamepad connected @ index %d: %d buttons, %d axes\n[%s]', e.gamepad.index, e.gamepad.buttons.length, e.gamepad.axes.length, e.gamepad.id); } gamepadDisconnected(e) { debug('gamepad disconnected :('); console.log('gamepad disconnected @ index %d:\n[%s]', e.gamepad.index, e.gamepad.id); } toString() { let result = ''; if (this.up) { result += '^'; } else if (this.down) { result += 'v'; } else { result += '-'; } if (this.left) { result += '<'; } else if (this.right) { result += '>'; } else { result += '-'; } result += ' '; if (this.a) { result += 'A'; } if (this.b) { result += 'B'; } if (this.x) { result += 'X'; } if (this.y) { result += 'Y'; } if (this.l) { result += 'L'; } if (this.r) { result += 'R'; } if (this.select) { result += 's'; } if (this.start) { result += 'S'; } return result; } } class Graphics { constructor(canvas) { this.canvas_ = canvas; this.ctx_ = canvas.getContext('2d'); this.ctx_.imageSmoothingEnabled = false; this.ctx_.mozImageSmoothingEnabled = false; this.ctx_.webkitImageSmoothingEnabled = false; this.ctx_.msImageSmoothingEnabled = false; } get width() { return this.canvas_.width; } get height() { return this.canvas_.height; } fill(color) { this.ctx_.fillStyle = color; this.ctx_.beginPath(); this.ctx_.rect(0, 0, this.canvas_.width, this.canvas_.height); this.ctx_.fill(); this.ctx_.closePath(); } circle(x, y, radius, color) { this.ctx_.fillStyle = color; this.ctx_.beginPath(); this.ctx_.arc(x, y, radius, 0, 2 * Math.PI) this.ctx_.fill(); this.ctx_.closePath(); } // TODO: replace with custom sprite-based text rendering. text(string, x, y, size, color) { this.ctx_.fillStyle = color; this.ctx_.font = '' + size + 'px monospace'; this.ctx_.fillText(string, x, y); } drawSprite(sprite, dx, dy) { this.ctx_.drawImage( sprite.image, sprite.ulx, sprite.uly, sprite.width, sprite.height, dx, dy, sprite.width, sprite.height); } } class FpsCounter { constructor() { this.fps = 0; this.frameTimes_ = new Array(60); this.idx_ = 0; } update(timestampMs) { if (this.frameTimes_[this.idx_]) { const timeElapsed = (timestampMs - this.frameTimes_[this.idx_]) / 1000; this.fps = this.frameTimes_.length / timeElapsed; } this.frameTimes_[this.idx_] = timestampMs; this.idx_++; if (this.idx_ == this.frameTimes_.length) { this.idx_ = 0; } } draw(gfx) { const fpsDiv = document.getElementById('fps'); fpsDiv.innerText = 'FPS: ' + Math.round(this.fps); } } class World { constructor() { this.state_ = null; this.fpsCounter_ = new FpsCounter(); this.input_ = new Input(); this.player_ = new Player(); // TODO: move rendering stuff to a separate object. this.resources_ = new Resources(); this.tileRenderer_ = new TileRenderer(); this.playerRenderer_ = new PlayerRenderer(); this.gamepadRenderer_ = new GamepadRenderer(); } update(timestampMs) { this.fpsCounter_.update(timestampMs); const wasRPressed = this.input_.r; this.input_.update(); if (!wasRPressed && this.input_.r) { this.player_.cycleSprite(); } if (this.input_.left) { this.player_.moveLeft(); } if (this.input_.right) { this.player_.moveRight(); } if (this.input_.up) { this.player_.moveUp(); } if (this.input_.down) { this.player_.moveDown(); } } draw(gfx) { gfx.fill('black'); this.tileRenderer_.draw(gfx, this.resources_.sprites); this.playerRenderer_.draw(gfx, this.resources_.sprites, this.player_); // this.gamepadRenderer_.draw(gfx, this.input_); this.fpsCounter_.draw(gfx); } } class Sprite { constructor(image, ulx, uly, width, height) { this.image = image; this.ulx = ulx; this.uly = uly; this.width = width; this.height = height; } } class CharacterSprite { constructor(image, ulx, uly, tileWidth, tileHeight) { // Assumption: a character sprite consists of 4 rows, which include the // character facing down, left, right, up (in that order). Each row has 3 // columns, which can be used for a walking animation. this.down = []; this.left = []; this.right = []; this.up = []; for (let i = 0; i < 3; i++) { const x = ulx + i * tileWidth; this.down.push(new Sprite( image, x, uly, tileWidth, tileHeight)); this.left.push(new Sprite( image, x, uly + tileHeight, tileWidth, tileHeight)); this.right.push(new Sprite( image, x, uly + tileHeight * 2, tileWidth, tileHeight)); this.up.push(new Sprite( image, x, uly + tileHeight * 3, tileWidth, tileHeight)); } } } class Resources { constructor() { const atlantis = document.getElementById('atlantis'); const ghost = document.getElementById('ghost'); const cats = document.getElementById('cats'); const ts = 16; this.sprites = { 'ground0': new Sprite(atlantis, 2 * ts, 1 * ts, 16, 16), 'ground1': new Sprite(atlantis, 3 * ts, 1 * ts, 16, 16), 'ground2': new Sprite(atlantis, 4 * ts, 1 * ts, 16, 16), 'ground3': new Sprite(atlantis, 5 * ts, 1 * ts, 16, 16), 'ground4': new Sprite(atlantis, 6 * ts, 1 * ts, 16, 16), 'ground5': new Sprite(atlantis, 7 * ts, 1 * ts, 16, 16), 'ground6': new Sprite(atlantis, 8 * ts, 1 * ts, 16, 16), 'rock0': new Sprite(atlantis, 1 * ts, 2 * ts, 16, 16), 'rock1': new Sprite(atlantis, 2 * ts, 2 * ts, 16, 16), 'rock2': new Sprite(atlantis, 3 * ts, 2 * ts, 16, 16), 'anchor0': new Sprite(atlantis, 21 * ts, 1 * ts, 16, 16), 'seaweed0': new Sprite(atlantis, 20 * ts, 2 * ts, 16, 32), 'seaweed1': new Sprite(atlantis, 16 * ts, 2 * ts, 16, 32), 'coral0': new Sprite(atlantis, 15 * ts, 9 * ts, 32, 16), 'rockpile0': new Sprite(atlantis, 17 * ts, 10 * ts, 32, 32), 'ghost': new CharacterSprite(ghost, 0, 0, 26, 36), 'cat0': new CharacterSprite(cats, 0, 0, 26, 36), 'cat1': new CharacterSprite(cats, 26 * 3, 0, 26, 36), 'cat2': new CharacterSprite(cats, 26 * 6, 0, 26, 36), 'cat3': new CharacterSprite(cats, 26 * 9, 0, 26, 36), 'cat4': new CharacterSprite(cats, 0, 36 * 4, 26, 36), 'cat5': new CharacterSprite(cats, 26 * 3, 36 * 4, 26, 36), 'cat6': new CharacterSprite(cats, 26 * 6, 36 * 4, 26, 36), 'cat7': new CharacterSprite(cats, 26 * 9, 36 * 4, 26, 36), } } } class Player { // TODO: stop hard-coding player bounding box. constructor() { this.x = (SNES_WIDTH - 26) / 2; this.y = (SNES_HEIGHT - 36) / 2; this.orientation = Orientation.DOWN; this.spriteNames_ = [ 'ghost', 'cat0', 'cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7']; this.spriteNamesIdx_ = 3; } get spriteName() { return this.spriteNames_[this.spriteNamesIdx_]; } cycleSprite() { this.spriteNamesIdx_++; if (this.spriteNamesIdx_ >= this.spriteNames_.length) { this.spriteNamesIdx_ = 0; } } moveLeft() { this.orientation = Orientation.LEFT; this.x -= 2; if (this.x < -4) { this.x = -4; } } moveRight() { this.orientation = Orientation.RIGHT; this.x += 2; if (this.x > SNES_WIDTH - 21) { this.x = SNES_WIDTH - 21; } } moveUp() { this.orientation = Orientation.UP; this.y -= 2; if (this.y < -7) { this.y = -7; } } moveDown() { this.orientation = Orientation.DOWN; this.y += 2; if (this.y > SNES_HEIGHT - 36) { this.y = SNES_HEIGHT - 36; } } } class PlayerRenderer { constructor() { this.frameNum = 0; } draw(gfx, sprites, player) { let spriteIndex = Math.floor((this.frameNum % 40) / 10); if (spriteIndex == 3) { spriteIndex = 1; } const charSprite = sprites[player.spriteName][player.orientation][spriteIndex]; gfx.drawSprite(charSprite, player.x, player.y); this.frameNum++; } } class TileRenderer { draw(gfx, sprites) { const tileSize = 16; const rows = gfx.height / tileSize; const columns = gfx.width / tileSize; const layer1 = ["-,*-...*'.,-_'`o", "_..'-_**,',_.'oo", "-*-''_-'o,0O_```", "o`0_._,*O'`--'-'", "`0O-_'',`o*o*`-,", "*,`'---o'O'_*''-", "'-.**.'_'`.,'-.'", ".O'``*``'`*,,_o`", "_*_''*O'`_OO-_'o", "0`0,*-,`_*'`O'*.", ".o'-*.*_',`,,`.'", "`o`O',.`OO,*-'**", "-..*'-''',*'.'.O", "*-_'-0.--__O`O`_", "*-_,O_'*'`*'_._.", "-.*,`OO'_`'*-0-O"]; const layer2 = [" ", " ", " iil ", " ", " A ", " ", " ", " ", " ", " i ", " l ", " ", " c R ", " c "]; const spriteLookup = { '.': sprites.ground0, ',': sprites.ground1, '_': sprites.ground2, '`': sprites.ground3, '-': sprites.ground4, '*': sprites.ground5, "'": sprites.ground6, 'o': sprites.rock0, 'O': sprites.rock1, '0': sprites.rock2, 'A': sprites.anchor0, 'i': sprites.seaweed0, 'l': sprites.seaweed1, 'c': sprites.coral0, 'R': sprites.rockpile0, }; for (let j = 0; j < columns; j++) { for (let i = 0; i < rows; i++) { const dx = tileSize * j; const dy = tileSize * i; const sprite = spriteLookup[layer1[i][j]]; if (sprite) { gfx.drawSprite(sprite, dx, dy); } } } for (let j = 0; j < columns; j++) { for (let i = 0; i < rows; i++) { const dx = tileSize * j; const dy = tileSize * i; const sprite = spriteLookup[layer2[i][j]]; if (sprite) { gfx.drawSprite(sprite, dx, dy); } } } } } class GamepadRenderer { draw(gfx, input) { const centerX = gfx.width / 2; const centerY = gfx.height / 2; // Select & Start gfx.circle(centerX + 12, centerY, 8, input.start ? 'cyan' : 'grey'); gfx.circle(centerX - 12, centerY, 8, input.select ? 'cyan' : 'grey'); // Y X B A gfx.circle(centerX + 48, centerY, 8, input.y ? 'cyan' : 'grey'); gfx.circle(centerX + 64, centerY - 16, 8, input.x ? 'cyan' : 'grey'); gfx.circle(centerX + 64, centerY + 16, 8, input.b ? 'cyan' : 'grey'); gfx.circle(centerX + 80, centerY, 8, input.a ? 'cyan' : 'grey'); // dpad gfx.circle(centerX - 48, centerY, 8, input.right ? 'cyan' : 'grey'); gfx.circle(centerX - 64, centerY - 16, 8, input.up ? 'cyan' : 'grey'); gfx.circle(centerX - 64, centerY + 16, 8, input.down ? 'cyan' : 'grey'); gfx.circle(centerX - 80, centerY, 8, input.left ? 'cyan' : 'grey'); // L & R gfx.circle(centerX + 30, centerY - 32, 8, input.r ? 'cyan' : 'grey'); gfx.circle(centerX - 30, centerY - 32, 8, input.l ? 'cyan' : 'grey'); } } function debug(message) { const debugDiv = document.getElementById('debug'); debugDiv.innerText = message; } function loop(world, gfx) { return timestampMs => { world.update(timestampMs); world.draw(gfx); window.requestAnimationFrame(loop(world, gfx)); }; } function setCanvasScale(scale) { const canvas = document.getElementById('canvas'); canvas.style.width = '' + SNES_WIDTH * scale + 'px'; canvas.style.height = '' + SNES_HEIGHT * scale + 'px'; canvas.style.display = ''; debug('set scale to ' + scale + 'x'); } function setAutoCanvasScale() { const widthAspect = Math.floor(window.innerWidth / SNES_WIDTH); const heightAspect = Math.floor(window.innerHeight / SNES_HEIGHT); const scale = bound(1, Math.min(widthAspect, heightAspect), 8); setCanvasScale(scale); } function init() { const world = new World(); const gfx = new Graphics(document.getElementById('canvas')); document.getElementById('1x').onclick = () => setCanvasScale(1); document.getElementById('2x').onclick = () => setCanvasScale(2); document.getElementById('3x').onclick = () => setCanvasScale(3); document.getElementById('4x').onclick = () => setCanvasScale(4); document.getElementById('5x').onclick = () => setCanvasScale(5); document.getElementById('6x').onclick = () => setCanvasScale(6); document.getElementById('7x').onclick = () => setCanvasScale(7); document.getElementById('8x').onclick = () => setCanvasScale(8); setAutoCanvasScale(); window.requestAnimationFrame(loop(world, gfx)); } init();