The purpose of the game is to avoid obstacles and reach the highest possible score.

The game screen is a line with moving square obstacles.

The player is represented by a block that flips side of the game line every time a click event is detected. The player can use any key to switch side.

The game is over when a collition is detected between the player and an obstacle.

Extra: As the game goes on, the screen changes colors and sometimes the whole canvas starts to rotate.

Html5 Canvas and Vanilla Javascript

• Start Screen

  • Title
  • Play button

• Game Screen

  • Canvas

• Game Over Screen

  • Play again button
  • Go to start screen button

• Create line
• Create player on line
• Move player
  • Click on any button to move player over or under the line.
• Create obstacles over and under the line
• Check collision
• If collision -> Game Over -> Show Game Over Screen

• Run counter and store score on game over

• Create High Score Screen
• Show latest score on Start Screen
• Add high score button to Start Screen

• Add background music to game
• Add music on and off button to Start screen.

• Create Color Screen
  • Let user choose color of player with color buttons
• Add Choose color button to Start Screen
• Change color of player when playing

• Check score and increase level.

main.js

createStartScreen(id);
createGameScreen(id);
createGameOverScreen(id);

destroyStartScreen();
destroyGameScreen();
destroyGameOverScreen();

var game = new Game({
    this.rows,
    this.columns,
    ctx: ctx,
    backgroundcolor = ['xxx','xxx','xxx'],
    this.obstacles,
    this.player
  });

game.init();

Game.js

function Game(options){};
Game.drawBoard();
Game.drawPlayer();
Game.generateObstacles();
Game.gameOver();
Game.init();

garbageCollector;

Player.js

function Player(){
  this.width;
  this.height;
  this.color;
};
Player.move();

Obstacle.js

function Obstacle(){
  this.width;
  this.height;
};
moveForward();

Iron flip run Trello

Github