luetkemj/jsrlt

Javascript Roguelike Tutorial

Javascript rewrite of the Complete Roguelike Tutorial

• Javascript
• HTML Canvas
• Node.js
• Webpack
• Free hosting on github pages

Tutorial

• Part 0 - Setting Up
• Part 1 - Drawing the ‘@’ symbol and moving it around
• Part 2 - The generic Entity, the render functions, and the map
• Part 3 - Generating a dungeon
• part 4 - Field of view
• Part 5 - Placing enemies and kicking them (harmlessly)
• Part 6 - Doing (and taking) some damage
• Part 7 - Creating the Interface
• Part 8 - Items and Inventory
• Part 9 - Ranged Scrolls and Targeting
• Part 10 - Saving and loading
• Part 11 - Delving into the Dungeon
• Part 12 - Increasing Difficulty
• Part 13 - Gearing up

Repo of the tutorial project Gobs O' Goblins is available here.

The original Roguelike Tutorial - TCOD

jsrlt's Issues

rectangle function is a little bit bugged

Hey, first of all thanks for great tutorial with up to date language features and Geotic usage!

I think I found one bug though. rectangle function is not calculating center correctly and sets wrong x2 and y2 coords.

Possible change:

Before:

  const x1 = x;
  const x2 = x + width;
  const y1 = y;
  const y2 = y + height;

  if (hasWalls) {
    for (let yi = y1 + 1; yi < y2 - 1; yi++) {
      for (let xi = x1 + 1; xi < x2 - 1; xi++) {
        tiles[`${xi},${yi}`] = { x: xi, y: yi, ...tileProps };
      }
    }
  } else {
    for (let yi = y1; yi < y2; yi++) {
      for (let xi = x1; xi < x2; xi++) {
        tiles[`${xi},${yi}`] = { x: xi, y: yi, ...tileProps };
      }
    }
  }

After:

  const x1 = x;
  const x2 = x + width - 1;
  const y1 = y;
  const y2 = y + height - 1;

  if (hasWalls) {
    for (let yi = y1 + 1; yi <= y2 - 1; yi++) {
      for (let xi = x1 + 1; xi <= x2 - 1; xi++) {
        tiles[`${xi},${yi}`] = { x: xi, y: yi, ...tileProps };
      }
    }
  } else {
    for (let yi = y1; yi <= y2; yi++) {
      for (let xi = x1; xi <= x2; xi++) {
        tiles[`${xi},${yi}`] = { x: xi, y: yi, ...tileProps };
      }
    }
  }

For example, if x = 0 and width = 5, then x2 cannot be equal 5 because otherwise room will be 6 tiles long already.
And center calculation also will be wrong x: Math.round((x1 + x2) / 2) => Math.round((0 + 5) / 2) => Math.round(2.5) => 3. But actually center should be at 2.