README.md

CODE ALONG TEAM ACTIVITY 🎉

Steps of the Canvas Loop

Fot this exercise you may use one or multiple laptops while completing the exercise. You will not write any code in this activity, but instead you will be writting comments.

Task Description:

• Group should fill up the empty space on the numbered comments, for each step using only words (no code needed).

• Group should work together and come up with the order of things (sub steps) that need to be done, during each step.

• The purpose of ordering the steps correctly is to ensure that old elements are cleared from canvas and new updated player and enemies are rendered on each loop call.

• In the game.js file below, fill the empty numbered tasks in each step with comments:

// STEP 1. UPDATE THE STATE OF PLAYER AND ENEMIES

    // 1. Create new enemies randomly.

    // 2. ...

    // 3. ...

Hints:

1. Think of what operation should be done first, what should be done second and so on, to ensure that the state of the player and enemies are updated. Step 1 first sub step solution is already given ( Create new enemies randomly.), you can start from there.

2. As STEP 2. CLEAR THE CANVAS is self explanatory, write what Canvas (ctx) method should be called to clear the canvas before the new render, to ensure that old elements on the canvas are cleared.

3. Write what methods that we already created should be be called to render/draw the updated player and enemies to the canvas.

4. Step 4 is already finished for you, however in here your task is to remember for the future that every loop should have an end condition, to prevent infinite loops. 🙈

game.js

Game.prototype.startLoop = function() {
  var loop = function() {
    
// STEP 1. UPDATE THE STATE OF PLAYER AND ENEMIES

    // 1. 

    // 2. 

    // 3. 

    // 4. 

    // 5. 


// STEP 2. CLEAR THE CANVAS
    // 1. 


// STEP 3. UPDATE THE CANVAS
    // 1. 

    // 2. 

    
// STEP 4. TERMINATE LOOP IF THE GAME IS OVER
    
    if (!this.gameIsOver) {
      window.requestAnimationFrame(loop);
    }
  }.bind(this);

  // As loop function will be continuously invoked by
  // the `window` object- `window.requestAnimationFrame(loop)`
  // we have to bind the function so that value of `this` is
  // pointing to the `game` object, like this:
  // var loop = (function(){}).bind(this);

  window.requestAnimationFrame(loop);
};