posted by Chris Black on October 11th, 2009 under Flash
Here are three Flash games each built in under 3KB and in less than 4 hours. They may not be Half Life 2 but they are entertaining! Try your luck at the racing game, platform game, and a space shooter that I like to call Little Ship vs. Space.
Wait? Doesn't everybody have loads of bandwidth? Why create a game so small? Well, because it's fun, a good preparation for the 4KB challenge and most importantly size != entertainment. You may spend weeks designing, architecting, and developing a game only to find out it's not fun. Evolve your game.
Build a 4KB game. If you enjoy playing it then slowly build it up into something better. Add levels, create graphics, improve the structure but AFTER you've come up with a cool idea.
Lets play some games! Don't forget to vote for your favorite game in the poll bellow the games.
For all games click on the icon in the top right to re-start.
Racer Game (1.98KB):
Racing Game
(Use the Left, Right, and Up arrows to move. Try and beat 20 seconds!)
Full source for the Racer game: zip (2.09KB)
Coin Collector (2.08KB):
Coin Collector
(Use the Left, Right, and Up arrows to move. Try and beat 16 seconds!)
Space Shooter (2.99KB):
Notice: MAC users have reported issues with the arrow keys in the Space Shooter game. I will look into this shortly and post a new, functional, version. Looks like I need a MAC to test on 
Space Shooter
(Use the Left, Right, and Up arrows to move. Ctrl (Command) to fire. Try to get more than 4 frags!)
Vote on the 3KB game you like the best!
How to do it:
After rudimentary tests Flash CS3 is the best enviornment to compile with. A pure AS3 project in Flex and a project built from CS4 add 500 bytes of overhead (Anyone know why? Maybe meta data?). You also save space by using an external AS file, so create a main.as file for your code. Put all of your code in this one file! Every additional AS file adds space rather than saves. Once your game is setup if you absolutely need one or two extra AS files than make them. Type all of your functions and variables. You'd think it would be the opposite but typed vars take up less space in the compiled SWF. Don't use MouseEvent.CLICK, use "click" to save some bytes.
Now for the game play.
All three games use the arrow keys as input. Individual key listeners / flags use way to much code! What are the values for left, right and up arrows? 37, 39, and 38. None of which are divisible by anything but themselves. So... lets add one key listener and multiply our single key value by the code value. Up = 38, Up * Left = 1406. That means that key value % expected value == 0 than our key is down. This only works for key values that don't have common denominators, key codes 2 and 4 would not work. Both 2 and 4 mod 4 would result in true. Looking back you could also push these codes into an array and do an index check which would allow more flexibility... mod is more fun though.
Actionscript:
-
package {
-
import flash.display.MovieClip;
-
import flash.events.Event;
-
import flash.events.KeyboardEvent
-
-
public class main extends MovieClip
-
{
-
private var k:int = 1; // Keyboard number
-
-
public function main()
-
{
-
this.addEventListener("enterFrame", eF);
-
stage.addEventListener("keyDown", kD);
-
stage.addEventListener("keyUp", kU);
-
}
-
private function eF(e:Event)
-
{
-
if(k%37 == 0)
-
trace('rotate object left');
-
if(k%39 == 0)
-
trace('rotate object right');
-
if(k%38 == 0){
-
trace('add velocity');
-
}else {
-
// remove veloicty
-
}
-
}
-
private function kD(e:KeyboardEvent)
-
{
-
if(k%e.keyCode != 0)
-
k *= e.keyCode;
-
}
-
private function kU(e:KeyboardEvent)
-
{
-
if(k%e.keyCode == 0)
-
k /= e.keyCode;
-
}
-
}
-
}
Both the Coin Collector and the Racer game use bitmap hit detection which is very little code and very powerful. Bitmap hit detection looks a bit like this:
Actionscript:
-
/* Constructor */
-
// Car BitmapData, built in the enter frame function
-
sb = new BitmapData(500, 400, true, 0x00000000);
-
-
// Track BitmapData, doesn't move / change so lets build it here
-
tb = new BitmapData(500, 400, true, 0x00000000);
-
m = new Matrix();
-
m.tx = t.x;
-
m.ty = t.y;
-
tb.draw(t, m);
-
-
-
/* Enterframe loop */
-
// First see if bitmap hit detection is needed.
-
if(s.hitTestObject(t)){
-
// Clear our car bitmap data object
-
sb.fillRect(new Rectangle(0,0,500, 400), 0x00000000);
-
-
// Create a matrix that defines the location and rotation of the car
-
m = new Matrix();
-
m.rotate((Math.PI/180) *s.rotation);
-
m.tx = s.x;
-
m.ty = s.y;
-
-
// Draw the car to our BitmapData using the matrix
-
sb.draw(s, m);
-
-
// Do a hit detection with the track BitmapData
-
if(tb.hitTest(new Point(0,0), 0xFF, sb, new Point(0,0), 0x11)){
-
v = 1.1;
-
}
-
}
The space game deals with circles so that code uses Trigonometry for hit detection. We'll save that for another day. I need to clean it up a bit for it to really make much sense. Stay tuned for more on games!
Full source for the Racer game: zip
Q/A:
Why 3KB?
My initial goal was 4KB. I hoarded the KBs so much that they all ended up under 3KB. I suppose that means I should add more features / levels.
Whats with the sudden interest in games?
I actually used to be big into making games back in the AS2 days about 4 years ago. I built out a six level space shooter, 8-ball, and 9-ball billiards. My game programming was shelved for four years until one of my co-workers sparked my interest by mentioning the 4KB challenge 
Can I have the source code for the other two games?
E-mail me with specific questions and I'll be happy to help. I built out the Coin Collector and space games using the Racer as a starting point. It wouldn't be fun if I gave away all the answers
People who inspired me to make these games:
Iain Lobb
Game Poetry
Micheal Hills
Tags: Games
[Flash] game « Lab of Chowky
October 13th, 2009
[...] Source: http://www.blackcj.com/blog/2009/10/11/build-a-flash-game-in-under-kb/ [...]
Chris Black
October 13th, 2009
Current high scores: 5 frags, 16.23 sec for the coin collector and 20.33 sec for the racing game. I’ll be improving at least one of the games and will include a real high score table at that time. I’ve got lots of ideas for game improvements!