Training

Index.js

  • Lines 37-38: Edit the display size (width & height) of the canvas.
  • Line 42: Modify the gravity to alter the jump velocity of the character sprites.
  • Line 44: Define background asset.
  • Line 45-47: Define background asset position.
  • Line 49: Load background image from /img folder in the code.
  • Line 52-57: Repeat 44-49 for the floating island sprite in terms of asset type, position and file.
  • Line 58: Edit the scale of the asset, default scale is 1. To increase the size input a higher integer, to decrease the size input a lower integer.
  • Line 59: Define the total frames in the animation (i.e. count the total amount of frames the file contains).
  • Lines 62-77: Repeat 44-49 and 58, 59 for the first character sprite.
  • Line 78: Define the offset of the character i.e. choose the starting coordinates of where the character will first appear on the screen.
  • Lines 82-118: Define all character states, the image sources from the /img folder, the scale and the max frames per sprite state.
  • Line 120-123: Define the coordinates of the attackbox i.e. if player 2 is colliding with this region whilst attack mode is activated by player 1, player 2 will lose health. Tip: it is usually a good idea to place the attack box slightly in front of the player positioned between their head and waist.
  • Line 125-126: Define the width and height of the attackbox. Tip: size approximately to the width of the player and a height of length from the player's head to waist.
  • Line 130-195: Repeat 62-128 for player 2.
  • Line 198: Define the key for player 1 to run left.
  • Line 201: Define the key for player 1 to run right.
  • Line 204: Define the key for player 2 to run right.
  • Line 207: Define the key for player 2 to run left.
  • Line 233: Define the velocity of player 1 running left i.e. the more negative the integer means the player will move faster when the appropriate key is pressed.
  • Line 236: Define the velocity of player 1 running right i.e. the more positive the integer means the player will move faster when the appropriate key is pressed.
  • Line 250: Define the velocity of player 2 running left i.e. the more negative the integer means the player will move faster when the appropriate key is pressed.
  • Line 253: Define the velocity of player 2 running right i.e. the more positive the integer means the player will move faster when the appropriate key is pressed.
  • Line 334: Define the jump velocity of player 1. i.e. the more negative the integer means the player will jump higher when the appropriate key is pressed.
  • Line 353: Define the jump velocity of player 1. i.e. the more negative the integer means the player will jump higher when the appropriate key is pressed.
  • Line 89: Starting % of players health i.e. 100 = 100%.
  • Line 140: Open
  • Line 154: Indicate the amount the player's health should decrease each time they are attacked i.e. 20 means that it will reduce 20 points off the player's starting health amount. In this example 100 - 20 = 80, so after 1 hit/attack the player's health will be 80. They will die if they are attacked 5 times.

Utils.js

  • Line 19: Display text if the game ends with a tie between players.
  • Line 21: Display text if player 1 wins.
  • Line 23: Display text if player 2 wins.
  • Line 27: Amount of time (seconds) of each match.
  • Line 31: Millisecond intervals to decrease timer by i.e. 1000 milliseconds means decrease timer by 1 second intervals.