University Web Project - JSdiver: Part 1

22/10/24

About a week ago we were given our assignment details for our web development module at University. We were thankfully given something which actually allowed us to be creative - we had to design and develop a (pretty basic) game, which we would implement through the use of HTML5's Canvas element and JavaScript. After about 2 days of working on it, I thought it would be nice to document it here as I work on it.

I soon enough landed on the simple idea of a skydiving game. The player would control a character falling through the sky, having to dodge random obstacles like birds, balloons, etc. (I'm not entirely sure about balloons, but I can think of a substitute later on). We had been given a fair number of examples of canvas code to work with, so I used some of the elements from those as inspiration.



Right now, I've got the main sort of "system" built. Initially, it just ran the game physics in a loop, and as a result, there wasn't really much that could happen before or after gameplay with how I had written it. So just this morning, I changed the structure of the game around so that with each frame, the game checks on its current state (basically what it should be doing, e.g., showing Menu, Running the Game, playing a little intro, etc.) and draws/runs everything accordingly.

I also managed to get a little bit of a main menu drawn up now that I've reworked the game structure. It's not exactly brilliant UX design. Maybe something other than Arial would be in order. I put a little plane (kind-of) at the top, which will have the little player standing in it. My intention is that between pressing "JUMP" and the game starting there'll be a little cutscene where he jumps - just to show off how amazingly talented I am with canvases.



As for the graphics, I just put together a sprite sheet with some pixel-art. My reasoning for pixel-art is that it's considerably easier and quicker to draw, and also it avoids having to worry about strange high-resolution images looking out of place. On top of all that, I just like the way it looks!



A few of the graphics on the sheet remain unused, such as the keyboard key, the smaller cloud, the feather, the screen, etc., but it's more of me just rushing to make more silly little graphics. I do have plans for all of them.

I intend on putting this onto GitHub when I'm done, along with a playable version on my University webpage, but before that, I'll say more about it here, so look out for that.