Dice From Hell

In the spirit of starting this year of code, I opted for an easy [little] project of doing a dice roll simulation. Hold it! I can see your judging eyes saying ‘Yo that’s easy! What’s up with that…’ Yes, it’s easy, but with the year of code comes the year of UI. I’m not that good at it so here is where I practiced.

Funny enough the design took the long part (even though its simple) the reason is I wanted to use pure HTML and CSS and no image resources. And I did it, pleased with the result [sorta kinda material design style combined with flat design]



The actual algorithm didn’t take me more than 3 minutes [because as stated it’s simple] all you need is a random number, make sure it’s within range (use rounding function to get rid of decimals) and then match the number with the proper index and boom you have a dice roll.  Yes, I was pleased and happy. Then my sister made a comment saying it would be better if you gave the illusion of an actual roll… Damn, CSS animation will take a while to master. But then the ‘aha’ or what I’d like to call the lightbulb moment came. Why not use the timeout function in javascript. So what I did was get a random number, match it with the proper index and write it to the page and then wait for 700 milliseconds then continue the loop 10 times and then finally write the actual dice roll. Cool yeah

No. Not cool at all. Because for some reason it would only run once. and you can see the jumps in the gif below. It’s weird because the console shows that a list of numbers is coming in but not displaying…

I’m confused… Why is this happening? I uploaded the code on codepin.io would appreciate your feedback. If you’re a javascript developer can you help?


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *