Game Project Javascript (Falling on Canyon, Reaching Flagpole, Multiple Lives)
I have existing code that needs to be fixed. Need some help. Thanks!
1. Inspect the code.
2. Add game character controls [1 marks]
– Copy and paste the code which draws your game character from part 3_interaction into the
function `drawGameChar`
– Check that your game character appears in your sketch
– Copy and paste the code inside keyPressed and keyReleased functions from part 3_interaction
into the same functions here
– Test that your game character can move left and right and jump. NB. they won’t fall back to
the ground just yet.
– Check that the animations look correct
3. Add falling code [1 marks]
– From part 3b_canyonsAndCoins, copy and paste the conditional statement which makes the
character fall into the `draw` function.
– Test that the character now falls back to the ground when you jump.
4. Render background items [2 marks]
– From part 4_scrollingBackground, copy and paste the arrays `trees_x`, `clouds`, and `mountains`
– Copy and paste the `for loops` for each of these items into the `draw` function.
– Now we are going to refactor this code.
– Create three new functions `drawClouds`, `drawMountains`, `drawTrees`
– Cut and paste each `for loop` into the relevant function.
– In the `draw` function call each of the three new functions (eg. `drawClouds`)
– You should now see all of the above items drawn to the screen
5. Render canyons and collectables [2 marks]
– From 4_scrollingBackground, copy and paste the arrays `canyons`, `collectables`
– Copy and paste the `for loops` for each of these items into the `draw` function.
– We are also going to refactor this code but we will do things a little differently.
– Cut and paste only the body of each `for loop` into the functions `drawCanyon` and
`drawCollectable`
– Now replace the references to the arrays with the argument provided by the function
(eg. `canyons[i].posX` becomes `t_canyon.posX`)
– Finally we need to call these functions passing each canyon or collectable as a
parameter.
– Do this inside the body of each `for loop`. (eg. `drawCanyon(canyons[i]);`)
– You should now see canyons and collectables rendered. HINT: check the draw order is
correct
6. Implement scrolling [1 marks]
– From 4_scrollingBackground copy and paste the `push`, `pop` and `translate`
commands into the correct places in the `draw` function
– Try walking to the edge of the screen and check that all the rendered items
move in the correct direction to create the illusion of motion.
7. Implement collectables interaction [2 marks]
– From part 3b_canyonsAndCoins, copy the conditional statement which checks
whether a player is within range of a collectable and paste it into the function
`checkCollectable`
– As you did with the `drawCollectable` function, replace the references to `collectable`
with references to `t_collectable`.
– Write the code to call `checkCollectables` just below the call to `drawCollectables`. It
should use exactly the same format.
– We now need to make sure that the collectable is not drawn once it has been found. Add
a conditional statement to the same `for loop` which prevents both functions being called
if that collectable’s `isFound` property is `true`
– Test your code to check that collectables disappear when the game character collides with
them.
– You’ll notice that once the screen starts scrolling the collectable items stop functioning
as expected. This is because `gameChar_x` only represents where the character appears
on the screen not where they are in the game world.
– The variable `gameChar_world_x` shows where the game character is in the game world. Replace
`gameChar_x` in the `checkCollectable` function with `gameChar_world_x` to make the collectable items work with scrolling.
8. Implement canyons interaction [1 marks]
– From part 3b_canyonsAndCoins, copy and paste the conditional statement which makes the
character plummet into the `draw` function.
– Copy and paste the conditional statement which detects whether the player is over a canyon
into the function `checkCanyon`.
– Adapt the code to use the argument `t_canyon`
– Adapt the same code to use `gameChar_world_x` instead of `gameChar_x`
– Call the function from the same `for loop` which draws the canyons, passing the each canyon
as an argument in the same way as you did for `drawCanyon`1. Add a score counter [1 marks]
– create a global variable called `game_score`
– increment `game_score` by one each time the character collects an item.
– use the text function to draw the score on the screen.
2. Add a flagpole [1 marks]
– We need to add an end to your level. I have chosen a flagpole but you can chose according to the theme of your game.
– Initialise an object called `flagpole`, it should at least have the properties `x_pos` and `isReached`.
– set `isReached` to `false` and `x_pos` to a world position at the very end of your level.
– create a function called `renderFlagpole` and call this from the draw function
– complete the function to draw your flagpole in two states. One for when `isReached` is false,
and one for when it is `true`
3. Flagpole checking function [1 marks]
– create a function called `checkFlagpole`
– call the function from `draw`, but write a conditional so that `checkFlagpole` is only called when `flagpole.isReached` is `false`
– in `checkFlagpole` write a conditional such that when the gameChar is in range of the flagpole
its `isReached` property is set to `true`
4. Add lives [2 marks]
– Your character should begin with three lives, and each time they fall down a canyon the game
should reset and their remaining lives decrement by one.
– Create a global variable `lives`, and initialise it to `3` within `setup`.
– Create a function called `checkPlayerDie`. Call this within draw.
– In this function define a conditional statement that tests if your character has fallen below
the bottom of the canvas. When this is `true`, decrement the `lives` counter by one
– Create a new function called `startGame()`.
– Move everything from `setup` except `createCanvas` and the initialisation of `floorPos_y` and
`lives` into this new function.
– At the end of your now very short `setup` function call `startGame()`.
– In `checkPlayerDie` create a conditional statement to test if the player has
used all of their lives. If there are lives remaining call `startGame`.
– Write some code using a `for` loop to draw life tokens onto the screen so that you
can keep track of how many lives you have remaining.
5. “Game over” and “Level complete” text [2 marks]
– In the draw loop, after your drawing code and before your game logic
code, write two conditional statements
– The first displays “Game over. Press space to continue.”
when `lives` is less than 1.
– The other displays “Level complete. Press space to continue.” when
`flagpole.isReached` is true
– For each conditional you should return at the end of the statement. This
prevents any further game logic from happening when play is over.
6. Tidy your code [3 marks]
– make sure your code is elegant
