BTEC LEVEL [3] [SOFTWARE] - WordPress.com€¦ · BTEC LEVEL [3] [SOFTWARE] NAME: [Rowan ... HAND IN DATE: [10th December 2015 ] [Unit 20 ] – [Client Side Customisation ] Assignment

BTEC LEVEL [3]

[SOFTWARE]

NAME: [Rowan Lovejoy]

TEACHERS NAME: [Gareth Wright]

ASSIGNMENT TITLE: [Design, develop, test]

ASSIGNMENT No: L3SA/B-U20_A3-GW]

HAND IN DATE: [10th December 2015]

[Unit 20] – [Client Side Customisation] Assignment [L3SA/B-U20_A3-GW]

2 | P a g e [Rowan Lovejoy]

P4 –

Answer to P4: The following wireframes show the game’s web browser window, pre and post-game screens, and in-games graphical user-interface. Each is annotated with numbers corresponding to sections in each wireframe’s respective explanations. Additionally, the CSS rules used to control the various components of each screen are identified and explained. All aspect ratio values have been obtained using the Aspect Ratio Calculator on the Digital Rebellion website (Digital Rebellion, n.d.). All resolutions values are measured in pixels. HTML, CSS, and JavaScript code is italicised. Game Web Browser Window

Explanation: Figure 1 (shown above) shows the web browser window for the game. This is the inner-window of the web browser (excluding any toolbars and window frames). This wireframe was drawn on canvas with a resolution of 1280x674, an aspect ratio of 1.9:1. These resolution values were obtained using the ‘innerWidth’ and ‘innerHeigt’ JavaScript method while the game was open in the Opera web browser (version 33.0.1990.115) with a display resolution of 1200x800 (an aspect ratio of 1.6:1). This screen has two discrete areas: the Web Browser Window Screen Space (1A) and the Game Screen Space (1B). The former is static and serves as a buffer between the edges of the Web Browser Window and the Game Screen Space, while the latter displays the game itself, including its gameplay graphics and user-interface components.

Figure 1

1A

1B



The Game Screen Space occupies an 800x600 (an aspect ratio of 1.33:1 (4:3)) rectangle space at the centre of the screen. This resolution value has, of course, been adjusted by the web browser for correct display in a 1280x674 pane. CSS: Two CSS rules affect the styles for this screen: body {

background: #000; color: #fff; font-family: Verdana, Arial, sans-serif; font-size: 18px;

} The above rule affects the body section of the game’s HTML document. This rule has four declarations:

• background: #000; specifies that the background of the website to be the colour corresponding to the #000 hexadecimal value.

• color: #fff; specifies that all of the text on the website be the colour

corresponding to the #fff hexadecimal value.

• font-family: Verdana, Arial, sans-serif; specifies to the use of the Verdana typeface for all text within the body section of the webpage, as well as two fallback options (Arial and Sans-Serif) should the first choice not be supported by the player’s web browser.

• font-size: 18px; specifies that the text-size for all non-heading text within

the body section of the webpage to be 18 pixels. #game {

height: 600px; left: 50%; margin: -300px 0 0 -400px; position: relative; top: 50%; width: 800px;

} The above rule affects the ‘game’ division in the game’s HTML document. This division is a component of the Game Screen Space. This rule has six declarations:

• width: 800px; and height: 600px; specifies that the width and height values of the game division be 800 pixels and 600 pixels, respectively.



• margin: -300px 0 0 -400px; and Left: 50%;, Top: 50%; work in combination with each other to position the Game Screen Space. Without the margin declaration, the game division is positioned in the top-left corner of the screen. See Figure 2.

With the margin declaration in effect, the game division has a top margin of -300 pixels and a left margin of -400 pixels (each value is half of the division’s height and width values, respectively). The result of this is to position the division so that only its bottom-right quarter is visible on screen. See Figure 3.

Figure 2

Figure 3



With the Left: 50%; and Top: 50%; declarations in effect, the corresponding edges of the division are positioned 50% of the original distance away from their original locations (those specified in margin declaration). The result of this is that the game division (and therefore the Game Screen Space) is positioned at the centre of the player’s display (see Figure 4).

Figure 4



Game Introduction Screen

Explanation: Figure 5 (shown above) shows the Game Introduction Screen. This screen is shown within the Game Screen Space and, therefore, shares its 800x600 resolution and 1.33:1 aspect ratio. Components: The screen contains three components: the container division (5A), the game’s title heading (5B), the game’s usage instruction’s heading (5C), the game’s usage instructions (5D), and the start game button (5E). 5A - The container division (gameIntro) contains the other of components of the screen (5B – 5E). 5B - The game title heading displays the title of the game (Asteroid Avoidance). 5C – The heading of the instructional text for the game. It informs the player of the topic text below it. 5D – The game’s usage instructions instruct the player on how to play the game (gameplay objectives and controls). 5E – The start game button displays the In-Game Screen when pressed. From here, a press of any key is required to initiate gameplay.

Figure 5

5A

5B

5C

5D

5E



CSS: Three CSS rules affect the styles for this screen: #gameIntro, #gameComplete { background: rgba(0, 0, 0, 0.5); margin-top: 21px; padding: 40px 0; text-align: center; } The above rule affects the gameIntro and gameComplete divisions. The gameIntro division is a component of the Game Introduction Screen. This rule has four declarations:

• Background: rgba(0, 0, 0, 0.5); specifies the transparency for the gameIntro division. The value of 0, 0, 0, 0.5 specifies that the division be the colour corresponding to the #000 hexadecimal value and have an alpha value of ‘0.5’, thereby making it semi-transparent and allowing the background colour of the game division to show through, creating a dark-blue tone for the gameIntro division. See Figure 6.

Figure 6



• margin-top: 65px; specifies a margin of 65 pixels between the top edge of the gameIntro division and the top edge of the Game Screen Space. This positions division slightly away from the top and bottom edges of the Game Screen Space.

• padding: 40px 0px; specifies 40 pixels of padding on the top and bottom edges of the gameIntro division and 0 pixels of padding for the left and right sides. This positions all non-button text in the centre of the gameIntro division.

• text-align: center; centrally aligns all text within the gameIntro division. a.button {

background: #185da8; border-radius: 5px; display: block; font-size: 30px; margin: 40px 0 0 270px; padding: 10px; width: 200px;

} The above rule affects all buttons on the game’s webpage. This includes the button used within the gameIntro division. This rule has seven declarations:

• background: #185da8; specifies that background of the button to be the colour corresponding to the #185da8 hexadecimal value.

• border-radius: 5px; specifies a 5 pixel border around the buttons. This also

has the effect of rounding the corners of the bottom.

• display: block; displays the button as a block shape, but keeps it in-line; it is not moved to different line.

