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()      {         @Override         public void handle(MouseEvent event)         {         }      });Once you have the stub mouse handler – the variables to handle the game logic need to be added. In the field create private int variables called rightValue, leftValue, and score. Set each these to 0. You will also need a variable to handle who’s turn it is. Create a boolean variable called rightsTurn and set it equal to true. Last, create a private final Random object called rand (don’t forget to import java.util.Random).Inside the mouse click handle method generate a random number between 101 and 152 and store it in a local variable.  Then create an Image object like you did in Lab 3 using the random number you just generated and the graphics in your project’s img folder.In pseudo code, the logic then is as follows:If rightsTurn is trueSet rightValue = to the random number generated for the card numberCreate a new ImageView from the Image object you constructedSet the graphic on lblRightCard to a new ImageViewelse Set leftValue = to the random number generated for the card numbercreate a new Image from the card name you constructedSet the graphic on lblLeftCard to a new ImageView using the image you just created If rightVal > leftValset score equal to value stored in tfRightScoreincrement score by 1Set the text in tfRightScore to the new score else if leftVal > rightVal  set score equal to value stored in tfLeftScoreincrement score by 1Set the text in tfLeftScore to the new scoreFlip who’s turn it is by setting rightsTurn = !rightsTurn.Note:  The else if is used here to get around the tie. If we used else a tie would go to the left.At this point you should have a working game prototype with the exception of the Reset button. If your game does not work go back through the logic and see if you can correct things.  Keep in mind that, right now, the image number is determining which card wins so *anything* in the last suit will beat *anything* with a lower image number, ie the 2 of Spades, 141.gif beats the Ace of Spades at 140.gif and the King of Hearts at 139.gif.  We’ll fix that in future iterations.  For now make sure you get the prototype to work and have a good grasp on what each piece of code is doing.If the logic completely escapes you then please ask on the discussion board. Be as specific as possible.The Reset Button At the top of the start method you need to call the setOnAction method and setup a new event handler. Button events are covered in the lecture material on Button events.Inside the handle method body you need to set the followingrightValue to 0leftValue to 0score to 0tfRightScore to “0”tfLeftScore to “0”rightsTurn to truecall the resetCardImages methodFinishing UpAt this point you should have a working game. If not then you need go back over your code and work on any bugs that you may have. If you get stuck then you need to visit a tutor or ask questions on the discussion board. Please mention on what step you got lost.    Computer Science Engineering & Technology Java Programming CSIS 113B Share QuestionEmailCopy link Comments (0)