Let's discuss your "Roguelike Dungeon Crawler Game"

Code Feedback
41

Hello, all. Here is my version.

If for some reason it does not render properly on your machine, here is another version.

Please could some of you test it before I submit it to FCC?

Thanks!

42

Thanks. Nice demo, i will waiting for full version

43

Project link --> https://codepen.io/BrusBilis/full/oYvaWa

Feedback is always welcome

44

This was a lot of fun, but as like others, I got exhausted towards to the end.
Nevertheless, I am very proud of the end of result ā€“ learned a lot!

http://kenzomendoza.com/fcc-roguelike-dungeon-crawler/

45

Here is mine http://codepen.io/yasserhussain1110/full/LbKKKM/.
Its not as awesome as some of the other projects here. :sweat:

46

One question :- How did you guys generate the dungeon maps? Is there a library or something??

47

I made my own
Dungeon random map generator

You can change parameters to achieve different efects and dungeons types.

var dungeon = { cols: 80, rows: 60, ppp: 10, // pixels por unit, square size maxRooms: 40, minSizeRoom: 5, maxSizeRoom: 12, minLenCorridor: 4, maxLenCorridor: 15,
}

48

I found an algorithm that gave me some inspiration. Start with a room, add a hall on a random side, add a room to the end of the hall, then add another hall to a random wall. Repeat over and over until you have a specified minimum number of rooms, checking for collision along the way. Definitely easier said than done. The dungeon generator took me longer by itself than the rest of the project did. Should have it done in a few days. Will post result.

49

Hereā€™s my completed project. I used React and Redux and threw all the methods into the class. Looking back it would have been more organized and straightforward with structured object-oriented Javascript. This was a lot more coding than I bargained for and a lot of code for a single pen but I cranked it out and learned a ton in the process. Some of the challenging parts were creating an algorithm for the room generation, basic pathfinding for enemies, and rendering sprites to multiple canvases. The game still needs some canvas optimization to only draw moving pieces, but overall pretty happy with the result. Iā€™d appreciate any feedback on the project.

http://codepen.io/jmcilhargey/full/VmOrWR/

50

I am starting with this challenge. Have you guys build in increasing levels of difficulty for the dungeons? So maybe more and stronger enemies, less health items, more complex dungeons etc. as you progress

51

pretty cool the moving and attacking enemies! How did you do that?

52

Thanks, you can implement it by having the enemies move based on the playerā€™s position. Hereā€™s the gist of it. You calculate distances, see if the enemy can move in that direction, and then paint to a canvas.

let enemies = [
  {
    name: "orc",
    xPos: 4,
    yPos: 10
  },
  // More enemies
];

let player = {
  name: "Dr. Strange",
  xPos: 8,
  yPos: 1
};

let map = [
  [0, 1, 1, 1, 0, 0, 0, 1],
  [0, 1, 1, 0, 1, 0, 0, 1]
  // More rows for your map
  // Where 0 is a wall and 1 is an open space
];

window.setTimeout(
  moveEnemiest(enemies, player, map)
, 500)

moveEnemies(enemies, player, map) {

  let enemy = null;
  let xDist = null;
  let yDist = null;

  for (let i = 0; i < enemies.length; i++) {

    enemy = enemies[i];
    xDist = Math.abs(enemy.xPos - player.xPos);
    yDist = Math.abs(enemy.yPos - player.yPos);

    if (playerX > enemy.xPos && xDist >= yDist && map[enemy.xPos + 1][enemy.yPos] === 1) {
      enemy.Xpos++;
    }
    // 3 more conditions for each direction
    // You could include other conditions to help enemies get around walls. I just made them moverandomly occasionally.
  }
}

updateMap(map, enemies) {
      const canvas = document.getElementById("game-board");
  // Paint your components to the canvas
}
53

So I wanted to start this challenge, and I was thinking it would be cool to have some kind of sprites but I didnā€™t wanted to bother having to deal with some sprite sheet images.
It would be more easy to have some text icons instead, just like when using awesome-font for example, and I could change the colors to make it looks nice.
In the end I spent way too much time doing that :stuck_out_tongue: but now itā€™s done so let me share that with you, hoping it will help you doing some cool Dungeon Crawler games :
Github repository of the font

Now itā€™s time to start coding one myself.
Ho wait, I want to learn Redux firstā€¦

54

Hereā€™s mine

This is what my dungeon generator looks like.

Sprites were obtained from opengameart.org

-click or w,a,s,d to move/attack/loot
-hover over sword/shield icons to show current equipment
-kill monsters for rare drops and exp
-search every room for treasure
-kill the boss on the 10th floor to win

10th level floor/wall sprites are buggy and I have no idea why. Also, health bars display under character sprites which is annoying but I havenā€™t thought to fix it yet. If you come across any other problems though, please let me know.

2 Likes
55

Hey Iā€™m not sure how I should get my react app to accept keyboard input to move the character. Can anyone point me in the right direction? It looks like some people use redux or flux but thatā€™s a whole can of worms Iā€™d like to keep shut for now if I can.

Maybe itā€™s something really simple that Iā€™m overlooking? Maybe something to do with document.addEventListenerā€¦ or onKeyDown as a React synthetic event?

Either way, Iā€™ve hit a wall. A gentle nudge in the right direction would be appreciated. :slight_smile:

1 Like
56

Holy crap, great project! It felt like an old school Ultima Game to me. :slight_smile:

57

Thank you very much !

58

If your dungeon layout is represented by Cartesian coordinates, then you can keep track of your characterā€™s position in the state with a corresponding [x, y] coordinate. You could then do something like this:

componentWillMount() {
  document.addEventListener('keydown', this.handleCharacterMove);
}

handleCharacterMove(e) {
  let [x, y] = this.state.position;
  let position;
  switch (e.key) {
    case 'w':
      position = [x, y - 1];
      break;
    case 'a':
      position = [x - 1, y];
      break;
    case 's':
      position = [x, y + 1];
      break;
    case 'd':
      position = [x + 1, y];
    default: break;

  this.setState({position});
}
1 Like
59

componentWillMount did the trick, thanks a lot! I was using an input text box as a bandaid.

60

Hereā€™s my dungeon crawler. This was harder than I expected but Iā€™m happy with the result. I used Legend of Zelda sound effects and music for nostalgia(A Link to the Past).

It was really interesting seeing all the different ways people chose to implement their procedurally generated maps.

Roguelike Dungeon Crawler

Any suggestions or critiques are welcome.