• font-size: 30px; specifies that button text be 30 pixels in size.

• margin: 40px 0 0 270px; specifies a margin of 40 pixels on the top edge of the button, 0 pixels on the right and bottom edges, and 270 pixels on the left edge. This distances the bottom from the gameIntro division’s borders and text contents.

• padding: 10px; specifies 10 pixels of padding the between the text within

button and the edges of the button.

• width: 200px; specifies the width value of the button to be 200 pixels.



a.button:hover {

background: #2488f5; color: #fff; text-decoration: none;

} The above rule affects all buttons on the game’s webpage. This includes the button used within the gameIntro division. This rule takes effect when the button is hovered (the user holds their cursor over it, but does not click). This rule has three declarations:

• background: #2488f5; specifies that the background of the button be the colour corresponding to the #2488f5 hexadecimal value.

• color: #fff; specifies that the buttons’ text be the colour corresponding to

the #fff hexadecimal value.

• text-decoration: none; specifies that no text decoration (e.g., underline, line-through) be used for the text within the button.



Game Complete Screen

Explanation: Figure 7 (shown above) shows the Game Complete Screen. This screen is shown within the Game Screen Space and therefore shares its 800x600 resolution and 1.33:1 aspect ratio. Components: This screen has five components: the container division (7A), the game over message (7B), a read-out the player’s final score (7C), a read-out of the player’s highest score for that gameplay session (7D), a message of encouragement to the player (7E), and the play again button (7F). 7A – The gameComplete division that contains the other components of the screen (7B – 7F). 7B – A message informing the player of the game’s ‘game over’ status, indicating that the game is complete. 7C – A read out of the player’s in-game score immediately prior to achieving a game over status. 7D – A read-out of the highest recorded score during this instance of the game (in this sense, an instance is the game open in a web browser without being refreshed or reopened. If it is refreshed or closed and reopened, this begins a new instance, thereby erasing the record of the player's highest score).

Figure 7

7A

7B

7C

7D

7E

7F



7E – A message to the player encouraging them to strive to achieve the highest score they can. 7F – The play again button. When pressed, the game is restarted, allowing the player to play again within the same instance of the game, thereby allowing their high score value to persist.



CSS: Two rules affect the styles for this screen: #gameIntro, #gameComplete { background: rgba(0, 0, 0, 0.5); margin-top: 21px; padding: 40px 0; text-align: center; } The above rule affects the gameIntro and the gameComplete divisions. The gameComplete division is a component of the Game Complete Screen. This rule has four declarations.

• Background: rgba(0, 0, 0, 0.5); specifies the transparency for the gameComplete division. The value of 0, 0, 0, 0.5 specifies that the division be the colour corresponding to the #000 hexadecimal value and have an alpha value of ‘0.5’, thereby making it semi-transparent and allowing the background colour of the game division to show through, creating a dark-blue tone for the gameComplete division. See Figure 8.

Figure 8



• margin-top: 65px; specifies a margin of 65 pixels between the top edge of the gameComplete division and the top edge of the Game Screen Space (the game division). This positions division slightly away from the top and bottom edges of the Game Screen Space.

• padding: 40px 0px; specifies 40 pixels of padding on the top and bottom edges of the gameComplete division and 0 pixels of padding for the left and right sides. This positions all non-button text in the centre of the gameComplete division.

• text-align: center; centrally aligns all text within the gameComplete division.

#gameComplete { margin-top: 120px; } The above rule affects the gameComplete division. This rule has one declaration:

• margin-top: 120px; specifies a margin of 120 pixels between the top edge of the gameComplete division and the top edge of the Game Screen Space (the game division). The first CSS rule (#gameIntro, #gameComplete) for the Game Complete Screen controls both its division (gameComplete), as well as that of Game Introduction Screen gameIntro. However, a different amount of text-content is present in each. This additional rule overrides the margin value from the first rule, positioning the gameComplete division in the same manner as the gameIntro division. See Figures 9 and 10.

Figure 9 Figure 10



In-Game Screen

Explanation: Figure 11 (shown above) shows the In-Game Screen of the game. This screen is shown within the Game Screen Space and therefore shares its 800x600 resolution and 1.33:1 aspect ratio. Components: This screen has three components: the game display pane (11A), the current player score read-out (11B), and the game reset button (11C). 11A – The game display pane. The game’s gameplay graphics and user-interface components are displayed here. 11B – A read-out of the player’s current score. The value displayed here is updated automatically and increases the longer the player survives in a single gameplay session. 11C – The reset button. Pressing this button restarts the game, returning the player to the starting point, resetting their current score to 0, and clearing the screen of any obstacles. This does not create a new instance of the game, allowing the player’s high score value persists.

Figure 11

11A

11B 11C



CSS: Three rules affect the styles for this screen: #gameCanvas { background: #001022; } The above rule affects the gameCanvas canvas. The game's gameplay graphics are drawn on the gameCanvas canvas. This rule has one declaration:

• background: #001022; specifies the background of the gameCanvas canvas to be the colour corresponding to the #001022 hexadecimal value.

#gameUI { height: 600px; position: absolute; width: 800px; } The above rule affects gameUI division. The player's score readout and the reset button are contained within this division. This division contains the gameIntro, gameStats, and gameComplete screens. This rule has three declarations:

• width: 800px; and height: 600px; specifies that the width and height values of the gameUI division be 800 pixels and 600 pixels, respectively.

• position: absolute; specifies that the position of the gameUI division be

absolute. This positions the division relative to its ancestor (the element it contained within (in this case the game division). The effect is that the gameUI division is situated directly on top of the game division.

#gameStats { font-size: 14px; margin: 20px 0; } The above rule affects the gameStats division. This rule has two declarations:

• font-size: 14px; specifies that all text within the gameStats division (the current score read-out and the reset button) be 14 pixels in size.

• margin: 20px 0; specifies a margin of 20 pixels on the top and bottom edges

of gameStats division and a margin of 0 pixels on the left and right edges. This has the effect of positioning the current score read-out and reset button slightly away from the edges of the Game Screen Space.

Word Count: 2248



P5 - Answer to P5: The completed game (titled Asteroid Avoidance) is explained and evidenced in this section. Explanations of the game itself (gameplay, graphics, controls, and audio) and screenshots of it are provided. The languages used to program the game are outlined. All of the game’s code is provided in an appendix at the end of this document, titled 'Code Appendix'. Game Design: The Asteroid Avoidance game is based on the design described in the book ‘Foundation HTML5 Canvas: For Games and Entertainment’ by Rob Hawks (Rob Hawks, 2011). In the book, instructions on how to create the game are given. These instructions were used to make the game shown in this assignment. Some modifications and additions were made to the game for purpose of this assignment. Gameplay: Asteroid Avoidance is a side-scrolling (left to right) score attack (where the ultimate goal of gameplay is to achieve the highest score possible) video game. In the game, the player controls a spaceship that is flying through an asteroid field. The player must fly through it while avoiding the asteroids. If the player’s spaceship collides with an asteroid, the game ends. Movement: The spaceship is able to move in eight directions: up, down, left, right, up-right, up-left, down-right, and down-left. When the accelerate key (right-arrow key) is presses, the player accelerates towards the right edge of the screen (their spaceship spewing fire to indicate this). When the boost key is pressed (Z), the player accelerates at greater speed (roughly 2.9 times the speed). While boosting, the length of the spaceship’s flame increases to show an increase in speed. If the player is not accelerating, the spaceship drifts towards the left-edge of the screen, stopping upon contact with it. The spaceship cannot leave confines of the screen. Since the player is unable to directly control their backwards movement, careful use of acceleration must be made to permit navigation through the asteroid field. Boosting allows the spaceship to move faster, allowing the player to quickly move through gaps in the asteroid field before they close. However, it also makes the spaceship more difficult to control. Obstacles: Asteroids are spawned (created) off-screen (to the right of the Game Screen Space) and are scrolled onto and across it. The size, position, and velocity of each asteroid is randomized (between a minimum value and a maximum value), ensuring that no single gameplay session is the same, preventing set strategies from being formed and forcing the player to rely on their reflexes and to make moment-to-moment decisions. Score: The player’s score is measured in seconds they survive. The player’s current score is displayed on screen at all times during gameplay. The player's final score before the game ended is displayed on the Game Complete screen.



Difficulty: For every 5 seconds the player survives the number of asteroids on increases by 2. This scales infinitely, meaning that, eventually, the game will become impossibly to play. This means that the game gradually becomes more difficult, scaling as the player increases in skill; a skilled player will survive longer, resulting in a greater number of asteroids on screen, increasing the game’s difficulty for them, while an inexperienced player may not survive long and thus will be confronted with a relatively small number of asteroids. The scaling difficulty means that all players, regardless of skill, will challenged by the game at some point, providing guaranteed satisfaction with the difficulty to those who enjoy the game. It also means that a single gameplay session cannot continue indefinitely. Game End: When the player collides with an asteroid, the game ends and their final score is shown to them, along with the highest score achieved during that instance of the game. If their score for the session is greater than their highest score, it replaces it as their new highest score. The ultimate goal of the game is for the player to achieve the highest score they can. End-Game Options: When a gameplay session eventually ends, the player is given the option to restart. Doing so using the button on the Game Complete Screen preserves their high score. When the player restarts in this manner, they start in-game. However, asteroids will not begin to spawn and the spaceship will not move until a key is pressed (it doesn't matter which). At any point during gameplay, the player may also restart the game by pressing the ‘Restart’ button or by pressing the corresponding key ('backspace'). This achieves the same effect as pressing the play again button on the Game Complete Screen. Graphics: The game uses simple 2-dimensional graphics. The game's background is dark blue in colour. Asteroids are represented as white balls. The size of each asteroid is randomized between a set minimum and maximum value during their creation. The player’s spaceship is depicted as red coloured triangle. While accelerating, a smaller orange triangle extends from the spaceship’s left edge, representing its flame. When the player boosts, the length of this triangle increases. The Game Introduction and Game Complete Screens overlay a semi-transparent pane onto the game background, giving the menus on these screens a dark blue colour. All text content in game is white in colour and uses the Verdana typeface. If for some reason the Verdana typeface is unsupported, Arial will be used instead. If Arial is unsupported, a sans-serif typeface will be used instead.



In-Game Graphics Examples: The following images show examples each type of in-game graphics. Note: depending on the viewer's display device, the Menu Background and In-Game Background may be indistinguishable in colour. Despite this, they are different colours. Menu Background - Appears on: Game Introduction Screen, Game Complete Screen.

In-Game Background - Appears on: Game Introduction Screen, Game Complete Screen, In-Game Screen.

Title Text - Appears on: Game Introduction Screen, Game Complete Screen.

Heading Text - Appears on: Game Introduction Screen.

Text – Appears on: Game Introduction Screen, Game Complete Screen, In-Game Screen.



Graphical Button – Appears on: Game Introduction Screen, Game Complete Screen (darker coloured border is not part of the button). Default: Hovered:

Text Button – Appears on: In-Game Screen. Default: Hovered:

Spaceship – Appears on: Game Complete Screen, In-Game Screen. Not Accelerating: Accelerating: Boosting: Asteroids – Appears on: Game Complete Screen, In-Game Screen.

Audio: The game does not feature any audio tracks (i.e. sound effects, music, or voice acting). However, the framework exists within the game’s code for audio to be implemented. See the 'Future Development' section of this document.



Controls: The game has two control schemes: Menu and Gameplay. While the Game Introduction and Game Complete screens are displayed, the Menu control scheme is used. In this scheme, the player’s mouse cursor is used to interact with the game. Buttons on these menus can be activated using a single mouse left-click while the cursor is positioned over them. While the In-Game screen is displayed (i.e. during gameplay) the player's keyboard is used to control the game. Five keys are used by the game: three of the arrow keys (up-arrow, down-arrow, and right-arrow), the ‘Z’ key, and the 'backspace' key. Movement: The up-arrow and down-arrow keys move the spaceship towards top and bottom edges of the screen. The arrow keys are used to move the spaceship: the right-arrow causes the spaceship to accelerate; the up and down arrow keys cause the spaceship to move up and down on the screen; the right-arrow key can be used in combination with up or down arrow keys to move diagonally up-right or down-right. While player is decelerating, the up and down arrow keys can be used to move diagonally up-left and down-left. The ‘Z’ key causes the player to boost. All aforementioned movement abilities are enabled while boosting. Boosting overrides acceleration using the right-arrow key. Other: Pressing the 'backspace' key restarts the game (see Gameplay – End Game Options). Programming: Asteroid Avoidance is web browser game; it is built into a website and playable when that website is open in a web browser. It is programmed using three languages: HTML, CSS, and JavaScript. HTML is used to define the content of the website and elements to be manipulated by the CSS and JavaScript code. This includes divisions, buttons, text, and the game's canvas. HTML is used in combination with JavaScript to render the game's gameplay graphics. CSS is used to style the website. It is used to define the colour, positioning, and visual effects of elements on the website. JavaScript is used to program the game's gameplay. In combination with HTML5, it is also used to render the in-game graphics. To augment the functionality of JavaScript language, the jQuery JavaScript library is utilized (The JQuery Foundation, 2015). All code used is based on that shown in the book ‘Foundation HTML5 Canvas: For Games and Entertainment’ by Rob Hawks (Rob Hawks, 2011). All of the HTML, CSS, and JavaScript code for the game is provided in an appendix at the end of this document, titled 'Code Appendix'.



Changes Made: The Asteroid Avoidance game was made based on the instructions provided in the book ‘Foundation HTML5 Canvas: For Games and Entertainment’ by Rob Hawks (Rob Hawks, 2011). For the purpose of this assignment, several changes have been made to the game. These changes are as follows: Spaceship Movement: The movement speeds of the spaceship for all movement directions have been adjusted: when not issuing a movement command, the spaceship now gains an x-axis velocity of ‘-10’. When accelerating, the spaceship gains an x-axis velocity of ‘1.7’; when boosting, the spaceships gains an x-axis velocity of '5'; when moving up or down, the spaceship gains a y-axis velocity of ‘4.5’ and ‘-4.5’, respectively. The original velocity values were '3' when accelerating and up or down, and '-3' for when drifting. Boosting was not a feature in the original game. The changes made increase the movement speed of the spaceship, making it feel more responsive to control and enabling the player cover a greater distance in a shorter amount of time. By increasing the drift speed, the player can drop backwards at greater speed, increasing the responsiveness of the manoeuvre. Previously, the ship would drift very slowly, making it unresponsive to control when drifting, making it difficult to utilize left-wards movement. Ability to Boost: The player now has the ability to boost: by pressing the ‘Z’ key, the player can accelerate at a greater speed than would be possible by using the ‘right arrow’ key. This ability can be used to quickly slip through gaps in the asteroids before they close. Boosting also increases the length of the spaceship’s flame, although this purely a visual change. See image below:

This image (A) shows the player's spaceship while boosting.

Screen Boundaries: The distance between the boundaries of the screen (the furthest the player’s spaceship can travel in any direction) and the edge of the screen has been reduced; the player is now able rest against the edges of the screen, giving them a greater amount of space to manoeuvre within. See image below:

This image (B) shows the player's spaceship resting against the edge of the Game Screen Space.

Difficulty Scaling: Previously, 5 additional asteroids would be created every 5 seconds the player survives. This has been reduced to 2. The result of this is that game’s difficulty scales more slowly, giving player’s additional time to learn the game before the difficulty becomes too great.

A

B



Tutorial: A tutorial has been added to game. It is visible on the Game Introduction Screen. This tutorial provides a brief explanation of the game’s gameplay, scoring system, controls, and how to restart the game. The addition of a tutorial helps inexperienced players prepare for the game before they start playing, reducing the chance of them being confused and/or frustrated. See image below:

This image (C) shows the game's tutorial displayed on the Game Introduction screen.

High Score: The highest score achieved in the current instance of the game is recorded and displayed to the player on the Game Complete screen. Should their score during gameplay session exceed their high score for that instance, it replaces it as the new high score. Recording and displaying the player’s highest score to them helps to give a sense of progression; every time the player exceeds their high score, they will have a new target at which to aim, giving them a reason to continue playing by offering the potential satisfaction of exceeding their personal best. See image below:

This image (D) shows the read-out of the player's highest recorded score for the current instance of the game.

Encouraging Message: A message has been added to the Game Complete screen encouraging the player to do their best and achieve the highest score. This message may help to comfort some players who are feeling disappointed or frustrated with their performance. See image below: This image (E) shows the message of encouragement that is displayed on the Game Complete screen.

C

D

E



Text: Almost all text content in game has been changed to improve clarity: Buttons: Button text has been changed to give clearer indications of their functions: The button on the Game Introduction screen now reads “Click here to start”, as opposed to “Play”; the button on the Game Complete screen now reads “Click here to play again”, as opposed to “Play Again”; and the ‘Reset’ button on the In-Game screen now reads ‘Restart’, better reflecting its actual function. See image below:

This image (F) shows the 'Click here to start' button on the Game Introduction screen with its updated text.

Score Read-Outs: The read-out of the player’s current time survived on the In-Game screen, their final time survived on the Game Complete screen, and their high score read-out on the Game Complete screen now end with “second(s)”, as opposed to “seconds”. This change reflects the possibility that the player may survive for only 1 second, thereby making “seconds” grammatically incorrect. The new text makes allowance for scores of 1 and above. See image below: This image (G) shows the player's final time survived read-out on the Game Complete screen with the updated measurement.

Title and Game Over Message: The game’s title displayed on the Game Introduction screen and the ‘Game Over’ message on the Game Complete screen have been capitalized, drawing greater attention to them. See image below:

This image (H) shows the updated title text shown on the Game Introduction Screen

F

G

H



Game Screenshots: These screenshots are evidence of the game’s completion. The following screenshots show the completed game. The Game Introduction, Game Complete, and In-Game screens are shown. The code for the game can be found in the Code Appendix at the end of this document. Game Introduction Screen:

Explanation: Figure 12 (shown above) shows the game’s Introduction Screen. It is the first screen displayed when the game’s webpage is opened in a web browser. This screen has three functions: 1) to display the title of the game (12A); 2) to display the instructions for the game (12B); 3) and to allow the player to start the game (via a button press) (12C). This screen is displayed only when a new instance of the game is opened. The reset functionality (see In-Game Screen) will not display this screen.

Figure 12

12A

12B

12C



This screen serves to introduce the player to the game, its objectives, and how to play it, thereby giving new players a foundation from which to start. All information necessary to enable to player to play to the best of their ability is provided on this screen. Providing the player with instructions prior to starting the game gives them time to understand them and enter the game somewhat prepared for it. Once the player has finished reading the instructions, the button to start the game is clearly labelled, as well as what action to take once their in-game, allowing them to start playing quickly and easily.



Game Complete Screen

Explanation: Figure 13 (shown above) shows the Game Complete Screen. This screen is displayed when the player’s spaceship collides with an asteroid, thereby causing a ‘game over’. When this screen appears, gameplay is paused and the keyboard controls are disabled. This screen serves four purposes: 1) to inform the player that the game is over (13A); 2) to inform the player of their final score for the gameplay session, as well as their highest recorded score for all gameplay sessions within this instance of the game (creating a new instance also creates a new high score value)) (13B); 3) to encourage the player to play again and to do their best (13C); and 4) to allow them to replay the game with the click of a button (13D). This screen is serves to inform that the game is over (meaning that they can take their hands off the keyboard and/or perform other tasks), to inform them of their final score for the gameplay session, as well as their highest recorded score for this instance of a game, allowing the player to compare them and measure their performance. Should the player feel disheartened by their performance, the game encourages them to do their best. If they want to try again, they can do via a single click of a clearly labelled button.

