CPSC 170 Lab 1

CPSC 170 Lab 1
Events

Getting Started

Generally in lab you will be typing your programs into emacs, typing shell commands into a terminal window, and using Firefox to access the lab. So, to get started

Open a terminal window and create a directory for your lab1 files. Recall the command to change directories is cd and the command to create a directory is mkdir.
Remember, when opening java files you should start the emacs program first then use C-x C-f to find the file you want to open. If you just double click the file from the Ubuntu file browser it will open in gedit, which you do not want.

Timer Events

The file TimerTest.java contains the code we created in class to create a recurring event and the file BouncingBall.java contains the outline of a graphical program. For this section of the lab you will create an animation of a bouncing ball using timer events. Do the following:

Using the TimerTest program as an example, add a timer to the BouncingBall program. The timer should generate an event every 30 milliseconds. You do not need to modify the paintComponent method. Instead, just add a print statement to the actionPerformed method and run the program to verify that the timer is working.
Next, add an instance variable to the BouncingBall class that counts the number of of times that the actionPerformed method is called. Also, modify the print statement in the actionPerformed method to print the current value of the counter.
Now, add code to the paintComponent method to draw a filled circle using the counter instance variable as the x and y coordinates of the circle. Note, you should use a static constant instance variable to store the size of the circle. (No magic numbers!) Run the program. What happened? The paintComponent method is only being called once when the program first starts. To call it every time the actionPerformed method is run, add a call to the repaint method at the end of actionPerformed.
In order to produce an animation where the circle can move in directions other than diagonally down, you need to have two variables to represent the circle's position. Create two new instance variables that represent the circle's position using x and y coordinates. Initialize the variables so that the circle begins at the center of the window and change the code that draws the circle to use these new variables. You will also need two variables to store the direction and speed that the ball is moving. Direction and speed can be represented by using two variables, one for the change in the x position and one for the change in the y position of the circle for every frame of animation. These variables can be thought of as the x and y velocity of the circle. Initialize the velocity variables to 1. Add code to the actionPerformed method that changes the circle's x and y coordinates by adding the circle's x and y velocity variables. Run the program. Notice that the animation did not change. However, if you change the velocity variables you can change both the speed and direction of the circle. Change the velocities and run the program again. What happened to the direction of the circle? Some things to take note of:
1. If both velocities are positive, the circle moves down and right.
2. If both velocity are negative, the circle moves up and left.
3. If the x velocity is positive and the y velocity is negative, the circle moves up and right.
4. If the x velocity is negative and the y velocity is positive, the circle moves down and left.
Finally, prevent the circle from moving off of the window so it looks like it is bouncing. In order to do this two things need to occur. First, a collision with the edge of the window needs to be detected. To test if the circle has moved off past the right side of the window it is only necessary to check if the right side of the circle is beyond the right side of the window. The right side of the circle is the x position of the circle plus the circle's width. The right side of the window is the panel's width. Put an if statement in the actionPerformed method that tests if the circle has moved past the right side of the window. If the circle does move past the right side of the window its velocity needs to change such that it bounces. There are only two directions that the circle can be traveling if it goes past the right side of the window, down and right, or up and right. If it is moving down and right its velocity after bouncing should be down and left. If it is moving up and right, its velocity after bouncing should be up and left. So in either case the y velocity does not change. Also, the speed of the ball should not change after bouncing, only the direction. So in order to change the direction, multiply the x velocity by -1. This will cause the circle x velocity to be negative, which will move it left with the same speed as it was moving right. Initialize the circle's position and velocity so that it will hit the right side of the window and run the program. Did the circle bounce? Lastly, add if statements that will cause the circle to bounce off of all four sides.

Keyboard Events

The file KeyboardTest.java contains the code we created in class to detect keyboard events and the file KeyboardControl.java contains the outline of a graphical program. For this section of the lab you will create an animation that the user can control with the keyboard using keyboard events. Do the following:

Using the KeyboardTest program as an example, add keyboard events to the KeyboardControl program. You do not need to modify the paintComponent method. Instead, just add print statements to the keyPressed method and run the program to verify that the key events are working. The keyReleased and keyTyped methods must be defined, but the method bodies can be left empty.
Now, add code to the paintComponent method to draw a filled rectangle. The location of the rectangle should be stored in instance variables that are initialized so that the rectangle is in the center of the window. The dimensions should be stored in static constant instance variables. Run the program to verify that it works.
To make the rectangle move based on user input, add code to the keyPressed method that uses if statements to check if one of the arrow keys was pressed. The getKeyCode method in the KeyEvent class returns an int that represents the key that was pressed. The KeyEvent class has public integer instance variables for every key's code. Compare these variables with the result of the getkeyCode method to determine if an arrow key was pressed. Then, change the x or y position of the rectangle appropriately based on which arrow key was pressed. Note, the amount of change in the rectangle's position should be stored in a static constant instance variable. After changing the rectangle's position call the repaint method so that the rectangle is redrawn at its new position. Run the program to test it.
Lastly, add code that will prevent the rectangle from moving off of the window. Modify the keyPressed if statements to only change the rectangle's position if an arrow key is pressed and if the rectangle is not past the window boundaries. Run the program and test all four sides.

Pong

Combine the bouncing ball and keyboard controlled rectangle to create a simple one-player version of Pong. If you have never played pong, it is a game with a ball bouncing around the screen. The player controls a paddle that the ball can bounce off of but can only move along one edge. The goal is to prevent the ball from getting past the paddle. The file Pong.java contains the outline of a graphical program.

Add the code that animates the circle from the BouncingBall program to the Pong program and test it to verify it works.
Add the code for the keyboard controlled rectangle from the KeyboardControl program to the Pong program and test it to verify that it still works. You should now have a pong program where the ball is bouncing around the window and the paddle is user controlled, but nothing happens if they hit each other.
Change the initial position and dimensions of the paddle so that it is on the left side of the window and centered vertically. Next, remove code from the keyPressed method so that the paddle is only able to move up and down. Run and test your program.
Add code that will cause the ball to bounce off of the paddle if the ball moves beyond the right side of the paddle and is not above or below the paddle.
Finally, modify the code that causes the ball to bounce off of the the left side of the window so that the program displays a message instead of bouncing the ball. Note, the actionPerformed method, where the if statement is located, can not draw to the window, only the paintComponent method can. So you should create a boolean instance variable that is set in the actionPerformed method and read in the paintComponent method to determine if the message should be painted. The file LargeText.java demonstrates how to adjust the font size of text that is drawn to the window.

Submission

Submit a zip file of your code on the course Inquire site that uses your last names as the file name. You can use the following command from your lab1 directory:

zip LastNameLastName.zip *