The purpose of this assignment is to get you familiar with the…
Question Answered step-by-step The purpose of this assignment is to get you familiar with the… The purpose of this assignment is to get you familiar with the basics of the JavaFX Events. In particular you will need to be familiar with ActionEvents and MouseClicked events.This game begins with all three cards showing the card back and it being right’s turn to select a card. A card is selected by clicking the mouse on the middle card image. A card is randomly generated and assignment to the right label. The next card selected is assigned to the left. The two cards are then compared and the score updated on whichever card had a higher value. Ties are awarded no points but I should point out that right now in the deck the ace of diamonds has a smaller value than the deuce of spades. We will fix this later on. For now let’s get the basic game prototype up and running. The Pane Layout The layout for this program uses three different panes. To begin with, the root pane is set to a BorderPane. This will allow you to place other panes in top, bottom, center, left or right. For this project only the top, center, and bottom are going to be used. At the top of the game is the Labels and TextFields that hold the information about the progress of the game. You are going to need to create a GridPane for this, name it topPane. In the middle of the root layout is where the three card images are being displayed. This will also need to be a GridPane. Name this GridPane cardPane. In the bottom of the root layout is the reset button. It will simply be added without being apart of any other layout. Create the three panes as field variables – they should all be private final.The Top Pane In the field you are going to create all of the GUI components for the game. This needs to be done so that they can be referenced from the inner classes that make up the events. All the components should be private final.To begin with you need to create a Label for the score, call it lblScore. It should have the text “Score:” inside it. Create a Font and a Color for the Label. You will have to apply these in the start method because you cannot do anything besides the creation of components in the field. Create two TextFields one to hold Left’s score and one to hold Right’s score. Call them tfLeftScore and tfRightScore. Use the text field constructors to set the values of the text fields to “0”.In the start method:For each TextField call the setPrefWidth method, giving a value of 50. Also call the setDisable method on each text field, passing in a value of true.Add lblScore to row 0 column 0 of the topPane and apply the Font and Color to it.Add an informational anonymous label to the top topPane that says “Left: ” to row 1 column 0. Add the TextField tfLeftScore to row 1 column 1.Add an informational anonymous label to the top topPane that says “Right: ” to row 1 column 2. Add the TextField tfRightScore to row 1 column 3.Set the Hgap of the topPane to 20 and the Vgap to 10 and add the topPane to the top of the root pane.Create a new Scene object called scene and pass in root with a width of 300 and a height of 250.Call the setTitle method that is a member of primaryStage and set the title to ‘Lab 4 Game of War’Call the show method that is part of the primaryStage object.Go ahead and run the app and check for bugs. It should look like this: The Center Pane The cardPane has three Labels in it that hold each of the card images. Create three Labels in the field. Call them lblLeftCard, lblRightCard, and lblDeck. The middle card (lblDeck) is only going to hold the card back.In the start method, before the Scene object:Set the Hgap of the cardPane to 20.0.Add lblLeftCard to row 0 column 0, lblDeck to row 0 column 1, and lblRightCard to row 0 column 2.Set the alignment of cardPane to Pos.CENTER.Add the cardPane to the center of the root pane.The Button In the field create a Button called btnReset. In start(), add the button to the bottom of the root pane before the Scene object. Don’t worry about the event at this point we will come back to it.Load Default Images You need to import javafx.scene.image.* and copy the img folder you used in Lab 3 to the project folder of Lab 4 so you can use the card images. Next, create a new private method called resetCardImages. Inside this method create three Images: imgLeftCard, imgRightCard, and imgDeck. Use the Image constructor to load image 155.gif for each of these. Call the setGraphic method on lblLeftCard, lblRightCard, and lblDeck. Set the graphic of each of them to a new ImageView. It should be something like this:lblLeftCard.setGraphic(new ImageView(imgLeftCard));Of course, this needs to be done for all three card labels.Inside the start method call the resetCardImages method you just completed. You are going to want to call this method before adding the card pane to the root pane.Layout Check At this point your layout should be done and your application should look similar to the one in the first picture at the top of the lab.If your application does not look like the image at the top or does not run – go back an fix any issues with if before moving on. If you cannot fix these issues then get help from a tutor, or message me with your source code. Be as specific about what is not working as you can, ie put in a comment in your code where you think something is wrong or where you are confused.Mouse Click Event At the top of the start method you are going to have to call the setOnMouseClicked method on lblDeck and set a new event handler to handle the game. The call should look something like this: lblDeck.setOnMouseClicked(new EventHandler