Figure 13

13A

13B

13C

13D



In-Game Screen: Note: due to the different method used to capture this screenshot, the image quality has been reduced somewhat.

Explanation: Figure 14 (shown above) shows the In-Game Screen. This screen is displayed during gameplay. The screen serves two purposes: 1) to allow the player to play the game by showing them the outcome of their actions and location of gameplay elements (the spaceship and asteroids) (14A); and 2) and to display the game’s graphical user interface to the player (the time survived readout and the reset button, 14B and 14C, respectively). This screen allows the player to play the game; it displays the game’s graphics, conveying visual information to the player about the state of the game (the location of their spaceship and obstacles). It also displays the game’s user interface, including the player’s current score and the reset button. Although minimal (containing only three components) this user interface provides the user with all they need to play the game effectively; having a constant read-out of their score displayed to them allows to keep track of their progress within the game as well as how long they have been playing (since the score is measured in seconds survived). Word Count: 3043

Figure 14

14A

14B 14C



P6 - Answer to P6: Each feature of the game has been tested. A description of each test, the expected results, the actual results, and any comments on them or the results are included in tables in this section. While different web browsers were used for each table, both were up-to-date and running on an also up-to-date Windows 7 Professional 64 Bit Installation. Test Table #1: The tests described in this table were performed while the game’s webpage was open in the Opera web browser. Version used: 33.0.1990.115

