Freecodecamp Project: Roguelike Dungeon Crawler Game

Hello, everyone!

I just finished one of the Take Home Projects. Here’s the link to my codepen https://codepen.io/indrasubagja/pen/oNwxygM

Feel free to give me some feedback or maybe reporting a bug. Thanks :slight_smile:

3 Likes

Hey, this is not too bad at all. I usually focus on accessibility when testing, so that’s what I’ll comment on below. The first four concern keyboard accessibility.

  • The Weapon and Armor drop downs seem like they should be coded as a select list because that’s what they are acting like. You should be able to use the up/down arrows to choose an item from the list, so you will want to make sure you aren’t overriding those keys when these lists have focus. In fact, I would not allow any of the arrow keys to move the player when either list is in focus.

  • I would make the player avatar focusable so that it is obvious when the arrow keys move the player. Right now you have two Tab stops (the Weapons and Armor lists). These show the keyboard focus indicator when active. It seems a bit odd that you can still move the player when these lists have keyboard focus. If you make the player focusable then you will have three Tab stops and the player should only move when it is in focus. This makes the focus indicator consistent and allows the arrow keys to only work when the player has focus (solving the issue above).

  • There seems to be some inconsistency on player movement when holding down an arrow key. If I don’t hold down the key and do individual key presses then when I come to an item I can move over it as expected. But if there is a lot of open space between my player and an item and I hold down the arrow key to go to the item the player stops right before the item and I have to release the arrow key and then press it again to move over the item. Perhaps this is intentional? I would suggest changing it so that the repeat stops after I move on the item, not right before it.

  • I’m noticing that some of the character icons have pop-up stats when you mouseover them. I’m assuming this is to let you know whether you can defeat them. How would I access this information if I was only using the keyboard?

The rest concern other areas of accessibility.

  • The notification message at the top can be problematic for people with low vision, especially those who need to use screen magnifiers and can only see a limited amount of the screen at a time. You might consider placing the message very close to where the player is on the map instead of always at the top of the page. Or you could make this a setting and let the user choose where they want the status message displayed. Another option would be to also display the most recent status message(s) on the player stats bar so that someone can always know where to find them if they missed it the first time. This would also help people who aren’t able to read the message completely in the few seconds you are displaying it.

  • I wonder if you couldn’t make this a little more responsive? I think you could definitely shift the player stats above (or below) the map at some point to allow for narrower view ports, which would get rid of the horizontal scroll bar.

  • The biggest challenge here would be to make this accessible to the blind. I think one way to do this would be to have separate keyboard functionality for moving and “looking”. In other words, there should be a way to look in a direction to see what is there before actually moving that way. The arrow keys could continue to be for movement and then you could use different keys for “looking” (or perhaps a key combination, such as alt-arrow). Of course then you are going to have to come up functionality that announces what they are looking at. You might also want to have some sort of coordinates system that keeps track of whether a spot has been visited. I’m no gamer so I don’t know what the best practices are dealing with this, just thinking off the top of my head. I do know that gaming accessibility is being taken much more seriously nowadays.

@bbsmooth Thanks for your feedback!

I’ve changed my code based on it. The third feedback is intentional because I want the user to decide whether take the item or not. Also, I don’t want the user to accidentally fight the enemy and lose instantly because of holding the key.

And the last one, I think I won’t implement that on this project. But, I’ll definitely consider that next time.

Once again, Thank you!

Pretty cool!!! Actually played till the end.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.