Your assignment is to modify a Checkerboard applet that we give you so that whichever square you click on flashes between its normal color and yellow, with the change to or from yellow occurring every half second (i.e., every 500 milliseconds).
You can try to play with my implementation if you like:
If you don't see a checkerboard above this line, your web browser might not allow you to run this applet, because it's "untrusted." If this happens:
If you're on a Mac, go to System Preferences -> Java. Click on the Security tab. Then click on "Edit Site List" and then click Add. Enter http://www.cs.dartmouth.edu/~scot/ and click OK. You'll get a warning saying "Including an HTTP Location on the Exception Site List is considered a security risk." Click Continue and then click OK.
I believe that applets won't run under Chrome on a Mac no matter what you do.
If you're on a Windows machine, go to Settings -> Control Panel -> Java. Under the Security tab, click "Edit Site List" and then click Add. Enter http://www.cs.dartmouth.edu/~scot/ and click OK.
Start with the applet Checkerboard.java, which draws the checkerboard. You should read it carefully to understand how it works.
Here are some design ideas that you might find useful. You should define constants (i.e., final
variables) as appropriate.
As with the ClickAMac
applet from lecture, use an instance variable to remember where the mouse was clicked; set this instance variable in the mouseClicked
method.
Before you try to create flashing behavior, it's a good idea to first just turn the appropriate square yellow. In your paintComponent
method, draw the entire checkerboard. After you've drawn the checkerboard, if a point has been clicked, go back and draw its containing square in yellow. (Use Color.yellow
.) You'll be drawing a yellow square over a square that you already drew in either red or black, but that's OK.
Given a Point
—let's say that it's referenced by clickPoint
—how do you determine the row and column numbers of the square containing this point? This is pretty easy. Given that the squares are 30 pixels in each dimension, the row number is clickPoint.y / 30
and the column number is clickPoint.x / 30
. There are a couple of things to note:
We naturally think of (x, y) and row/column—that is, first x, then y, and first row, then column. But notice that the row depends on y, not on x. And the column depends on x, not on y. So be careful here.
I wrote 30
in the expressions above because that's the square size. You will not write 30
. You will use a constant.
Once you can turn a square yellow, the next step is to get it to flash. The color should alternate between the square's normal color and yellow, switching every 500 milliseconds. You'll of course need to create a Timer
object and have the appropriate actionPerformed
method called every 500 milliseconds. In your paintComponent
method, draw the entire checkerboard. After you've drawn the checkerboard, if a point has been clicked, and if you should draw the square in yellow where you clicked, do so. There will be a brief moment after the checkboard is drawn and before the yellow square is drawn, but it is so brief that nobody will ever notice. A simple boolean variable is a good way to keep track of whether to draw the yellow square.
You are free to make inner classes for listeners, to let the applet itself act as a listener, or to let the canvas act as a listener.
Submit your code via Canvas. Your section leader will run your code to make sure that it works.