Breakout Game Using Pure Javascript - Step by step

based on / largely inspired by 2D breakout game using pure JavaScript (MDN - Mozilla Development Network)

  1. HTML5 Canvas element and CSS style
  2. Address canvas in a script and draw static ball
  3. Animate a ball on the canvas
  4. Paddle and Paddle controls
  5. Bounce on paddle, lives and Game Over
  6. Bricks
  7. Collisions with the bricks and score
  8. Mouse and Touch controls
  9. Smooth rendering with Animation Frame
  10. Free zone at the bottom for better Mobile Phone use

Other tests

Hosted on http://sheldon.privatedns.org/Breakout/Breakout-JS/index.html