After creating the spaceship graphic we needed to create some powerup graphics and also a background to the game. Here are the results of this work:
As far as the background was concerned, we wanted to stick with the arcade/trippy/colourful theme and so decided upon quite a bright and colourful background quickly created in photoshop.
In order for the HTML 5 Game to be fun and professional looking we need to create some graphics which will suit the style of game we are creating, we have decided upon the space theme and are building from that.
We have decided we want to go for out of the ordinary graphics using lots of bright colours to create a trippy feel to the game, we also want to include a essence of 8 bit styling within the graphics to make the game feel slightly arcade’y.
I started off working on the character/ship, we were undecided what exactly the controllable character was going to be however I think we now have a winner. The first incarnation of our character was a astronaut however we decided we didn’t like how this looked in the game and so changed it, instead creating a spaceship for our avatar.
Astronaut
Spaceship
We have trialed this spaceship in the game and believe it works much better than the previous astronaut graphic. The next graphics that require attention are the powerups and the background!
I figured out today how to fix my coin re-spawning issue mentioned previously.
I simply used a variable called coinsGone which counted how many coins had been collected or had left the screen from the current batch. Once this number reached the amount spawned, the coin formation randomises and the coins respawn.
I have now implemented the coins using a similar method used to generate the enemies but instead of using random coordinates I have specified a set of 4 different formations (a straight line, a rectangular block and diagonal lines in 2 different directions). To do this I hard-coded the sequencing of the formations (although I believe there could be a more effective way of doing this.
One problem I have encountered is that when I try and recycle the coins – as I am using the same method which recycles the enemies – the coins don’t go back into a formation they just appear randomly. I haven’t found a solution yet but I’ll keep working on this in the coming days.
I have also completed the coin magnet power-up which uses an algorithm to ‘suck’ the coin into the spaceship when the magnet is active.
Recently I’ve been working on getting power-ups working, we’ve chosen five including: Invincibility, Coin Magnet, Double Score, Increase strafe speed and slow down game speed. I’ve got each working bar coin magnet, as we have no coins yet!
I’ve also implemented an algorithm which simulates friction to create smooth movement when controlling the ship, this is one of many polish effects that I am keen for us to implement into the game to create a professional and complete finished product.
Until next time!
since our game was based around space we thought the best idea was to use asteroids for the enemies. We managed to find some free to use asteroids online which fit our game design perfect – which was a kind of 6 bit/retro game.
When it came down to coding these into the game I had a little trouble since we wanted to have 3 different sizes, a small, medium and large and wanted to fit them all into a sprite sheet (which we did). The problem we occurred was trying to randomly select a certain X and Y with height and width on the sprite sheet, after a bit of digging around on the internet we managed to get it working with a Math.Random and a switch statement which worked perfectly.
Over the past couple days I’ve been re-familiarising myself with the basics of Javascript game development and got started on the very basic mechanics of the game. So far I’ve created the character movement up and down using W/S and Up and Down arrow keys with objects coming in from the right hand side and re-cycling once they reach the left.
These objects will soon become the obstacles which the player will have to avoid as well as other collectables.
You can have a go at the working prototype at http://www.jtlr.co.uk/canvasgame. This will hopefully be updated regularly over the coming weeks.
Since we last posted we have made progress on the concept behind our game and decided what we will use to code the game.
We did a bit of research into WebGL and decided that in the timeframe we have and without prior knowledge or experience coding in it, it would be too demanding to be able to create a suitable game for our assignment so instead we will create the game using Javascript and HTML5 canvas.
We have had a few meetings to discuss the general concept of our game aswell, we have decided to create an action game in which the user controls a character through an environment (we have decided to make our game water based) the game will rely on similar game mechanics and draw influences from games such as Jetpack Joyride and Temple Run.
The game will be endless with the aim to get as far as possible before dying and will feature some sort of coins/token system which the user will collect in order to buy upgrades which in turn helps them progress and get further on there next go.
We also want our game to feature vehicles or powerups similar to Jetpack Joyride, this shakes up game play and stops it from getting boring for the player.
The score will be based on a players ability to travel the furthest distance, the longer they can last / the further they travel, the higher their score.
This blog will be updated frequently with out progress as the project happens.
Having been tasked with creating a web based game using HTML5 features such as Canvas, SVG and WebGL we started to research games currently available in order to decide on the type of game we wanted to create.
Having seen a lot of platform games we thought it would be interesting to try something different so have started to research 3D games using WebGL, this is the direction we will probably head depending on the complexity of developing in WebGL.
HTML5 Game Development 