�� The above table continues on the next page ��

Test Number

Test Description Expected Results

Actual Results Comment

#1 The HTML document of the webpage that serves as a platform for the game was opened in a web browser.

The HTML document opened successfully and the Game Introduction screen was correctly displayed.


The loading time of the webpage was slightly greater than expected.

#2

The web browser tab the game’s HTML document was open in was refreshed using the web browser’s refresh functionality.

The HTML document successfully refreshed and the Game Introduction screen was correctly displayed.

The HTML document successfully refreshed and the Game Introduction screen was correctly displayed.

None.

#3

The ‘Click here to start’ button on the Game Introduction screen was clicked.

The In-Game screen was correctly displayed.


None.

#4 While the In-Game screen was displayed, a key was pressed to initiate gameplay.

The spaceship started to move and asteroids were scrolled onto the screen; gameplay successfully began.


None.



The following table is a continuation of the table from the previous page.

�� The above table continues on the next page ��

Test Number



#5 The game was played normally (as instructed by the game on the Game Introduction screen) for 1 minute. The game was ended via the spaceship colliding with an asteroid.

The game performed and behaved correctly during gameplay.

The game performed and behaved correctly during gameplay.

Noticeable frame rate reductions briefly occurred slightly towards the end of test. Likely course: greater stress on computer hardware due to an increased number of objects (asteroids) on screen.

