Introduction to Programming with Java Applets (Boese)
Lab: Chapter 8
- The purpose of this assignment is
You get to write a "Simon Says" game! This version is based on the kids game
where players click on one of the four colors, then have to do what ever Simon
says to do!
For example, Simon might say "Put your hands on your head!" or
"Touch your toes!"
The overall game is shown below:
This program is made up of
a JLabel for the title at the top,
and a JTextArea for displaying the messages.
Link to image file:
Right-click on the image, and choose "Save Target As.."
Then import into Eclipse following the import instructions in WebCT.
- The first step is to get everything displayed right (worry about the events later).
- Create a new class named SimonSays, adding the import statements and an init method.
- At the top of the program, we want to add our instance variables. The following variables we need:
- title of type JLabel for dealing with the images
- img of type Image for loading the Simon image
- imgIcon of type ImageIcon for dealing with the image
- canvas of type JLabel for holding the imgIcon
- message of type JTextArea for displaying instructions and Simon Says messages
- random of type Random for getting random numbers
- Create a method called doTitle that takes no parameters and returns nothing.
Inside this method, set up the title with a font size 20, centered, color is yellow
and background is black (to get the background color, put the title JLabel in to a JPanel and
set the background on this JPanel).
Add the JPanel to the applet in the north.
- Create a method called doBottom that takes no parameters and returns nothing.
Inside this method, set up the JTextArea with a black background, white text, and a font size 14.
Initialize the text to say:
Welcome to Simon Says!
To play, click on a color
and follow the instructions.
Make sure it displays on multiple lines!! (Remember the escape sequence for new lines?)
Add it to the applet in the south.
- Create a method called doCenter that takes no parameters and returns nothing.
- Inside this method,
- set the img variable to get the image.
- instantiate the imgIcon variable with a new ImageIcon based on the image from above.
- instantiate the canvas variable to hold the ImageIcon .
- add the label to the applet in the center.
- Inside the init method,
- initialize the size of the applet to be 235 by 415.
- set the layout to use BorderLayout.
- make a call to the doTitle method you previously created.
- make a call to the doBottom method you previously created.
- make a call to the doCenter method you previously created.
- Run the applet now and ensure that it looks correctly, just like the first image at the top of these instructions.
- Now we can add events to our mouse clicks to make our applet more exciting. To get events to work, we're
going to use the MouseListener to listen for mouse events.
- Add the appropriate import statement at the top to handle events.
- Specify that the applet implements our listener.
- Add the listener to the mouse clicks. Where would be the optimal place for this code to go?
(e.g. Where can you put it such that you need only add one line of code?)
- Add the required method for our listener.
- Inside our listener method, catch the mouse event and print it out to the console window.
Now run your applet and make sure when you click on each region, that something prints in
the console window recognizing the event of a user mouse clicking on the image area.
- Now we can customize what happens when each region is clicked. Inside a proper one of the MouseListener methods,
set up if-else statements for each of the regions, and print to the console window the color of the region
that was clicked.
- Once that works, change it to change the text in the JTextArea based on the following rules:
If the red button was clicked,
display "Simon says, Put your hands on your head!"
otherwise if the green button was clicked,
display "Simon says, Touch your toes!"
otherwise if the blue button was clicked,
display "Simon says, Jump 10 times on your right foot!"
otherwise if the yellow button was clicked,
display "Simon says, Quack like a duck!"
- Run and test your program and ensure this is all working so far.
- Now we're going to add some unpredictability to the program using a randomizer.
- Now add some randomness to one of the other regions! Follow the same steps
from when we started adding code inside the if statement for the red region, using the same random object.
SKELETON CODE :
* CS150 Spring 2008 (Lab9)
import java.util.*; //for Random
public class SimonSays extends JApplet
// define variables:
public void init( )
setLayout( new BorderLayout() );
//Call the functions
public void doTitle( )
title = new JLabel( "Simon Says", JLabel.CENTER );
title.setFont( new Font("Serif", Font.BOLD, 20 ) );
title.setForeground( Color.YELLOW );
JPanel titlePanel = new JPanel( );
titlePanel.setBackground( Color.BLACK );
add( titlePanel, BorderLayout.NORTH );
public void doBottom( )
public void doCenter( )
// implementation for MouseListener
public void mouseClicked(MouseEvent me)
int x = me.getX();
int y = me.getY();
//if mouse pointer is located in upper left
//else if mouse pointer is located in upper right
//else if mouse pointer is located in down left
//else if mouse pointer is located in down right
}//End of Class
When you are finished, show your GTA for credit for this lab exercise.
by E.S.Boese. All Rights Reserved