I am looking to develop a game involving 5 dice. I have already created a function to roll one die using a random method, but I am unsure how to extend this functionality to the remaining four dice without having to create a separate method for each one.
dice.component.html
<button type="button" (click)="rollDie()">Roll the dice</button>
<img [src]="path" alt="die-one" class="img-fluid">
<img [src]="path" alt="die-two" class="img-fluid">
<img [src]="path" alt="die-three" class="img-fluid">
<img [src]="path" alt="die-four" class="img-fluid">
<img [src]="path" alt="die-five" class="img-fluid">
<img [src]="path" alt="die-six" class="img-fluid">
dice.component.ts
path = '/assets/img/die-one.png';
path1 = '/assets/img/die-one.png';
path2 = '/assets/img/die-two.png';
path3 = '/assets/img/die-three.png';
path4 = '/assets/img/die-four.png';
path5 = '/assets/img/die-five.png';
path6 = '/assets/img/die-six.png';
rollDie() {
let number = Math.floor(Math.random() * 7);
switch (number) {
case 1:
this.path = this.path1;
break;
case 2:
this.path = this.path2;
break;
case 3:
this.path = this.path3;
break;
case 4:
this.path = this.path4;
break;
case 5:
this.path = this.path5;
break;
case 6:
this.path = this.path6;
}
}
Any suggestions or improvements would be greatly appreciated! Thank you! :)