#6 The spaceship was deliberately put into contact with an asteroid, causing a collision thereby leading to a game over.

The collision was correctly detected and the Game Complete screen was correctly displayed.

The collision was correctly detected and the Game Complete screen was correctly displayed.

None.

#7 The spaceship was deliberately put into contact with an asteroid, causing a collision thereby leading to a game over.

The score value displayed on Game Complete screen matched that displayed on the In-Game screen prior to the former being displayed.

The score value displayed on Game Complete screen matched that displayed on the In-Game screen prior to the former being displayed.

None.

#8

The spaceship was deliberately put into contact with an asteroid, causing a collision thereby leading to a game over. This test was performed twice. The second collision took place earlier during gameplay than that of the previous.

The high score value displayed was equal to the score achieved during the first run of the test and was higher than the score achieved during the second run of the test.

The high score value displayed was equal to the score achieved during the first run of the test and was higher than the score achieved during the second run of the test.

None.



Test Number



#9 The ‘Click here to play again’ button on the Game Complete screen was clicked.

The game successfully restarted: the In-Game screen is displayed, but the spaceship is stationary and the asteroids had not begun scrolling onto the screen.

The game successfully restarted: the In-Game screen is displayed, but the spaceship is stationary and the asteroids had not begun scrolling onto the screen.

None.

#10 The game was played normally (as instructed by the game on the Game Introduction screen) for 1 minute. The game was ended via the spaceship colliding with an asteroid.

The current score display on the In-Game screen updated correctly as the game was played.

The current score display on the In-Game screen updated correctly as the game was played.

None.

#11 After gameplay began (the spaceship started to move and the asteroids began scrolling onto the screen), the ‘Reset’ button on the In-Game screen was clicked.

The game successfully restarted: the In-Game screen was displayed, but the spaceship was stationary and the asteroids had not begun scrolling onto the screen.


None.

#12 After gameplay began (the spaceship started to move and the asteroids began scrolling onto the screen), the 'backspace' key was pressed.



None.



Test Table #2: The tests described in this table were performed while the game’s webpage was open in the Internet Explorer web browser. Version used: 11.0.9600.18097.

Test Number



#1 The HTML document of the webpage that serves as a platform for the game was opened in a web browser.



None.

#2 The web browser tab the game’s HTML document was open in was refreshed using the web browser’s refresh functionality.



None.

#3 The ‘Click here to start playing’ button on the Game Introduction screen was clicked.



None.

#4 While the In-Game screen was displayed, a key was pressed to initiate gameplay.


The game did not respond to the input; gameplay did not successfully begin.

Multiple different key presses were tried. All were ineffective. The failure of this test means that further tests cannot be performed.



Results Summary: While the game’s webpage was open in the Opera web browser, all tests were performed successfully. However, while it was open in Internet Explorer, only tests #1 to #3 completed successfully. On test #1, the webpage took slightly long than expected to open. The same test, performed using Internet Explorer, took the expected amount of time. The exact reason for this discrepancy is unknown at this time. However, the failure Internet Explorer to successfully complete test #4 may mean that the webpage was not opened correctly; this may have affected the webpage’s loading speed. On test #4 (Test Table #1), the game briefly suffered noticeable frame rate reductions. This is likely caused by a combination of a deficiency in computational power and an increase in the number on screen objects (asteroids) and is likely not indicative of a fault. In the tests performed using the Internet Explorer web browser, only tests #1, #2, #3 completed successfully. The failure of test #4 (initiating gameplay), meant that further tests (#5 to #12 of Test Table 1) could not be performed. The exact reason for the failure of Internet Explorer to complete test #5 is unknown at this time. A possible reason is due to the configuration of Internet Explorer – a setting may be preventing the game from running correctly, although exactly what setting is unknown at this time. Despite the failure of Internet Explorer to complete all of the tests successfully, Opera did so for all of them, indicating the game’s code is functional. All tested features and functionality performed as expected. Word Count: 1362



M3 - Answer to M3: Explanatory comments have been added to the JavaScript code for game. These comments refer to the code placed directly below them. All code has been included in an appendix at the end of this document. Word Count: 35



