The 15 Minute Game Dev Challenge

Play the game here

In between tasks today I found myself a little unmotivated, so decided to take a fifteen minute break to rest my brain a little. Usually I’d turn to BBC News, HackerNews or Reddit, but this time I decided to do something a little different: for whatever crazy reason, I decided to see if I could make a playable game in just fifteen minutes.

To optimise things, I gave myself the time to create a new, empty HaxeFlixel project from the standard templates first, by which time I had a very rough idea of what I wanted to create in my head. I set the timer going and got to work…

My idea was purposefully simple: a basic mouse avoider game. That way I wouldn’t need to worry about input handling (beyond setting player.x/y to mouse.x/y every frame), or complex collision detection (simple overlaps would do).

The first goal was to create the absolute minimum required: a player square that follows the mouse.

// Player.hx
public function new()
{
	super();
	makeGraphic(16, 16, 0xff00ff00);
}

override public function update():Void
{
	super.update();

	if (alive) {
		x = FlxG.mouse.x;
		y = FlxG.mouse.y;
	}
}

That was dead easy, so I was onto creating the enemy squares next.

I didn’t want to mess around with specific timings (i.e. creating a Flash/Flixel timer and event listener) to spawn enemies, so I hacked it by testing an unlikely random variable every frame that would spawn roughly 3 enemies per second:

// Enemy.hx
public function new()
{
	super();
	makeGraphic(8, 8, 0xffff0000);
}

// PlayState.hx
override public function update():Void
{
	super.update();

	if (Math.random() > 0.95) {

		var enemy:Enemy = cast(enemies.recycle(Enemy), Enemy);

		enemy.reset(0, 0);
	}
}

So now the enemies spawned, but they all just appeared at 0,0 and stayed there. I considered making them appear randomly all over the screen with random velocities, but that seemed unfair as they could spawn on top of the player with no warning. Instead, I had them spawn just off the screen and move inwards:

// Enemy.hx
override public function reset(x:Float, y:Float):Void
{
	var rndPos:Int = FlxMath.rand(0, 3);

	var xv:Float = 0;
	var yv:Float = 0;
	// enemies randomly come in from top/bottom/left/right
	switch(rndPos) {
		case 0:
			x = Math.random() * FlxG.width;
			y = 0;
			yv = 50;
		case 1:
			x = Math.random() * FlxG.width;
			y = FlxG.height - height;
			yv = -50;
		case 2:
			x = 0;
			y = Math.random() * FlxG.height;
			xv = 50;
		case 3:
			x = FlxG.width - width;
			y = Math.random() * FlxG.height;
			xv = -50;
	}

	super.reset(x, y);
	velocity.x = xv;
	velocity.y = yv;
}

Now the enemies were flying all over the place, but they weren’t doing anything more than look pretty. Thankfully, collision detection is very straightforward in HaxeFlixel:

// Playstate.hx
override public function update():Void
{
	...
	FlxG.overlap(player, enemies, playerCollideWithEnemy);
}

private function playerCollideWithEnemy(player:FlxObject, enemy:FlxObject):Void
{
	player.kill();
}

Almost there, but not quite… I still need an actual gameloop, otherwise the player would need to refresh the page whenever they die:

// Playstate.hx
override public function update():Void
{
	...
	if (FlxG.mouse.justPressed() && !player.alive)
	{
		FlxG.switchState(new PlayState());
	}
}

The last game like thing to add which I nearly forgot was a score. I considered increasing the score for every enemy created, but instead settled for a simple score++ every frame the player is alive.

// Playstate.hx
override public function update():Void
{
	...
	if (player.alive)
	{
		score++;
		scoreTxt.text = score + "";

	}
	else
	{
		scoreTxt.text = "Click to try again\nScore: "  + score;

	}
}

Finally, in the last few minutes I added a couple of extra game-like features:

  • random enemy speeds
  • enemies slowly fade out as they travel across the screen
  • enemies appear more frequently over time

With the fifteen minutes up, I did a final build and committed the result to Github. After this I slapped in a basic title screen with a quick to start – I’ve added this to the template I’ll use from now on.

To conclude the adventure, I’d say that it was definitely an interesting experience that I plan to repeat. Here’s what I learned in those fifteen minutes:

  • Fifteen minutes goes by very quickly when you’re up against the clock
  • I can code pretty quickly when I want to
  • Coloured squares make great placeholder graphics, and in Flixel only need one line of code: FlxSprite.makeGraphic(width, height, color);
  • Having a good starting template is critical to getting going quickly
  • In future I’d like to try screen capture and posting the result to Youtube
  • I should make a list of gameplay ideas I’d really like to try that could fit into the time

Play the game here

Download the source code here (Feel free to use it, adapt it, or claim it as your own)

Leave a Reply

Your email address will not be published. Required fields are marked *

*