Development Activity
Since November the 2nd, I’ve continued working on my mechanic prototype and have made a good amount of progress. I would say that what I have so far right now is finished, and may only need to make some small improvements to further polish the project.
I think that having small improvements such as animated images may improve the feel of the game to be much more responsive and exciting to the player, although the mechanic is ready there is still more to add that can enhance it I feel.
One massive change I’ve made to the project was add in my own custom-made sprites, this includes; the player, enemy, bullet and background sprites. You can see this as evident in Figure 1.
As described by w3schools, this is made possible by the ‘getContext(“2d”)’ function.
To add images on a canvas, the getContext(“2d”) object has built-in image properties and methods.
w3schools.com
How this works is that when using the component constructor in our code, instead of referring to a colour for our player/enemy, we instead refer to the url of an image we want to display instead.
It is important to also tell the constructor that this component is an “image” type. As shown in Figure 2, I set images for the player, cursor and background.
This was a fairly simple process, however what was needed to make this work is that I needed to test if the component is of an “image” type by using the built-in “new Image()” object constructor.
I’ve also included another type called “background”, this is because I plan for a special behaviour for the background later.
To make sure the program is ready to draw the image, we use a drawImage method as oppose to the fillRect from before as shown in Figure 3.
As for making the background move, I’ve managed to set it so that it moves towards the left and sets its x coordinate back to 0 if it reaches a certain limit as shown in Figure 4.
What this does exactly is that it enables the background to scroll and loop, this creates the illusion that the player is constantly moving towards a direction.
I’ve also implemented a short animation of an explosion, which plays upon the impact of a bullet hitting an enemy ship.
This was slightly more complicated to do, as the multiple frames were in their own folder called “explode_sprite”. And thus extra steps are required for the program to get these images.
Before I fixed it, this error would come up in the code in Figure 5. This means that the program was unable to use our drawImage() function to draw our explosions sprites.
To access these images, I had to set the file path in the name as they were in a different folder to the html project in Figure 6.
To add on, the images are animated by using a integer variable that constantly adds up as well as setting up a timed variable that removes the sprites after the animation is finished.
The explosion sprites are numbered for this exact reason, the enemy’s image source is dependent on the image’s name with the end bit taken out, after this the current variable’s number is added onto the end of this.
This makes it so that each frame of the animation is played once the variable is increases. As seen in game, the sprites actually work and switch frames in Figure 7.
Now that I’ve managed to finish all the details, I think the game is done. I am quite proud of how far I managed to get with this, as it is one of my first projects using HTML and Javascript.
I’ve successfully fixed and improved many of the errors I’d encountered making this project, which were my aims before.
I also had some playtesters try out the game. In which they filled out a short questionnaire about how they felt the game played, this got a positive reception which I am also happy with as shown by the results on Figure 8.
One of my goals for the game was to make a game that controlled relatively simple and was easy for the player to pick up, many of the playtesters gave their thoughts and liked it as well as giving some suggestions to improve variety such as an optional keyboard control scheme.
Bibliography
W3schools.com. 2020. Game Tutorial. [online] Available at: <https://www.w3schools.com/graphics/game_images.asp> [Accessed 11 November 2020].