D2 – Answer to D2: The Asteroid Avoidance game described in this document has been reviewed by three peers. These peers are referred to as Peer #1, Peer #2, and Peer #3. Their feedback has been recorded in the following tables: Peer #1 - Feedback Table

Good Bad Ugly

Simple clear graphics and it starts slowly

Does z button help? None.

Peer #2 - Feedback Table

Good Bad Ugly

The game had a good difficulty curve, not too fast, just the right speed

It would have been a nice touch to have the timer and score to be different though

The asteroids did come a bit quickly at times, also in large clusters which made them very difficult too dodge

The idea of having the score and the timer be the same thing is nice and compact

The tutorial could have been a bit more spaced out (bullet pointed) rather than being a wall of text

The inclusion of power ups, or some kind of change the environment would have been nice, it seems at times to be just an unchanging wall of minor movement

Peer #3 - Feedback Table

Good Bad Ugly

The simplicity of the game’s structure means that only four keys are needed to control the spaceship. This avoids the need for complex key-press sequences and the ability to touch-type, which is a fairly specialist skill.

It was unclear from the description that the game was followed a side-scrolling format rather than a vertical scrolling game, which lead to some confusion when trying to understand the logic behind the control keys.

None.



Improvements Based on Feedback: Based on the feedback from the peers who tested the Asteroid Avoidance game (see their comments on the previous page), several improvements have been made to it. These are as follows: Improvement #1 - Tutorial: The instructional text shown on the Game Introduction screen has been changed to improve the clarity of the information and readability of the text. The sentence: “Asteroids will appear from the right side of the screen and fly towards your spaceship.” has been added to inform the player of the direction that the asteroids will fly, giving some context the explanation of the game’s control scheme. This change was made based on the feedback from Peer #3 (15A). Additionally, the individual explanations for each type of control (movement and boosting) have been placed on separate lines, thereby improving readability. This change was made based on the feedback from the Peer #2 (15B). See Figure 15.

Figure 15

15A

15B



Improvement #2 - Score: An alternate scoring metric has been added to the game: points. For every 1 second the player survives, they are awarded 15 points. A read-out of the player’s current points (Score) is displayed on the In-Game screen, below their Time survived (16A). The player’s highest score for the current instance of the game is displayed to them on the Game Complete screen (See Figure 17 (17A)). Should the player achieve a greater value of points than their highest score, it replaces it as their new highest score. This change was made based on the feedback from Peer #2. See Figure 16.

�� Figure 17 can be found on the next page ��

Figure 16

16A



Figure 17

17A



Future Development: The following are some potential changes and additions to the game that were not made during this assignment. Sound: The original versions of game, as written in the ‘Foundation HTML5 Canvas: For Games and Entertainment’ by Rob Hawks (Rob Hawks, 2011), did include the necessary framework for implementing sound (sound effects and music) into the game. The reason this was not implemented was that source given in the book for the sounds to be retrieved from was, at least at the time, no longer accessible. In the future, however, this will be a high priority for development. Collision Detection: The current hitbox of the spaceship is inaccurate; it is not the same shape as spaceship's model. From a player’s perspective, this means it is very difficult to tell, at a glance, whether or not the spaceship will be able to pass through some gaps safely. Currently, the hitbox is a circle shape situated in the centre of the space. See images below:

This image (D) shows the actual shape of hitbox overlaid onto an image of the spaceship. As shown here, the hitbox does not reflect the actual shape of the spaceship. Image taken from the book ‘Foundation HTML5 Canvas: For Games and Entertainment’ by Rob Hawks (Rob Hawks, 2011).

This image (E) shows an extreme example of the collision detection system's inaccuracy. There is visible empty space between the spaceship and the asteroid, but a collision is registered nonetheless.

D

E



Addressing Feedback: Although some feedback did not inspire changes, it is nevertheless necessary to address it. Feedback that was not addressed by changes to the game is covered in this section. Peer #1 commented “Does z button help?” in regards to the boost functionality, whereby when the ‘Z’ key is depressed the spaceship will accelerate at a greater speed than that which can be achieved using the ‘right arrow’ key. The inclusion of this feature was intended to give the player the ability to quickly fly through gaps in the asteroids before they closed, thereby giving the player an additional option for when room to manoeuvre is limited. However, in practice these opportunities almost never appeared and when they did the regular acceleration speed was great enough to allow the player to capitalize on them. Additionally, the greatly increased speed of the spaceship while boosting made it too difficult to control. This is a major shortcoming in a game that relies on precise movements. One possible solution to this problem is to reduce both the normal acceleration and boost speeds of the spaceship. This would make regular acceleration less useful for anything other than basic manoeuvres, while making boosting a more attractive option, as it would offer greater speed while still being slow enough to control with some degree of accuracy. However, these changes risks making normal acceleration too slow to be useful; the player may simple resort to letting their spaceship rest against the left-edge of the screen and utilizing only up and down movement. Also, the high speed and lack of precision of the boost feature in its current form may be enjoyable to some players. Further testing is required to determine the viability of this option. Peer #2 commented “The inclusion of power ups, or some kind of change the environment would have been nice, it seems at times to be just an unchanging wall of minor movement”. This piece of feedback highlights the fact that the entirety of the game can be experience in first few seconds of play; the only change during gameplay is the number of asteroids. This is potentially a major failing of the game, as there may simply not be enough diversity in gameplay to satisfy players for more than a few minutes. Conversely, it can be argued that the game is intended for brief ‘pick up and play’ sessions, rather than long term investment by the player, so the lack of diversity may not be an issue. In terms of power-ups, one option is to implement collectable power-ups that randomly spawn and drift across the screen, along with the asteroids. These power-ups would benefit the player in a number of different ways, such granting temporary invincibility, allowing the player to tackle otherwise impossible obstacles; allowing the player to attack and destroy the asteroids for a limited period of time; granting the player a large sum of points; or reducing the number of asteroids on screen. The effects granted some of these power-up would have to be temporary, as permanently boosting the player’s capabilities could negatively affect gameplay balance.



One major potential issue with this concept would be location of the power-ups: the location of each asteroid is chosen randomly; no single asteroid will have the same trajectory as another. This means that it would be possible for the location of the power-ups and asteroids to overlap, rendering the former unobtainable by the player, as doing so would result in their death from colliding with the latter. There is also a conflict with one of the core mechanics of the game, the increasing number of asteroids: eventually, regardless of the location of the power-ups or the bonuses they convey, there would too many asteroids on screen for the player to collect it, rendering their existence pointless. The aforementioned issues are design related. There would also be difficulties with development, as programming the game to create the power-ups and apply their bonuses to the player would be difficult. In terms of diversifying the game’s environment, a simple solution would be to have the game’s background (currently a solid colour) change as the game progresses, perhaps showing planets, stars, and other spaceships. This change would be purely cosmetic, but would help visually diversify the game. It would also be possible for there to be a greater diversity in the asteroids; some could be different colours and/or have features such as craters, particle trails, or animations, such as spinning as their drift. These changes would be significantly more straightforward to implement than the power-ups, as they are purely cosmetic and do affect gameplay. They are definite possibilities for feature development. To conclude, although not all of the feedback was acted upon, it has been registered and the majority of it is under consideration for future development. Delays are almost entirely due to the difficulty of implementing the aforementioned changes/additions. Word Count: 1366



