Hi everyone! I’ve just completed my Dungeon Crawler game. It was created using Sass and React. It took me a lot of time, and now I can say it’s almost done. There are only few things left to do. I have to clean the code and fix some gameplay problems, because I kinda was focused on programming side of the app, not on the gameplay, so I should fix this. The game is created for PC, but it’s responsive, so you can play both on the PC and smartphones(tablets).
Any reviews are welcome.
Demo: https://killkock.github.io/roguegame
Code: https://github.com/Killkock/roguegame
1 Like
I like how far you went with this. There is amazing attention to detail. I mean, picking up an inventory item highlights the slot it fits on. How cool is that 
Anyway, I don’t have much time to check it out thoroughly for any possible issues, the only thing that bothered me was the long tutorial and how in the last page of it, clicking next does nothing. It should close the tutorial window. Ah, also, I don’t know if it’s me being impatient but the character is moving soooo slow when I spam a movement key.
Compared to the overall work you did with this, these “issues” are a drop in the water. I’m impressed.
Thank you for the review! Really, I should make the next button close the tutorial after the last page.
The reason why character is moving so slow is the architecture of the app. Every move the player does invokes this.setState() function, and this function change the player’s position. This setState function is really time-consuming one. I did some perform tests and I found out that every move consumes kinda 250ms, and 230-240ms out of them => this.setState lasts. So, I decided to restrict player’s motion, so I added a setTimeout which makes player able to move only every 200ms. Otherwise, without restriction, in some cases, the player’s icon will be kinda frozen at one place, and after a few second it will move to another place which is located kinda 10-20 cells away. So, this restriction is kind of a clutch in order to make an app work a little bit more smoothly. I’m trying to find out ways of increasing the game performing, but it seems like an impossible task using React, because the most time consuming function is React’s setState. I think I should have used a Canvas, but it’s too late to change this part of a program. Nonetheless, thank you for the review!
Future tips about performance.
There’s a pretty high chance that you are having performance issues because some components get reloaded unnecessarily. If you open devtools in your app, you can see React complaining about missing key attributes. key is pretty important for performance as it’s used to check which items have changed (read more in the docs) .
You’ll also want to check out Avoid Reconciliation and React.PureComponent.
Thank you! Using your tips, I figured out how to increase every move’s performance. It grew in average for 50%. Also, I reduced the amount of setState calls, so now every move lasts for 140-150ms in comparison with the previous 250ms.
1 Like
I can’t seem to get this working. I’m guessing it’s the webpack.config.js and if not something else that needs to be updated. I can’t even get the node local server running with this script for some reason. If it’s not too much to ask could you help me with this?
that’s really a cool dungeon crawler game!
I honestly would prefer this over the one made by FCC!!
your styles and graphics are really good!
amazing job!