SpaceShooter Theme

It’s been a week or so since I submitted the theme and it is still in review. I’m not sure how long they usually take to approve but it looks like I can share the link anyway. So check out the Space Shooter Theme

I’ve tried to make the theme as easy as possible to customise. You can pretty much replace anything in the game from the text, sprites, background and keyboard control characters. You also don’t have to go near any html, css or javascript. Just use the customise screen to make all your changes. The sprites are only 16x16 so are pretty limited but the idea was to make the game really simple, sort of like a game and watch. Well, I’m pretty sure the idea came from a slide in a lecture that had a game and watch in it.

The rest of the theme has parallax scrolling backgrounds (2 layers and it looks good when you use scroll to top), tag clouds, social links, auto pager and scroll to top. It does have a conflict between the social icons and auto pager so don’t use them at the same time. Otherwise they all seem to work pretty well. If it doesn’t you get your money back :) but drop me a comment and I’ll get it fixed.

If you end up grabbing a copy and creating your own little shooter game send me a link. I’d love to see what you can do since, as you can tell, graphics aren’t my strongest gift.


Modern Web Development Part 1 – The Webkit Inspector

A very in-depth look at the webkit inspector, a must read.

Nice article on the inspector built into Safari and Chrome…wish I’d seen this earlier :)

Theme update

Well it has been a while…

I’ve spent the past few days stripping bits out the theme and adding bits back in. It is mostly back together again, after been pretty busted today..but it is still missing some nice social media buttons and the following people list is not quite how I want it.

I’ve spent quite a bit of the time adding in customisations. I’ve decided to try and put the theme up on tumblr for others to use. Mostly to give the game away and the parallax scrolling. So i’ve added a bunch of switches to turn bits on and off, like the game for example. I’ve also added the game images, fonts and colours to the list of customisations so you don’t have to go to the code to modify the game. You can also modify the keys that control the player.

As for the game it’s easy to customise. Player, aliens and bullet are all 16x16 pixel boxes. So you can make up your own graphics. The rocket ship is also easily replaceable and needs to be at least as wide as the game which 192px but no wider than 250px since this is the width of the left sidebar. The game is about 206px high. At the moment I just use a green background for the game play area but I’ve made it possible to add a background image through the customisations as well. I’ll try and get around to making a second version using different graphics to see how easy it is.

Infinite scrolling is now an option and I’ve exposed the parallax images so you can replace the stars with something different. Colours of course can be changed for most things and the metal background images in the central column can be turned on, off or replaced with your own.

I’ll work on the other media icons tomorrow and should have it ready for tumblr in a day or so. Actually, I’m not really sure how that process works yet so it might take a while. Something else to post later :)

Vertical parallax scrolling

I’ve been wanting to trick out my theme for a while but haven’t been able to come up with the concept until now.

It came to me while I was reading about gaming and one of the early techniques to make things look 3D was to use a something known as parallax scrolling. It basically works by layering the background images, and possibly a front image. With each layer separated and everything apart from the background using transparency we get a nice composite picture, kind of like those books of the body with the transparent overlays. The beauty is that when you move across the screen each of the layers moves at a different rate and gives the screen some depth.

If you do a google search you will find quite a few examples, although a lot of the commercial ones have moved on and changed their pages so they are no longer available. Still, here are couple below that are pretty interesting.

Silverback : Resize the screen horizontally to see it.

Mark Lawrence : Interesting vertical scroll

Dromaeo : Cute dinosaur header, resize horizontally to see.

Row to the Pole : Another vertical scroll

Since the mini game is a space invaders clone I figured the best theme might be a little starry background and a rocket ship to finish off. Add a little vertical parallax code from Ben Taylor and see how it goes. Check out my about page for the sample.

Now that I have it working on a simple page I’ve started to pull apart the template structure of tumblr. So watch out for that over the next week as I try to create it as a theme for the blog.

Take Three

Now that the game seems to work ok in the main content area it’s now time to try and move it back to the sidebar where it was supposed to go.

The two things that stopped it working before were.

  1. I didn’t fully understanding the positioning elements in a complex page. Since my development was on a really basic html page.
  2. The game was slightly too wide for the sidebar and when I tried to make the sidebar bigger it had bad consequences.

So fixing these turned out to be really simple. 

  1. The gamescreen DIV elememt holds the score count, wave count and the gamearea. These were all originally absolute and didn’t sit within the sidebar. I changed them all to relative and then it really broke. It turns out I needed only make the gamescreen DIV position relative and leave the others as absolute since they are positioned relative to gamescreen. The other issue with the gamescreen css was that I set the top and left attributes. This still would have left the game in the same position, which wouldn’t be good. I removed these attributes. All good now and the game flows with the sidebar.
  2. I changed the gamescreen width from 192 down to 176 (the sidebar is 180). The javascript then needed to take into account the right boundary change. One value in an if test. Also, the screen was 12 aliens wide and I had 10 aliens. It is now only 11 wide so I reduced the alien count to 9.

That should take care of it. Alas not quite that easy. I now had two gamescreens and keyboard grabbers. Solved this by removing the game from the “take two” post below.