Bibliography Digital Rebellion, n.d. Aspect Ratio Calculator. [online] Available at: <http://www.digitalrebellion.com/webapps/aspectcalc> [Accessed: 6th of December 2015]. Hawkes, R., 2011. Foundation HTML5 Canvas: For Games and Entertainment. New York: friendsofED. December 2015]. The JQuery Foundation, 2015. jQuery. [online] Available at: <https://jquery.com/> [Accessed: 6th of December 2015].



Code Appendix: The HTML, CSS, and JavaScript code used to create the Asteroid Avoidance game described in this program are included in this appendix. Each is language has a separate section, organised in the order HTML > CSS > JavaScript. All code is based on that shown in the book ‘Foundation HTML5 Canvas: For Games and Entertainment’ by Rob Hawks (Rob Hawks, 2011). Some modifications and additions have been made for purpose of this assignment. Appendix – HTML Code <!DOCTYPE html> <html> <head> <title> Asteroid avoidance </title> <meta charset="utf-8"> <link href="css/game.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <script type="text/javascript" src="js/game.js"> </script> </head>



<body> <div id="game"> <div id="gameUI"> <div id="gameIntro"> <h1>ASTEROID AVOIDANCE</h1> <br> <h3>How to Play</h3> <p>Avoid the asteroids for as long as possible; if you hit one, the game ends. The longer you survive, the more difficult the game becomes, but the higher your score.</p> <br> <p>Press the up and down arrow keys to move the spaceship up and down. Press the right arrow key to accelerate forward. Press Z to boost forward at greater speed. The spaceship decelerates when you're not accelerating or boosting. <br> <br> If you want to restart, click the 'Reset' button in top-righ corner of the screen or press 'backspace'. Doing so resets your current score to 0, but does not affect your highscore.</p> <br> <p>Once in the game, press any key to start moving.</p> <p><a id="gamePlay" class="button" href="">Click here to start</a></p> </div> <div id="gameStats"> <p>Time: <span class="gameScore"></span> seconds</p> <p><a class="gameReset" href="">Restart</a></p> </div>



<div id="gameComplete">

<h1>GAME OVER</h1> <br> <p>You survived for <span class="gameScore"></span> second(s).</p> <p>Your highest recorded score is <span class="gameHighScore"></span> second(s).</p> <br> <p>Do your best! Aim for the highest score you can!</p> <p><a class="gameReset button" href="">Click here to play again</a></p> </div> </div> <canvas id="gameCanvas" width="800" height="600">  </canvas>  <audio id="gameSoundBackground" loop> <source src="sounds/background.ogg"> <source src="sounds/background.mp3"> </audio>

<audio id="gameSoundThrust" loop> <source src="sounds/thrust.ogg"> <source src="sounds/thrust.mp3"> </audio> <audio id="gameSoundDeath"> <source src="sounds/death.ogg"> <source src="sounds/death.mp3"> </audio>

</div> </body> </html>



