Matthew-SA/zelda-js

Javascript clone of the NES classic: The Legend of Zelda

Zelda-JS

Zelda-JS live link!

Table of Contents

1. Introduction
2. Technologies
3. Features
4. Future Direction

Introduction

Zelda-js is a raw javascript concept based on the classic NES title The Legend of Zelda. This project includes the original's overworld, movement logic, basic enemies, minimap, and health system. Cave and underground areas are not currently accessable.

Technologies

Javascript
Zelda-JS is built on raw javascript without extra dependencies or technologies.

Features

• Full UI - Players can utilize a functional minimap, inventory, and lifebar.

• Full overworld - entirety of the original game's overworld is present and explorable in this demo. Zelda-JS maps are scanned to contruct the game's 'board' and inform collision.

    # game.js
    scanGrid(ctx) {
      let newGrid = [];
      let openSpaces = [];
      for (let y = 168; y < 696; y += 48) {
        let row = [];
        for (let x = 0; x < 768; x += 48) {
          let value = Util.scanMapTile(ctx, x, y);
          row.push(value);
          if (value === 1020) openSpaces.push([x, y]);
        }
        newGrid.push(row);
      }
      this.openSpaces = openSpaces;
      this.grid = newGrid;
    }
  
    # util.js
    export function scanMapTile(ctx, x, y) {
    const tile = ctx.getImageData(x+23, y+23, 2, 2);
    return sumArr(tile.data)
    }

• Attackable enemies - Enemies have a random-acting AI and can be fought by the player.

  updateAction() {
      let possibleActions = this.checkAvailableActions();
      this.frameData.action = 48;
      let action = util.sample(possibleActions);
      this.frameData.direction = action[0];
      this.pos.col += action[1];
      this.pos.row += action[2];
    }

Future Direction

• Collectable Items
• Additional enemy types
• Underground Areas