Week 2 - Friday: Monster Catch

Today we'll use the canvas to build another HTML5 game.

The architecture behind how games are built inspired React which we'll be learning in a few weeks. One amazing thing about computer science is how many problems can be solved in similar ways.

What You'll Learn

Canvas
Game loops logic : start game, game over, restart game
Create, Update , Render LifeCycles of a web app

Examples

Required Features

[ ] As a player, I can press down on the up, down, left, and right keys to move my hero across the canvas.
[ ] As a player, if I move the hero off the canvas to the right, the hero appears on the left.
[ ] As a player, if I move the hero off the canvas to the left, the hero appears on the right.
[ ] As a player, if I move the hero off the canvas to the top, the hero appears on the bottom.
[ ] As a player, if I move the hero off the canvas to the bottom, the hero appears on the top.
[ ] As a player, if I catch a monster then the monster is randomly placed on the screen.
[ ] As a player, I see my score update when I catch a monster.
[ ] As a player, I can see an input.
[ ] As a player, I can put my name into the input and then submit it to see my name on the screen.
[ ] As a player, I have 15 seconds to catch as many monsters as I can.
[ ] As a player, if the timer runs out I cannot move my hero anymore.
[ ] As a player, if the timer runs out I can see a reset button.
[ ] As a player, if the timer runs out I can press the reset button and start the game over.
[ ] As a player, if my score is higher than the previous high score then my score replaces it.
[ ] As a player, I can see the history of last scores.

Define function which takes an argument, axis, and returns a random number between 0 and that axises length.

function randomlyPlace(axis) {
  if (axis === "x") {
    return Math.floor(Math.random() * canvas.width + 1);
  } else {
    return Math.floor(Math.random() * canvas.height + 1);
  }
}

Randomly place the monster when caught.

monster.x = randomlyPlace("x");
monster.y = randomlyPlace("y");

Refactor code to be more explicit/meaningful using a new variable monsterCaughtByHero.

Your technical lead is good but he could have been better. Name the expected behavior of the expression for the benefit of future developers.

const monsterCaughtByHero =
  hero.x <= monster.x + 32 &&
  monster.x <= hero.x + 32 &&
  hero.y <= monster.y + 32 &&
  monster.y <= hero.y + 32;
if (monsterCaughtByHero) {
  monster.x = randomlyPlace("x");
  monster.y = randomlyPlace("y");
}

Our webapp/game has state. Is the user signed in? How many monsters did the hero catch? Where is the hero? And much more...

We can easily structure this state using an object.

const applicationState = {
  isGameOver: false,
  currentUser: "PrimeTimeTran",
  highScore: {
    score: 22,
    user: "PrimeTimeTran",
    date: "Thu Oct 02 2019 15:11:51 GMT+0700",
  },
  gameHistory: [
    { user: "Duc", score: 19, date: "Thu Sep 03 2019 15:11:51 GMT+0700" },
    { user: "Huy", score: 18, date: "Thu Oct 03 2019 15:11:51 GMT+0700" },
    { user: "Chloe", score: 21, date: "Thu Oct 01 2019 15:11:51 GMT-6000" },
  ],
};

Add a new variable, applicationState, to the top of game.js.

const applicationState = {
  isGameOver: false,
  currentUser: null,
  highScore: {
    score: 0,
    user: null,
    date: null,
  },
  gameHistory: [{ user: null, score: 0, date: null }],
};

Contemplate the keys and properties of this freebie object and when/how you could use them to help build/structure your app.
Manipulate the applicationState variable in the code where appropriate to implement required features.

Positive : Use localStorage to persist scores across browser refreshes.

[ ] As a player, I start the game with 5 lives.
[ ] As a player, I increase the number of lives by 1 when I catch a monster.
[ ] As a player, I increase the time I have to catch monsters by 1 when I catch a monster.
[ ] As a player, I can see 6 monsters instead of 3.
[ ] As a player, half of the monsters I catch will take away lives/points(1) from me when I catch them.
[ ] As a player, if I run out of lives then the game is over regardless of the timer.
[ ] As a player, I can pick up potions which make me move faster.
[ ] As a player, I can pick up potions which make my catches x2.

Deploy

Make a github repo

|- week2-friday-game/
  |-- ...
  |-- ...

Deploy this to Netlify too

What You'll Learn

Examples

Links

Required Features

Deploy