Appendix - CSS Code * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; } body { background: #000; color: #fff; font-family: Verdana, Arial, sans-serif; font-size: 18px; } h1 { font-size: 30px; } p { margin: 0 20px; } a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; }



a.button { background: #185da8; border-radius: 5px; display: block; font-size: 30px; margin: 40px 0 0 270px; padding: 10px; width: 200px; } a.button:hover { background: #2488f5; color: #fff; text-decoration: none; } #game { height: 600px; left: 50%; margin: -300px 0 0 -400px; position: relative; top: 50%; width: 800px; } #gameCanvas { background: #001022; } #gameUI { height: 600px; position: absolute; /* Places UI on top of the canvas */ width: 800px; } #gameIntro, #gameComplete { background: rgba(0, 0, 0, 0.5); margin-top: 21px; padding: 40px 0; text-align: center; }



#gameComplete { margin-top: 120px; } #gameStats { font-size: 14px; margin: 20px 0; } #gameStats .gameReset { margin: 20px 20px 0 0; position: absolute; right: 0; top: 0; }



Appendix - JavaScript Code //Runs all code within it when webpage has finished loading $(document).ready(function() { //Declares variables for manipulating the canvas element var canvas = $("#gameCanvas"); var context = canvas.get(0).getContext("2d"); //Defines the dimensions of the canvas var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); //Declares variables to store game settings var playGame; var asteroids; var numAsteroids; var player; //Declares variables for storing the player's score var score; var highScore = 0; var scoreTimeout; //Enumerates keycodes var arrowUp = 38; var arrowRight = 39; var arrowDown = 40; var 'backspace' = 8; var z = 90; //Declares the game's user-interface objects var ui = $("#gameUI"); var uiIntro = $("#gameIntro"); var uiStats = $("#gameStats"); var uiComplete = $("#gameComplete"); var uiPlay = $("#gamePlay"); var uiReset = $(".gameReset"); var uiScore = $(".gameScore"); var uiHighScore = $(".gameHighScore"); var uiAllTimeScore = $(".allTimeHighScore"); //Declares the game's sound objects var soundBackground = $("#gameSoundBackground").get(0); var soundThrust = $("#gameSoundThrust").get(0); var soundDeath = $("#gameSoundDeath").get(0);



//Asteroid Object var Asteroid = function(x, y, radius, vX) { this.x = x; this.y = y; this.radius = radius; this.vX = vX; }; //Player Object var Player = function(x, y) { this.x = x; this.y = y; this.width = 24; this.height = 24; this.halfWidth = this.width/2; this.halfHeight = this.height/2; this.vX = 0; this.vY = 0; this.moveRight = false; this.moveUp = false; this.moveDown = false; this.boost = false; this.flameLength = 20; };



//Resets then starts the game when called function startGame() { //Resets the game stats read-outs uiScore.html("0"); uiStats.show(); //Sets up the game's initial settings playGame = false; asteroids = new Array(); numAsteroids = 10; score = 0; player = new Player(150, canvasHeight/2); //Creates asteroids for (var i = 0; i < numAsteroids; i++) { var radius = 5+(Math.random()*10); var x = canvasWidth+radius+Math.floor(Math.random()*canvasWidth); var y = Math.floor(Math.random()*canvasHeight); var vX = -5-(Math.random()*5); asteroids.push(new Asteroid(x, y, radius, vX)); }; //Keyboard Event-listeners //Keydown Event-Listener //Runs when a key is deprssed $(window).keydown(function(e) { //Stores the keycode of the depressed key in a variable var keyCode = e.keyCode; //Starts the game when any key is depressed if (!playGame) { playGame = true; soundBackground.currentTime = 0; soundBackground.play(); animate(); timer(); };



//Checks keycode and takes action if (keyCode == arrowRight) { player.moveRight = true; if (soundThrust.paused) { soundThrust.currentTime = 0; soundThrust.play(); }; } else if (keyCode == arrowUp) { player.moveUp = true; } else if (keyCode == arrowDown) { player.moveDown = true; } else if (keyCode == z) { player.boost = true } else if (keyCode == 'backspace') { $(window).unbind("keyup"); $(window).unbind("keydown"); e.preventDefault(); uiComplete.hide(); soundThrust.pause(); soundBackground.pause(); clearTimeout(scoreTimeout); startGame(); } });



//Keyup Event-Listener //Runs when a key is released $(window).keyup(function(e) { //Stores the keycode of the released key in a variable var keyCode = e.keyCode; if (keyCode == arrowRight) { player.moveRight = false; soundThrust.pause(); } else if (keyCode == arrowUp) { player.moveUp = false; } else if (keyCode == arrowDown) { player.moveDown = false; } else if (keyCode == z) { player.boost = false; } }); //Calls the animate function when a key depressed/released animate(); };



//initializes the game environment function init() { uiStats.hide(); uiComplete.hide(); uiPlay.click(function(e) { e.preventDefault(); uiIntro.hide(); startGame(); }); uiReset.click(function(e) { $(window).unbind("keyup"); $(window).unbind("keydown"); e.preventDefault(); uiComplete.hide(); soundThrust.pause(); soundBackground.pause(); clearTimeout(scoreTimeout); startGame(); }); };



function timer() { //If the game is being played, runs code within it every second if (playGame) { scoreTimeout = setTimeout(function() { //Updates the current score display on the In-Game screen uiScore.html(++score); //Increases the number of asteroids as player's score increases if (score % 5 == 0) { numAsteroids += 2; }; timer(); }, 1000); }; };



//Draws and animates the game's graphics function animate() { //Clears the canvas context.clearRect(0, 0, canvasWidth, canvasHeight); //Draws the asteroids var asteroidsLength = asteroids.length; for (var i = 0; i < asteroidsLength; i++) { var tmpAsteroid = asteroids[i]; tmpAsteroid.x += tmpAsteroid.vX; if (tmpAsteroid.x+tmpAsteroid.radius < 0) { tmpAsteroid.radius = 5+(Math.random()*10); tmpAsteroid.x = canvasWidth+tmpAsteroid.radius; tmpAsteroid.y = Math.floor(Math.random()*canvasHeight); tmpAsteroid.vX = -5-(Math.random()*5); }; var dX = player.x - tmpAsteroid.x; var dY = player.y - tmpAsteroid.y; var distance = Math.sqrt((dX*dX)+(dY*dY)); //Determins if the spaceship as collided with an asteroid and takes action if it has if (distance < player.halfWidth+tmpAsteroid.radius) { //Updates the player's high score if their last score was greater than it if (score > highScore) { highScore = score; } uiHighScore.html(highScore);



//Pauses the thrust sound effect soundThrust.pause(); //Plays the death sound effect soundDeath.currentTime = 0; soundDeath.play(); //Displays the Game Complete Screen playGame = false; clearTimeout(scoreTimeout); uiStats.hide(); uiComplete.show(); soundBackground.pause(); $(window).unbind("keyup"); $(window).unbind("keydown"); }; context.fillStyle = "rgb(255, 255, 255)"; context.beginPath(); context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI*2, true); context.closePath(); context.fill(); }; //Resets the spaceship's velocity player.vX = 0; player.vY = 0; //Adjustes player velocity when a movement command is issued if (player.moveRight) { player.vX = 1.7; } else { player.vX = -10; }; if (player.moveUp) { player.vY = -4.5; };



if (player.moveDown) { player.vY = 4.5; }; if (player.boost) { player.vX =5; }; //Updates the spaceship's position based on its velocity player.x += player.vX; player.y += player.vY; //Defines the boundaries of the Game Screen Space and prevents movement beyond them if (player.x-player.halfWidth < 1) { player.x = 1+player.halfWidth; } else if (player.x+player.halfWidth > canvasWidth-1) { player.x = canvasWidth-1-player.halfWidth; } if (player.y-player.halfHeight < 1) { player.y = 1+player.halfHeight; } else if (player.y+player.halfHeight > canvasHeight-1) { player.y = canvasHeight-1-player.halfHeight; };



//Draws the spaceship's flame when boosting if (player.boost) { context.save(); context.translate(player.x-player.halfWidth, player.y); if (player.flameLength == 40) { player.flameLength = 30; } else { player.flameLength = 40; }; context.fillStyle = "orange"; context.beginPath(); context.moveTo(0, -5); context.lineTo(-player.flameLength, 0); context.lineTo(0, 5); context.closePath(); context.fill(); context.restore() }



//Draws the spaceship's flame when accelerating else if (player.moveRight) { context.save(); context.translate(player.x-player.halfWidth, player.y); if (player.flameLength == 20) { player.flameLength = 15; } else { player.flameLength = 20; }; context.fillStyle = "orange"; context.beginPath(); context.moveTo(0, -5); context.lineTo(-player.flameLength, 0); context.lineTo(0, 5); context.closePath(); context.fill(); context.restore(); }; //Draws the spaceship context.fillStyle = "rgb(255, 0, 0)"; context.beginPath(); context.moveTo(player.x+player.halfWidth, player.y); context.lineTo(player.x-player.halfWidth, player.y-player.halfHeight); context.lineTo(player.x-player.halfWidth, player.y+player.halfHeight); context.closePath(); context.fill(); //Randomises the size, position, and velocity of the asteroids while (asteroids.length < numAsteroids) { var radius = 5+(Math.random()*10); var x = Math.floor(Math.random()*canvasWidth)+canvasWidth+radius; var y = Math.floor(Math.random()*canvasHeight); var vX = -5-(Math.random()*5); asteroids.push(new Asteroid(x, y, radius, vX)); };



//Calls the animate function one every 33 milliseconds while the game is being played if (playGame) { setTimeout(animate, 33); }; }; //Calls the init function when the webpage has finished loading init(); });

Documents

BTEC LEVEL [3] [SOFTWARE] - WordPress.com€¦ · BTEC LEVEL [3] [SOFTWARE] NAME: [Rowan ... HAND IN DATE: [10th December 2015 ] [Unit 20 ] – [Client Side Customisation ] Assignment