Connect 4
2011, Feb 10th
I applied for a job recently, and as part of the application process they gave you the option to skip the whole interview process and just make something instead. I hate interviews, and have always believed that a business should hire based on skill, especially in industries where the whole job is based on that. I mean c'mon, anybody can lie their way through an interview, but you can't lie your way through a project... well, maybe you could, but it wouldn't be easy. Anyway, here were the specs of the assignment.
Minimum Requirements
The game you will create will be a 7x6 game, two player local game. The user should be able to click on the column that they want to place their piece in and the piece will tween down from the top of the column into place. There should be a player turn indicator. When the board is filled up, detect that all the places have been used. Detecting when a player wins is not necessary. We expect this task to take between 6 to 8 hours.
This swf should be 900x550 and all primary development should be done .as files. This project must be written in Actionscript 3.
Bonus
- Detect win state: Detect the when a user has won the game by connecting 4 of their pieces in a row horizontally, vertically, or diagonally.
- Load / Save game: Flash 10 allows for you to load and save directly to the file system. Implement a way to save the game locally to your hard drive and load games from the hard drive.
- Ending Animation: Follow the storyboard to animate the end of the game.
- Drag n' Drop Pieces: Instead of clicking on the column to drop a piece, have a pile of pieces and have the users drag and drop the pieces into their chosen column.
- ASDoc: Make your code ASDoc compatible and generate the documentation. The ASDoc code will be an extra deliverable.
- Gravity/Physics: Add gravity and physics to the game - wow us.
- Change Dimension of Board Game: Bored of the 7x6 dimensions? Make a control to change the board size.
- Fluid Stage Size: Don't want to have the stage juts be confined to 900x550? Create the application so that if the user resizes browser window, the game will be resized as well.
I love these kind of 'interviews'. The whole base setup took me about 6 hours to complete, but I lost track of time while working on all the extra credit. It was just a fun project to work on and I kind of lost myself in it. Here is the asDoc on this little guy, and below are some examples of what this thing can do.
Default
If you leave everything blank in the settings file, this is what you get. With the settings file you can customize almost everything about this game. Continue on to the next example to see some of those customizations.
<gameboard columns = "" rows = "" blockSize = "" boardColor = "" dropSlotColor = "" disableShadows = "" shadowColor = "" shadowDistance = "" shadowAngle = "" /> <user playerNames = "" playerColors = "" playerIconColor = "" playerBorderColor = "" winningColor = "" winningIconColor = "" winningBorderColor = "" splosionColor = "" /> <background img = "" imgAlpha = "" tileTheImg = "" imgOffsets = "" bgColor = "" bgShadingColors = "" disableShading = "" /> <ui winDialogColor = "" winDialogTextColor = "" winDialogBtnColors = "" winDialogBtnTextColor = "" playerTitleColor = "" playerTitleStrokeColor = "" playerScoreColor = "" />
Custom 1
In this example I've increased the columns to 10 and rows to 7. Due to the increased columns and rows, the blockSize had to be decreased to ensure that the game fit properly on the stage.
A lot of the coloring for the game has been customized as well. The colors for the game board, shadows, player colors, and the winner dialog have been changed. Any time a property ends in the plural, it means that you have to add two properties in order to change it. For example 'playerColors' needs two properties, where 'winningColor' only needs one.
One last customization was the addition of a background image. The tile image is 320x340, and is tiled (by default) to cover the whole background.
<gameboard columns = "10" rows = "7" blockSize = "50" boardColor = "008282" dropSlotColor = "" disableShadows = "" shadowColor = "131A17" shadowDistance = "" shadowAngle = "" /> <user playerNames = "" playerColors = "CC3300,FFFF00" playerIconColor = "990000,FF6600" playerBorderColor = "990000,FF6600" winningColor = "" winningIconColor = "99FF99" winningBorderColor = "009300" splosionColor = "" /> <background img = "imgs/Carpet0018.jpg" imgAlpha = "" tileTheImg = "" imgOffsets = "" bgColor = "" bgShadingColors = "6699CC,303D38" disableShading = "" /> <ui winDialogColor = "23C2BB" winDialogTextColor = "131A17" winDialogBtnColors = "96DEDC, 96DEDC" winDialogBtnTextColor = "154442" playerTitleColor = "" playerTitleStrokeColor = "" playerScoreColor = "" />
Custom 2
This example shows just what can be accomplished via the settings. All the colors, the size of the game board, and the background have been completely customized.
You have the option with the background to disable tiling, and to offset it's default positioning (which is at the center of the stage). Those properties along with being able to set background color and background shading colors, you can do anything you want to the background.
Also, you may notice there seems to be a glow effect applied to the elements as well. In fact, the shadow color and positioning were just altered to give that appearance.
<gameboard columns = "6" rows = "5" blockSize = "68" boardColor = "000000" dropSlotColor = "AAAAAA" disableShadows = "" shadowColor = "1DF1DC" shadowDistance = "0" shadowAngle = "" /> <user playerNames = "Sam, Clu" playerColors = "000000,000000" playerIconColor = "" playerBorderColor = "0093FF,00FF66" winningColor = "000000" winningIconColor = "132828" winningBorderColor = "1DF1DC" splosionColor = "1DF1DC" /> <background img = "imgs/tron5.jpg" imgAlpha = "" tileTheImg = "false" imgOffsets = "-8,-165" bgColor = "000000" bgShadingColors = "001A33, 000000" disableShading = "true" /> <ui winDialogColor = "000000" winDialogTextColor = "1DF1DC" winDialogBtnColors = "111111,111111" winDialogBtnTextColor = "1DF1DC" playerTitleColor = "111111" playerTitleStrokeColor = "2c5e5f" playerScoreColor = "111111" />