Video of me coding Breakout in Flixel in 20 mins

Having spent the past couple of days deep in Microsoft Word writing tech specs, I was desperate to do some coding. But I only had a 1 hour lunch break available. So I picked a game: Breakout (Atari 2600 style), found a reference screen shot online to get the colours from, fired-up FlashDevelop, hit record and started coding.

20mins later and it was done. I then hastily cut this video together and uploaded to YouTube (which ironically took longer than coding did). Here’s the video embedded. I sped it up x2 for sanity sake, and it’s a nice way of hiding my typos 🙂 If you can please watch it in HD on the YouTube site, it’s much easier to see what I’m coding!

Watch on YouTube

Ok so it’s not a gaming master-piece, but there’s a real solid shell of a game here you are free to take and expand as you wish. The first thing you may want to do is drop the “cheat wall” from the bottom, add some lives, a score and level progression 🙂

Full source code after the jump.

This is for Flixel v2.5. Create a new Project that is 640×480 at 60fps, with a black background. My thanks to Adam for clarifying some new 2.5 nuances before I started this 🙂

 /** * Atari 2600 Breakout * In Flixel 2.5 * By Richard Davey, Photon Storm * In 20mins :) */ package { import org.flixel.*; public class Breakout extends FlxState { private var bat:FlxSprite; private var ball:FlxSprite; private var walls:FlxGroup; private var leftWall:FlxTileblock; private var rightWall:FlxTileblock; private var topWall:FlxTileblock; private var bottomWall:FlxTileblock; private var bricks:FlxGroup; public function Breakout() { } override public function create():void { bat = new FlxSprite(180, 220).makeGraphic(40, 6, 0xffd63bc3); bat.immovable = true; ball = new FlxSprite(180, 160).makeGraphic(6, 6, 0xffd63bc3); ball.elasticity = 1; ball.maxVelocity.x = 200; ball.maxVelocity.y = 200; ball.velocity.y = 200; walls = new FlxGroup; leftWall = new FlxTileblock(0, 0, 10, 240); leftWall.makeGraphic(10, 240, 0xffababab); walls.add(leftWall); rightWall = new FlxTileblock(310, 0, 10, 240); rightWall.makeGraphic(10, 240, 0xffababab); walls.add(rightWall); topWall = new FlxTileblock(0, 0, 320, 10); topWall.makeGraphic(320, 10, 0xffababab); walls.add(topWall); bottomWall = new FlxTileblock(0, 239, 320, 10); bottomWall.makeGraphic(320, 10, 0xff000000); walls.add(bottomWall); // Some bricks bricks = new FlxGroup; var bx:int = 10; var by:int = 30; var brickColours:Array = [ 0xffd03ad1, 0xfff75352, 0xfffd8014, 0xffff9024, 0xff05b320, 0xff6d65f6 ]; for (var y:int = 0; y < 6; y++) { for (var x:int = 0; x < 20; x++) { var tempBrick:FlxSprite = new FlxSprite(bx, by); tempBrick.makeGraphic(15, 15, brickColours[y]); tempBrick.immovable = true; bricks.add(tempBrick); bx += 15; } bx = 10; by += 15; } add(walls); add(bat); add(ball); add(bricks); } override public function update():void { super.update(); bat.velocity.x = 0; if (FlxG.keys.LEFT && bat.x > 10) { bat.velocity.x = -300; } else if (FlxG.keys.RIGHT && bat.x < 270) { bat.velocity.x = 300; } if (bat.x < 10) { bat.x = 10; } if (bat.x > 270) { bat.x = 270; } FlxG.collide(ball, walls); FlxG.collide(bat, ball, ping); FlxG.collide(ball, bricks, hit); } private function hit(_ball:FlxObject, _brick:FlxObject):void { _brick.exists = false; } private function ping(_bat:FlxObject, _ball:FlxObject):void { var batmid:int = _bat.x + 20; var ballmid:int = _ball.x + 3; var diff:int; if (ballmid < batmid) { // Ball is on the left of the bat diff = batmid - ballmid; ball.velocity.x = ( -10 * diff); } else if (ballmid > batmid) { // Ball on the right of the bat diff = ballmid - batmid; ball.velocity.x = (10 * diff); } else { // Ball is perfectly in the middle // A little random X to stop it bouncing up! ball.velocity.x = 2 + int(Math.random() * 8); } } } } 

I know my blog removes all the extra line spaces from the code. So grab it from here too.

Posted on April 15th 2011 at 6:13 pm by Rich.
View more posts in Flixel. Follow responses via the RSS 2.0 feed.