Rotate Space – #30daydev day 3 & 4

I’ve not been able to do as much on Rotate Space as I’d like to, but the last couple of days, I’ve tackled the baddies, collisions between the baddies and bullets, the score info and added an energy bar to restrict constant firing. As a result, it’s a playable game at least. Heck, there’s a lot to do, but you can still play something.

Baddies, firing, collisions, scores and energy... and breathe

Baddies, firing, collisions, scores and energy… and breathe


I’ve just used the baddies from the graphics used in Mayhem, so there’s nothing new I needed to do here, just load them in the preload and add routines to throw them onto the screen in waves.

Movement is a random selection of movement and scale tweens, and these can be expanded on really quickly and easily. Given that there’s not much to do except shoot anything, differentiating the levels is going to be a difficult one. As it’s a #30daydev project I’m keeping it simple and just adding x number of waves for each level (getting more and more per level), and lowering the delay between waves in each level as well.

What I’ll add at the end of leveling up is a bonus based on the number of shots fired against the number of baddies destroyed (hit ratio). I’m also a fan of preventing continuous fire so I’ve added a restriction that takes a value off an ‘energy’ bar for each shot. You know, the usual, your laser’s overheated, it’ll have to cool down. See the section on the energy bar for this.

Right now, the baddies don’t fire at you. Should they? Perhaps, let’s see if the timescales allow.

Both firing of your lasers and the positioning of the baddies is all done in the same way – anchored to the centre and scaled and rotated according to whereabouts in space they are.


Collisions are twofold – the first being a collision between your bullet and the enemy, and secondly, collisions between your ship and the baddies.

Both of these are handled by the Arcade engine in Phaser. If a sprite has an arcade body,then you can call an overlap function which will tell you if your sprites have collided. From there it’s just a case of handling the collision (removing the enemy, bullet, and adding an explosion).

bulletCollisionCheck: function (group) {
if (this.bullets.countLiving() > 0) {
var ch = this.collisionHandler,
bullets = this.bullets;
this.physics.arcade.overlap(bullets, group, null, ch, this);

This is called during the update process (with “group”) being my collection of baddies. Over time, as more and more groups are added to the game, I use the same function just passing in a different group. If the overlap of any bullets and enemies is true, then it fires “this.collisionHandler” passing in the bullet in question and the the enemy that has been hit.

The only thing I need to do at this point when the function is fired, is to make sure both the bullet and enemy are still alive, which can happen if there have been more than one collision with the same sprite, because you’ll fire an event for each collision passing in the same sprite.

I need to be careful though as each sprite is anchored to the centre of the screen, as there is a danger overlaps will trigger the event,and visually, they’re nowhere near.
To overcome this, it is handled by checking the angle and scale of the sprite affected to see if they are in a tolerance range. If not, then just ignore it, otherwise, process as a genuine hit. I’ve also added a little prevention check there to stop any collisions right in the centre, otherwise you can sit there just shooting from anywhere.

// if the sprite is alive, and hasn't been managed
if ((baddy.alive) && (bullet.alive)) {
if ((baddy.scale.x > 0.05) && (Math.abs(baddy.angle - bullet.angle) < 2)) { bullet.kill(); baddy.kill(); this.addExplosion(baddy, "explode", 2); } }

Score Info

The game now shows score, lives, energy and shield values on screen in each corner. These are out of the way of your ship so do not impact the playing area.

The glow effect font was created with Littera which is a brilliant site for creating web fonts that are compatible in Phaser. I've gone for a sci-fi green glow,but I'm not too happy with the original result, so this may well be changed. When you can't read the score, you've a problem. I can worry about this later, but don't leave everything to the last minute - it doesn't work.

These are added on startup of the game and all added to a Phaser group. This means, that when required, they can all be removed in one hit.

One thing I've done to jazz things up a bit is to scale the score for each enemy destroyed depending on how close they are to you. The closer they are, the more points.

Energy Bar

The energy bar is a mechanism to stop you constantly firing, which will make the game boring. I use one in Mayhem for the same purpose, but this time, I wanted a glow 3D effect. I created a '3D' sprite to show your full energy, and added it to the bottom left of the screen.
If you fire, then the 'y' scale of the sprite is reduced. If it hit zero, then the sprite disappears, and you cannot fire.
If you let go of the fire button, then the 'y' scale increases back to the original at the same rate. All that was needed was to find the optimal rate.

The shield on the right is exactly the same process, but when an enemy collides with your ship, then the scale of the shield changes. When it gets to a certain size, then the colour of the sprite changes to red. This is easily done using a sprite sheet instead of a static image. When your shield gets to zero, then ... boom!

Scaling like this means there's only one image to manage and we still get to keep the 3D effect. The only down side is the top gets squashed as well. Hmmm.


So, to recap, with not much effort, using Phaser, I've been able to add enemies, firing, collisions and energy and shields to the game. Pretty quick eh?

At this rate, we'll have a playable game in no time, and I can spend some of the #30daydev on marketing.

All of this has been uploaded to the usual place, so enjoy. Bear in mind, it goes straight into the game (no intro), and when you run out of waves or die, you'll need to refresh the page. Next, I think I'll add the death & lives counter handling, along with the level up.

Rotate Space Day 3&4

This entry was posted in #30daydev, Game Design, HTML5 Game, JavaScript, Phaser. Bookmark the permalink.

Leave a Reply

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