/breakout-game

FEW-1-2_breakout

Created using this tutorial:

https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

Instructions

Use your Left and Right arrow keys to control the paddle. If you prefer to use a mouse cursor, that option is available to you.

Details

For Make School's Backend Web 1.2 course.

Objects in the game:

  • Heads up display
  • Game Board
  • Bricks
  • Ball
  • Paddle

Class Deconstruction

Game Object

  • canvas
    • element: References the HTML Canvas Element
    • context: References the 2D-JS Canvas Context
  • state
    • score: Attain the highest score you can
    • lives: If this reaches zero, game over
  • Mobile Objects: Visible entities that move and interact
  • Static Objects: Visible entities that are overlay-only
  • Fields of Effects: Invisible areas that trigger mobile objects

Mobile Objects

  • Ball: This thing bounces around and destroys bricks on hit.
  • Brick: This thing gives you points when its destroyed.
  • Paddle: This thing bounces the ball.

Static Objects

  • HUD
  • Pause Overlay

Fields of Effects

  • Generic Wall Field: Stops objects from passing + bounces
  • Bottom Wall Field: As above, but also destroys balls on hit.