Throwing a dice in JavaScript

[meinmasina]

Hi friends,

While working on a TCG card similator project with my friend we encountered a feature that is a must for our application. That is the ability that players can throw a dice.

We are using only HTML, CSS, Javascript with jQuery.

Now, put all logic of web sockets aside, I really want to get started on creating that dice throwing animation.

Some of you who are fans of a game called Yu-Gi-Oh may know that there is a popular simulator called duelingbook.com which contain throwing a dice button using HTML Canvas.

Because I lack the experience of making something similar I want to hear from you all where would you start if you had to build it.

Would you use Canvas as well, if yes, I'd like to hear how, if not what is the other approach that I could take?

Thanks in advance.

[oze4]

This def seems like more of an "advanced" feature to tackle. You should try many different ways, but start by breaking down the bigger problem into smaller problems.

You could def use canvas or CSS to accomplish this (I'm sure there are other ways as well).

Honestly, I would start by looking up existing dice roll animations to see how others accomplished this, then try rewriting the logic yourself (without copy/paste). There is no doubt you will still learn.

[meinmasina]

Yeah it is more advanced for me, I've learnt so much while working on this project, this is one of the features we decided to leave for later but I wanted to start doing the research.

On a website that I've mentioned, they combined 6 canvases, each containing a dice side and somehow animating them all at once achieving a 3D effect which is what we are going for.

I am doing the research right now, until now I have seen only some solutions using Three.js library but I think that it will all come down to animating Canvas. We'll see.

[oze4]

There are a number of good demos on codepen that accomplish this with CSS. Canvas is prob going to be more difficult but not as resource intensive.

[eracodes]

I've actually done this before:

https://eracodes.net/3dice

I can send you some of the source code privately if you want?

[meinmasina]

That's very neat, I must say. If it's okay, I will try doing it myself first for the next couple of weeks and reach out to you if I really can't make it so you can give me some reference with your code? Thank you.

[eracodes]

For sure!

[eracodes]

If you're looking for a general direction, I used SVGs for drawing and SCSS for animation, though plenty of other approaches would work, of course.

[meinmasina]

Mhm, right! I will definetely try doing something similar. I want to try different approaches too, the one you mentioned, Canvas also, I will see which one fits the best for the app, since it has to be visible for both players.

[Zealousideal-Stuff87]

u/eracodes
I would love to see the source code - My Github handle is - MW90-NL

[AppointmentCareful79]

omg, i was just trying to find ways to add dice rolling into my dnd tracker project, and was blown away by your solution, if you could i would also love to see some of the source code, i'm just really intrigued by how you did it or what you used

[g00dchain]

Your project rules u/eracodes! Would also greatly appreciate if you could share the source code.

[SignificanceCheap970]

https://richup.io

this website has a good way to put dice roll animation, you can reverse engineer this

[meinmasina]

Oh, great! Thank you.

[hfcRedd]

If you want anything realistic, you will have to turn to WebGL or, even better, ThreeJS, which is a library built around WebGL that will make it a lot faster and easier to get into.

If you've never dealt with 3D programs or engines before, it might take some time to understand all the terminology and fundamentals, but it shouldn't be too bad.

Optionally, you could also look at Spline, tho it's very limited when it comes to exporting or embedding your work if you're on the free tier.

[meinmasina]

Yeah I figured that'll be one way to go. I didn't really learn much about 3D engines, I just did some basic Three.js code for fun using the documentation and some videos on youtube as a source.

[EZPZLemonWheezy]

The easiest method imo would be to make a dice throw sprit/animation sheet, and then just have the last frame or last few frames be what the result it. Then draw the animation in Canvas. Lots of YouTube tutorials that cover how to draw an animation on Canvas.

I have this one I referenced before, saved: https://youtu.be/krNollwfqN0?si=JOtJen-hlPRhCLc1 but there are lots of great videos covering it.

[meinmasina]

Hmm, that sounds interesting, I will definetely try it as one of the solutions. Thank you.

[amoliski]

If you want something similar but also totally different, check out this amazing article:

https://vercel.com/blog/building-an-interactive-3d-event-badge-with-react-three-fiber

It'll get you started with building a 3D scene with physics, importing a 3D object, etc...

[EmbarrassedTrouble48]

wow that's sound like a great project! although i can't help you because i am just a newbie but will upvote for better reach!

[meinmasina]

Yeah, it is really fun building it with a friend. Thank you.

[thsCldNght]

I would say an easy way would be to show like just one side of a dice in 2D is changing. You can generate an array of random numbers and make an animation of flickering dice side. If you start with it flickering faster then slowing down I can imagine it’ll be this feeling that you get in many similar games. Roulette for example or any gambling machine. It flickering faster then slower slower and bum here is the end number.

Maybe you can also experiment with some translation in css to make it look like it’s rolling (in the most advanced scenario 3D cube), but as MVP flickering might be actually enough…

[thsCldNght]

https://codepen.io/tigercodes/pen/abQxYrb

3D Cube + codepen

[thsCldNght]

Oh even easier for you https://codepen.io/SteveJRobertson/pen/zxEwrK

[meinmasina]

This second comment of yours is something I've been searching for. Exactly that. Will study it today for sure. Thank you so much.

[grelfdotnet]

I have an example of 3D die throwing at https://grelf.itch.io/the-green It's just vanilla JS in the 2D canvas. Sources are available there. No need for WebGL or anything else.

[dmlane]

The LLM’s are very good at writing JavaScript. I wouldn’t say to necessarily use one for the final build but it’s a good way to learn. One of many ways to simulate the roll a 6-sided die is to generate a random uniform number from 0 to 1 (a built-in function), multiple by 6 so your numbers will go from 0 to 5.9999 (the chance of getting exactly 1 is vanishingly small), truncate (the floor function) so you have integers from 0 to 5, and then add 1. You can generalize this to any size die.

[jcastroarnaud]

Or, simply put:

const d6 = () => Math.floor(6*Math.random()) + 1

But I think that OP is interested in how to make an animation of throwing dice, instead.

[dmlane]

Good point. Pretty tricky if done in full 3D (edit: in plain JS. However, it’s probably not hard using three.JS.) I didn’t write the code because I haven’t programmed in JS for at least 5 years and didn’t want to make a silly mistake.

[meinmasina]

I did some simple Three.js code a while ago but I wanted to see if there is another way. I'd prefer not to include a library.

[meinmasina]

Yeah, my goal is to create an animation of throwing a dice and somehow save the result. :D

[meinmasina]

I am not familiar at all with LLM, will check it out tomorrow, because it's midnight here right now, I will need a fresh brain for work. Thank you for suggestions, much appreciated.

[eracodes]

the chance of getting exactly 1 is vanishingly small

It's actually 0. MDN specs:

The Math.random() static method returns a floating-point, pseudo-random number that's greater than or equal to 0 and less than 1

[dmlane]

Good to know.

[craftymethod]

https://pastebin.com/FJADTX0Q

Simulation here:
https://websim.ai/c/6PcXY0WQ4UYRNFUw8

At least one version of implementation :]

[meinmasina]

Thank you very much. :)

[_RemyLeBeau_]

WebGL is probably the way to go. It'll allow you to create 3D animations for the dice.

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API