Aaron McCollum

Posted on Jul 24, 2020 • Updated on Sep 12, 2021

Dice Rolling Program

Recently I started playing a game of Dungeons and Dragons with friends, and the first night I noticed I lacked the various sets of dice you need to play. My wife ordered a few sets, however I realized this was a great chance to put some of my HTML/CSS skills to the test with some JavaScript I recently learned.

On a Saturday morning, I got up early, slammed a few cups of coffee, and got to work. I wrote out the HTML and basic CSS first, since I'm a visual person and it helps to get a basic design down first. Then I went to work and created several functions for each type of dice. Lastly, I created a delete function to clear the board.

What do you think? Below are a few links:

Version 1.0 (individual delete function): https://codepen.io/aaronmac/pen/XWXZGYY
Version 1.1 (universal delete function): https://codepen.io/aaronmac/pen/eYJrKeO?editors=0010
Github repository for version 1.1: https://github.com/aaronmccollum/game_dice_set

A few updates I want to make soon:

Using less "ids" and more "classes" in HTML
Updating functions with ES6 shortcuts
Using "let" and "const" instead of var

If you have any tips or recommendations, let me know!

Oldest comments (13)

pentacular • Jul 24 '20 • Edited

You repeat yourself a lot. :)

The following technique may help avoid that.

const d = (sides) =>
  () => Math.ceil(Math.random() * sides);

const d20 = d(20);
const d12 = d(12);

console.log(d20());

Here d is a function which generates parameterized functions by using lexical closure.

shadowtime2000 • Jul 24 '20

You don't need to have a function that returns another function. You can simplify it to this:

function d(sides) {
  return Math.floor(Math.random() * sides + 1);
}

And use it with this:

console.log(d(20));

Aaron McCollum • Jul 24 '20

Mind blown. Thank you all! I'm just now getting into ES6 and shorthand functions etc. I just love how there are ways to do in 10 lines what I did in ~50-60 lines. Incredible.

I'll be referencing this when I update the code in the next few weeks. Thank you both!

pentacular • Jul 24 '20

That's true, but his code wants to call functions directly.

Also, why are you adding 1 and then flooring?

shadowtime2000 • Jul 24 '20

I am adding one because Math.random() returns a float between 0 and 1, but it never includes 1, so you could never get 20 without adding 1.

pentacular • Jul 24 '20

Why not use Math.ceil?

shadowtime2000 • Jul 24 '20 • Edited

Because some dice don't have zero while other's do. So we would need to switch on different dice.

pentacular • Jul 24 '20

But you're always adding one, so you'll never get zero ...

shadowtime2000 • Jul 24 '20

Exactly. We would remove that but we would need to switch between Math.ceil and Math.floor.

pentacular • Jul 24 '20

Making a function more complex in order to make it simpler to do something the function does not do is not very sensible. :)

shadowtime2000 • Jul 25 '20

What if we just did something like this:

function d(sides, hasZero = false) {
  return hasZero ? Math.ceil(Math.random() * sides) : Math.floor(Math.random() * sides);
}

pentacular • Jul 25 '20

If you want to generate integers in a range, you might as well just do that.

But the first thing to check are the requirements for this use case.

I believe that none of these dice include zero. :)

Christina • Jul 25 '20

Great job! It looks like the other commenters beat me to it as far as suggestions since I was also thinking of ways to have code that is more DRY (Don't Repeat Yourself). Overall, I love seeing you go from idea to useful app! If you do end up writing a function that lets you pass the sides as an argument, you could add a feature so that the user can enter a custom sided die. Good luck!

DEV Community

Dice Rolling Program

Oldest comments (13)

Read next

3 things that matter most for a project management tool

Event Loops: Entendendo as Futures no Dart

Naming Conventions

Day 24/366