I've created this simple JS dice game where I run 2 dice-CodePudding

I want to hear suggestions on how to improve this code, there's probably a way that I can call the same function to get 2 different results? When I tried that, I got 2 dices printing the same result. Any other suggestion on how to make this look better would be nice.

I already figured out how to do it by using only the dice1 and dice2 since a function is not required for that and printing it to the console, now I want to use 2 functions because I want to do this silly ASCII art thing.

Is there a way that instead of calling

diceSpin();
diceSpin2();

I just call a diceSpin(dice1, dice2) and get the same output?

const diceResult = Math.floor(Math.random() * 6)   1;
const diceResult2 = Math.floor(Math.random() * 6)   1;
console.log("Dice 1: "   diceResult   "     Dice 2: "   diceResult2)

function diceSpin() {
  if (diceResult === 1) {
    console.log(" .......")
    console.log("|       |")
    console.log("|   o   |")
    console.log("|       |")
    console.log(" ''''''' ")
  } else if (diceResult === 2) {
    console.log(" .......")
    console.log("|       |")
    console.log("| o   o |")
    console.log("|       |")
    console.log(" ''''''' ")
  } else if (diceResult === 3) {
    console.log(" .......")
    console.log("|       |")
    console.log("| o o o |")
    console.log("|       |")
    console.log(" ''''''' ")
  } else if (diceResult === 4) {
    console.log(" .......")
    console.log("| o   o |")
    console.log("|       |")
    console.log("| o   o |")
    console.log(" ''''''' ")
  } else if (diceResult === 5) {
    console.log(" .......")
    console.log("| o   o |")
    console.log("|   o   |")
    console.log("| o   o |")
    console.log(" ''''''' ")
  } else {
    console.log(" .......")
    console.log("| o o o |")
    console.log("| o o o |")
    console.log("| o o o |")
    console.log(" ''''''' ")
  }
}

function diceSpin2() {
  if (diceResult2 === 1) {
    console.log(" .......")
    console.log("|       |")
    console.log("|   o   |")
    console.log("|       |")
    console.log(" ''''''' ")
  } else if (diceResult2 === 2) {
    console.log(" .......")
    console.log("|       |")
    console.log("| o   o |")
    console.log("|       |")
    console.log(" ''''''' ")
  } else if (diceResult2 === 3) {
    console.log(" .......")
    console.log("|       |")
    console.log("| o o o |")
    console.log("|       |")
    console.log(" ''''''' ")
  } else if (diceResult2 === 4) {
    console.log(" .......")
    console.log("| o   o |")
    console.log("|       |")
    console.log("| o   o |")
    console.log(" ''''''' ")
  } else if (diceResult2 === 5) {
    console.log(" .......")
    console.log("| o   o |")
    console.log("|   o   |")
    console.log("| o   o |")
    console.log(" ''''''' ")
  } else {
    console.log(" .......")
    console.log("| o o o |")
    console.log("| o o o |")
    console.log("| o o o |")
    console.log(" ''''''' ")
  }
}
diceSpin();
diceSpin2();

if (diceResult > diceResult2) {
  console.log("Dice 1 wins!")
} else if (diceResult < diceResult2) {
  console.log("Dice 2 wins!")
} else {
  console.log("Draw!")
}

CodePudding user response：

The simplest change you can do is to pass an argument with diceResult to your function. It will perform the same action with different values, and that will allow you to get rid of the second function.

const diceResult = Math.floor(Math.random() * 6)   1;
const diceResult2 = Math.floor(Math.random() * 6)   1;
console.log("Dice 1: " diceResult "     Dice 2: " diceResult2)
function diceSpin(result){
        if (result === 1) {
            console.log(" .......")
            console.log("|       |")
            console.log("|   o   |")
            console.log("|       |")
            console.log(" ''''''' ")
        }
        else if (result === 2) {
            console.log(" .......")
            console.log("|       |")
            console.log("| o   o |")
            console.log("|       |")
            console.log(" ''''''' ")
        }
        else if (result === 3) {
            console.log(" .......")
            console.log("|       |")
            console.log("| o o o |")
            console.log("|       |")
            console.log(" ''''''' ")
        }
        else if (result === 4) {
            console.log(" .......")
            console.log("| o   o |")
            console.log("|       |")
            console.log("| o   o |")
            console.log(" ''''''' ")
        }
        else if (result === 5) {
            console.log(" .......")
            console.log("| o   o |")
            console.log("|   o   |")
            console.log("| o   o |")
            console.log(" ''''''' ")
        }
        else {
            console.log(" .......")
            console.log("| o o o |")
            console.log("| o o o |")
            console.log("| o o o |")
            console.log(" ''''''' ")
        }
}
diceSpin(diceResult);
diceSpin(diceResult2);

if (diceResult > diceResult2){
    console.log("Dice 1 wins!")
}
else if (diceResult < diceResult2){
    console.log("Dice 2 wins!")
}
else {
    console.log("Draw!")
}

Also, you can change those if blocks with the switch statement.

Another change you can do to make this code better is to move your Math.floor(Math.random() * 6) 1; to new function to reuse this code.

CodePudding user response：

Get the random number in the "roll" method. But I think, you should use images instead of text, rolling images will be easier than text...!!!

CodePudding user response：

In case one follows the OP and implements everything into a single funtion, one could store the to be logged dice role layouts into an array where each layout itself is an array of to be logged layout rows.

The advantage is, one now even can easily "print" / log the two dice role layouts next to each other, exactly like the dice role's pips counts from the original code.

const diceRollLayouts = [[
  " ....... ",
  "|       |",
  "|   o   |",
  "|       |",
  " ''''''' ",
], [
  " ....... ",
  "|     o |",
  "|       |",
  "| o     |",
  " ''''''' ",
], [
  " ....... ",
  "| o     |",
  "|   o   |",
  "|     o |",
  " ''''''' ",
], [
  " ....... ",
  "| o   o |",
  "|       |",
  "| o   o |",
  " ''''''' ",
], [
  " ....... ",
  "| o   o |",
  "|   o   |",
  "| o   o |",
  " ''''''' ",
], [
  " ....... ",
  "| o   o |",
  "| o   o |",
  "| o   o |",
  " ''''''' ",
]];

function randomIntegerFromRange(lower, upper) {
  return Math.floor(Math.random() * (upper - lower   1))   lower;
}
function diceRoll() {
  const pips1 = randomIntegerFromRange(1, 6);
  const pips2 = randomIntegerFromRange(1, 6);

  console.log(
    "Dice 1: "   pips1   "     Dice 2: "   pips2
  );
  diceRollLayouts[pips1 - 1]
    .forEach((layoutRow, rowIdx) =>
      console.log(
        layoutRow   '     '   diceRollLayouts[pips2 - 1][rowIdx]
      )
    );

  if (pips1 > pips2) {
    console.log("Dice 1 wins!")
  } else if (pips1 < pips2) {
    console.log("Dice 2 wins!")
  } else {
    console.log("Draw!")
  }
}
diceRoll();

.as-console-wrapper { min-height: 100%!important; top: 0; }