Breakout Game – Brick field and Collision detection

In this lesson, students will learn:

  • How to render bricks, using a nested loop that works through a two-dimensional array
  • How to add a collision detection so it can bounce off the bricks and break them



Loops can execute a block of code a number of times. Loops are handy, if you want to run the same code over and over again, each time with a different value. There are a few different kinds of loops you can create in JavaScript but the most common is the for loop.

The For Loop: It lets you repeat a section of code “for any number of times”.


Statement 1: Creates a variable called i (“index”), which is initialized to 0.

Statement 2 defines the condition statement. How many times it should repeat “while the index variable is less than 5.” It starts at 0: 0, 1, 2, 3, 4.

Statement 3 increases the index value by 1 each time the loop runs:  i++


How for Loops Work

Build the brick field
Collision Detection