代写 game GUI html Java math Learning Outcomes

Learning Outcomes
Task 1 – Import a GUI Project
1
AST111103 Problem Solving with Programming Skills
Lab 8: Random Numbers and Images
 Design application with images
 Apply concept of method call to generate random numbers
 Revise the concepts of if-else and switch statements
 We are writing a simple game application this week.
 Download Lab8_RandomImageStart.zip from the Canvas, DO NOT extract it yet.
 Also download images.zip from the Canvas, EXTRACT the folder on your desktop.
 In the NetBeans IDE, click File and choose Import Project > From ZIP….
 Then, in the Import Project(s) from ZIP window, browse to the zip file you downloaded from Canvas and set the destination project folder to somewhere you can find easily.
 You shall see a partially completed GUI application. We will start building our lab with this application.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Task 2 Add Images to your GUI
2
AST111103 Problem Solving with Programming Skills
 When we design our GUI applications, it would always be more attractive if we could add tailor-made images for the project. In Java, one way to add images is to set the icon property of a jLabel.
 We need to import our external image files to the project before we use them in the project. First, right click the project “Source Packages” and create a new folder. Name your folder with a meaningful name, for example “images”.
 Make sure the Parent Folder is “src”. (If you see this field empty, click Browse and select src.)
 Now, we are going to import images to the project. Select jLabel1 and select the icon property and click “Import to Project…” at the middle of the panel.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

3
AST111103 Problem Solving with Programming Skills
 Browse to your Desktop and look for the folder where you extract the images.zip. Select all files in the folder and click Next to import them to your project.
 Select the images you want to use as the image of the jLabel1 and click “OK”.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Add images for jLabel2 and jLabel3
 Add other images for jLabel2 and jLabel3.
 Switch to the Source View and look at the code into “private void
initComponents()”, these codes are generated by NetBeans and we do not need to
modify them. It is worth to take a look at how images are added to labels.
 Click the “+” symbol next to the private void initComponents().
 Take a look at lines that related to setIcon(). You would find something like:
 What’s happening is when we use Drag and Drop to create our GUI, NetBeans is helping us to generate Java code. Can you roughly guess what is ImageIcon and getResource mean?
Task 3 Add a Counter for Number of Ticks
4
AST111103 Problem Solving with Programming Skills
 Now we want to program a function of this application that when the user clicks on the “Dice” button, the counter at the lower right hand side will increase in order to count the number of times the user has clicked the button.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Human Counting
 Thank about how will human counts.
 1. We pick up a memory in our mind to remember a number, initial 0;
 2. When something happens, we add one to this number;
 3. If someone ask you, “how many have you counted?”, you will convert this number into
English or Chinese and tell them verbally.
 That’s it! In computer, we are exactly doing the same.
5
AST111103 Problem Solving with Programming Skills
 Remember that the GUI is our front stage, all programming logic should go to our back stage.
 Double click on the “Dice” button to add the code.
 1. Create a new variable (variable for this project) at the very beginning of this project class:
 We will NOT add this variable inside jButton1ActionPerformed, do you know why? Ask your tutor.
 Then, look for the method private void
jButton1ActionPerformed(java.awt.event.ActionEvent evt).
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Complete Steps 2 and 3
 We have created a variable called count in our project, can you work on this program for the following two steps inside jButton1ActionPerformed?
 Step 2. add one to this number;
 Step 3. Display this number at jLabel6 using setText() method; (you may need
Integer.toString() for converting the number to String type).  Run and try your program button now!
Task 4 Create some fun by using Random number
6
AST111103 Problem Solving with Programming Skills
 The “Dice” button actually have more function than just adding the counter.
 How about if we want to change the images to any one of the imported images randomly?
 To do this, we can make use of the Math.Random() method in Java. (for details, please look at: https://docs.oracle.com/javase/8/docs/api/index.html?java/util/Random.html)
 In the Java official documentation, we know that the definition of Math.random():
public static double random()
Returns a double value with a positive sign, greater than or equal to 0.0 and less than 1.0. Returned values are chosen pseudorandomly with (approximately) uniform distribution from that range.
Returns:
a pseudorandom double greater than or equal to 0.0 and less than 1.0.
 The above definition means when we write Math.random() in the program, the program will give you a number between 0.0 and 1.0. How about if we want to get a number between 0 and 3 (0, 1, 2, 3)?
What will we get when we write Math.random() * 4 ?
 Add the following code at the after the code added at Task 3:
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

Task 5 Exercise – Complete the Application Logic
7
AST111103 Problem Solving with Programming Skills
 Run your program and try the “Dice” button.
 Complete this task by adding code for randomNum2/jLabel2 and randomNum3/jLabel3.
 The application logic is explained in the picture below.
 When the user clicks on the “Dice” button, the images at the three jLabels changes randomly. The application displays a message based on the random results, there will be two situations:
 1. When all three images are the same, display “BINGO! Your lucky star is XXX!” and disable the Dice button. (hints, all images are the same when randomNum1, randomNum2 and randomNum3 are equal)
 2. Otherwise, display “NOT BINGO! Please try again.”
 When it is done, export your project and upload it to the Canvas.
 Select File > Export Project > to ZIP…
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved

8
AST111103 Problem Solving with Programming Skills
 Confirm the Root Project is the project we work in this lab.
 Click the “Browse” button and select the destination for your zip file, we recommend you put it on
“Desktop”.
 Name your export file as Lab8_RandomImage.zip (remember to type .zip at the end) and press Export.
 Upload your exported zip file to the Canvas, you can find your file at the destination location you choose.
 Import and Export will be very important for your coming practical test, make sure you know how to do that!
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved