Square off

Jump into game development with the Squares game

In the early 1990s, I created my first computer game, Squares, which ran in a Microsoft DOS environment. After leaving Squares "on the shelf" for many years, I recently decided to resurrect this game for this column.

This Java Fun and Games installment introduces you to Squares and presents this game as a Swing applet. Because this applet isn't as entertaining as it could be, I introduce three more Swing applets that add sound effects, visual effects, and extra game-play levels to Squares.

Introducing Squares

Squares is played on a 3-by-3 game board divided into cells. Each cell displays either a colored square or nothing—the cell is black. When Squares begins, some of the cells are assigned colored squares; other cells are black. The choice of which cells initially contain colored squares is random. To win this game, you must clear all cells to black (no colored squares must be displayed) within 30 seconds.

To clear a colored cell to black, position the mouse pointer over that cell and either click a mouse button or press one of the keys on the numeric keypad. Likewise, if you click on a cell that is already black, that cell displays a colored square. This amounts to a toggling action: black square to colored square, and colored to black. Because this game would be too easy to win if mouse clicks or key-presses determined the outcomes of single cells only, I have designed Squares so that mouse clicks and key-presses determine the outcomes of target cells and their neighbors. Consult Figure 1.

Figure 1. Game-board layout (A), affected cells when cell 1 toggled (B), affected cells when cell 2 toggled (C), and affected cells when cell 5 toggled (D)

Figure 1 reveals the game-board layout from the perspective of the numeric keypad (A). For example, the 7 key on the numeric keypad corresponds to the cell in the upper-left corner of the game board. Figure 1 also reveals those neighboring cells that are toggled when a specific cell is toggled (B, C, and D). If you toggle a corner cell, the cells on all sides of the toggled cell (this includes the center cell—think diagonally) are also toggled (B). Similarly, toggling the middle cell in the first row, last row, first column, or last column also causes the other two cells in the row or column to toggle (C). Finally, toggling the center cell also toggles the north, south, east, and west cells (D).

Java makeover

I originally developed Squares in the C language. Thanks to the similar syntax shared by C and Java, it wasn't too hard to translate Squares into Java. Before I present the Java source code to my first Squares applet, you will want to know how to interact with that version's GUI. Figure 2 shows you what this GUI looks like when you first run the applet.

Figure 2. Squares presents a GUI consisting of a game-board component and two buttons

The game-board component presents a tic-tac-toe-like grid with a white message area located immediately below. This component also presents a border; black when the component does not have the focus, blue when the component has the focus. The Change Square Color button is disabled until a game is in play—I don't think it makes sense to change the square color when a game is not in play. To get a game into play, you must click or press the Start button. When you do this, you will see a GUI similar to what appears in Figure 3.

Figure 3. When a Squares game is in play, the game-board's message area presents the current value of the countdown timer

Figure 3 reveals a game in play. The message area shows you the number of seconds left in which to toggle all of the squares to black. When this countdown timer reaches zero, you lose. If you manage to toggle all squares to black before the countdown timer reaches zero, you win. While the game is in play, you can click the Change Square Color button to randomly choose a new square color. But when you lose or win, the Change Square Color button is disabled, and the Start button is enabled so that you can play another game.

And now for the source code:


1 2 3 Page 1
Page 1 of 3