Mechanic Prototyping Project: Week 7 Production Diary

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.

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.

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.

Figure 2

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.

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.

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.

Figure 5

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.

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.

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.

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 2020. Game Tutorial. [online] Available at: <> [Accessed 11 November 2020].


Mechanic Prototyping Project: Week 6 Production Diary

Development Activity

Since October 26th, I’ve started work on my mechanic prototype. So far I’ve been using’s html tutorials to aid my progress, particularly the ‘game canvas’. This is an element that is displayed as a rectangular object on a web page, this is important because this particularly offers all the functionality you need for making games.

“The canvas element is perfect for making games in HTML. The canvas element offers all the functionality you need for making games.”

As shown in Figure 1, I’m setting the canvas to my game. For my game, I’ve made the canvas longways.

Figure 1

This is because I plan for the game setting to be a side-scroller, as movement from the left and right is going to emphasized with the player constantly moving towards the right and the enemies will be facing to their left as shown by my plan on Figure 2.

Figure 2

To improve upon this, I’ve also doubled the size of the canvas alongside all its components. The reason for this was to improve the visibility for the game so that it didn’t look too small whilst playing it on the browser.

Figure 3 shows the comparison between the old and new sizes.

Figure 3

As shown on Figure 4, this was done very simply by going into the HTML code’s style, and adding in a width and height. This just simply changes how the game will be displayed on the browser and not the canvas or components themselves.

Figure 4

Alongside the canvas, I’ve also been working on implementing the player and enemy components of the game.

Although temporary, the player and enemies are represented as coloured squares; the player being red, enemies being blue. To implement the player, I added a function that adds a new component at the start of the game as represented by Figure 5.

Figure 5

The player will be controlled by the mouse only, this will be how the player is able to move and shoot. To implement this, we will have to add in an ‘addEventListener’ function attached to the mouse.

“The addEventListener method attaches an event handler to the specified element.”

As shown on Figure 6, we have several of these functions; The first one which determines the cursor’s x and y position as it moves, the other being the even that triggers another function called ‘shooting’ when the player puts in a left click input.

Both of these will allow the player to move and shoot.

Figure 6

To add onto the movement, I’ve also added in some restrictions as to where the player can or can’t move.

I’ve made it so that the player’s position in the game area only updates if the cursor is within the canvas, this is so that the player isn’t able to move anywhere outside of the canvas.

This was done by using If and Else statements, essentially Figure 7 shows that if the cursor’s y axis is less or higher than the canvas height or 0, it will set the player’s y position to still be within the canvas. If any of these statements are not being met, then the else function sets the player’s y position to the cursor’s which should be when the cursor is inside the canvas.

Figure 7

This was implemented as to keep the player from cheating and avoiding the enemies moving towards them all together. It is also considered keeping the game neater and more robust.

To create the bullet projectiles and enemies, I’ve used arrays to contain the both of them.

“An array is a special variable, which can hold more than one value at a time.”

Since I plan on multiple bullets and enemies appearing, an array would help to keep track of each individual one. In Figure 8, I made both of these variables identically.

Figure 8

Within Figure 9, I have enemies that appear during randomized intervals to keep the appearance of enemies less predictable. Once this interval is completed, it will then spawn an enemy within a randomized spawn range. This will be done when the new ‘myEnemy’ component gets pushed.

As the enemy spawns, I’ve used a for loop function so that they will be moving at a -8 pixels a second towards the left. If the enemy moves out of the canvas, then they will be spliced from the array (This means they will be removed), however if they’re still within the canvas they will be drawn.

This is done to keep the amount of variables low so that the code is able to keep running better, you could say that this is a way of optimization as well which may prove important for less powerful pcs.

Figure 9

As for the bullets, there is a similar function although without the needed randomization as they will be coming from the player’s X and Y position seen in Figure 10.

Figure 10

Although, despite the player being able to shoot bullets and enemies being able to constantly spawn, one issue that arises is that these bullets did nothing towards the enemies. Usually they’d fly past the enemy without registering any collision on figure 11.

Figure 11

As seen on Figure 12, to create the collision between both of these objects, I made a couple of for loops, both of these made sure whether the same bullet and enemy were within each other’s range. Once touched, both objects with splice each other out of their own arrays.

Figure 12

As for now, I’ve managed to get a working foundation for the mechanic which I consider to be a success.

My aims for now would be to try and polish the gameplay much more, as well as adding in some sprites with frame-based animations to make the game look much more appealing and nicer to play.

I feel as if the difficulties here would be trying to get all the sprites to work without it affecting the gameplay, this might mean that I might have to change some of the hitboxes depending on the shape of the player and enemies.

Playtesting will also be important, as this will let me know about what other people think of my game. Upon listening to constructive criticism I may have to modify some of this code, or even implement new features which may also be a challenge given the time we’ve got.

Bibliography 2020. Game Tutorial. [online] Available at: <> [Accessed 5 November 2020]. 2020. Javascript DOM Eventlistener. [online] Available at: [Accessed 5 November 2020]. 2020. Javascript Arrays. [online] Available at: [Accessed 5 November 2020].