During this exercise, you will create an animated dice rolling application for FooBar Casinos. You will create the app in a project called DiceApp. The purpose of this app is to simulate the rolling of one, two or three dice depending on the user's choice.
This project will be broken into two parts. During Part A, you will build the app with no animation. During Part B, you will add the animation.
The following is a demonstration of the app's use:
When the app first loads: see image.
The Three dice RadioButton control is selected and the three PictureBox controls display the dieFooBar.png file. All image files have been located in the Images subdirectory of the project's bin\Debug folder.
When the user clicks the Roll! Button: see image.
Each PictureBox control shows a random die image and the message of their GroupBox control shows the message "You rolled a total of 11", where the number is the sum of the values of the dice.
When the user clicks the Roll! Button again: see image.
Again, each PictureBox control shows a random die image and the message of their GroupBox control shows the message "You rolled a total of 13", where the number is the sum of the values of the dice.
The user could continue to click the Roll! Button and another random set of images would appear with their sum displayed in the GroupBox control.
Next, the user clicks the Two dice RadioButton control: see image.
Notice the PictureBox controls for the first and second dice are moved to be more centered (i.e. the X coordinate of their location has been changed) and their associated Image properties display the dieFooBar.png file. Also notice the PictureBox control for the third die is hidden - its Visible property is set to False. Also notice the message in the GroupBox control is reset to "Roll the dice".
When the user clicks the Roll! Button: see image.
Each PictureBox control shows a random die image and again the message of their GroupBox control shows the correct sum message. The user could continue to click the Roll! Button: see image.
Next, the user clicks the One die RadioButton control:
Notice the PictureBox control for the first die is moved to be centered within the GroupBox control and is increased in size by 50%. Its associated Image property displays the dieFooBar.png file. The PictureBox controls for second and third dice are hidden - each has its Visible property set to False. Also notice the message in the GroupBox control is reset to "Roll the dice".
When the user clicks the Roll! Button: see image.
The image of the first PictureBox control updates with a random image as expected and the GroupBox message displays the roll's total.
When the user clicks the Roll! Button again: see image.
The GUI is updated as expected. And so on.
If the user were to click the Three dice RadioButton control, the GUI would reset appropriately: see image.
The following set of images are for the purpose of highlighting the messages in the second GroupBox (the GroupBox containing the dice images) when the Two dice RadioButton is chosen.
When the user selects Two dice and the roll turns out to total either 2, 3, 7, 11 or 12, we want a special message to display. We already saw what would display if the roll total were 6: see image.
or 9: see image.
In both of those cases the usual message displays (You rolled a total of 6 and You rolled a total of 9). We would want similar messages for rolls that total 4, 5, 8, and 10.
But, if the user rolls a total of 2 (both dice show 1) we see a special message: see image.
Or a 3 (1 on one die and 2 on the other die): see image.
Or a 7 (the sum of the dice is 7): see image.
Or an 11 (6 on one die and 5 on the other die): see image.
Or a 12 (both dice show 6): see image.
In this part of the lab, you will modify your solution to Part A by providing basic animation to the dice when the Roll! Button is clicked. The video below shows how your app should now behave.
Notice that the dice images change at rate that constantly slows. Or said another way, the interval between image updates steadily increases until it gets to about 2/3 of a second and then the animation stops. At that point, the background colour of the diceGBX GroupBox changes to indicate that the dice have stopped "rolling" and what you see is the final value of the dice roll. You will also notice if you have your sound turned up that an audio beep plays every time the images on the dice change. You can have your app make a beeping sound at any point by including this line of code where you want the beep to occur:
Console.Beep()