Seeking guidance for completing a homework assignment, I want to clarify that I am not asking for answers to be provided. Rather, I simply need some direction.
The task at hand is creating a dice game. My main challenge lies in connecting Javascript code with the dice images in the HTML file.
For instance:
If running this code :
var dice1 = Math.round(Math.random() * 6);
Returns a value like 4, I wish for it to display the image dice_4.png corresponding to that result.
Here is the HTML code for the cube/dice:
<div class="wrap">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"> </div>
</div>
</div>
And the respective CSS styling:
.front {
background-image: url('Images/dice_1.png');
background-size:100%;
}
.back {
background-image: url('Images/dice_6.png');
background-size:100%;
}
.right {
background-image: url('Images/dice_4.png');
background-size:100%;
}
.left {
background-image: url('Images/dice_3.png');
background-size:100%;
}
.top {
background-image: url('Images/dice_2.png');
background-size:100%;
}
.bottom {
background-image: url('Images/dice_5.png');
background-size:100%;
}
A 3D cube design was implemented without rotation effects.
To summarize, when a random value like 4 is generated for the first cube, I intend for the .right portion of the CSS file to be displayed in the HTML.
If my explanation appears confusing, please let me know so I can provide further clarification.
Any suggestions on where to focus my attention for resolving this issue would be greatly appreciated.
(Apologies for any formatting errors, as this is my initial attempt).
Thank you.