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.

gregbabula:

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 :)

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.

take two

This time it should work…Maybe. A fresh set of eyes and a reread of the positioning elements and it all makes sense now.

Space Shooter

now in super sidebar form

Small Success

Now it certainly isn’t pretty and not a great example but I sure learned a lot making it. I built it from scratch based on bit’s of info I had absorbed from various sites. 

The interesting thing was I decided to make it out of just CSS and Javascript instead of Canvas and Javascript. My thinking was that it should have better cross platform support and my uni work is related to CSS more than canvas. There is quite a bit of debate about which version is better with some saying CSS is faster but I think long term that canvas will be better and have better support. For the pacman game I’m going to give canvas a try. 

Anyway back to the story. My goal was to rebuild the site this weekend. My psych course got in the way of that but I was able to sit down today and just focus on building something…anything!

It was a productive day and I have a little game called Space Shooter. It’s a space invaders rip off and really basic. I built it to for the sidebar of the theme I’m using.

I’ve been smashing my way through the theme though and it’s not working out. I picked this theme because it had plenty of options and was highly configurable. The problem is that it’s got too much in it to easily put the game into. I’ll have to change theme or start building my own from scratch…not looking forward to that but it will be for the better :)

If everything has worked you should see Space Shooter below. It’s pretty simple use the arrow keys to move the spaceship left and right. Then hit the space bar to shoot. You can only have one bullet on the screen so aim carefully. As you kill the aliens they will speed up. If they make it to the bottom your toast. There are two waves so see how you go. 

PS: Well that’s rubbish….I can’t seem to get the scripts to load, at least in preview and private post they have been removed. It might be different when I make the post public.
In case it doesn’t work here is a link the copy that should run from my dropbox. http://dl.dropbox.com/u/9239235/spaceshooter/index.html
Like I said it’s very basic since I was planning to integrate it into my sidebar but you get the point. Post a comment and let me know if it works or doesn’t work for you. I don’t have checks for the different browsers so it will fail in a screaming heap if you don’t have a newish browser or if you insist on using internet exploder.
PPS: It kind of works when I posted it for real. There is an issue with using the space bar and the theme so now use the ‘x’ instead. Hopefully that works. Also the space dude is way off where he should be so I’ll have to look at the positioning.
PPPS: :) well it is getting late and I can’t find where some of these position values are coming from in the template. A job for tonight. I’ve removed it for now so try the link instead.