**Brick Breaker**
       [Morgan McGuire](http://casual-effects.com)  
                       2015-07-15
   
<center>[Overview](#overview) - [Algorithms](#algorithms) - [State](#state) - [Actions](#actions)</center>


Overview
===================================================================
Breakout was a seminal arcade game for Atari designed by Nolan
Bushnell and Steve Bristow and implemented by Steve Wozniak aided by
Steve Jobs in hardware. This design master study replicates some of
the core mechanics of that game.

My goal is to implement the game in about 90 minutes in Javascript
using Codeheart.js.  I'll use the most straightforward simulation
algorithms including static collision detection and forward Euler
integration.



<a name="algorithms"></a>
Algorithms
===================================================================

Integration
-------------------------------------------------------------------
Velocity is the derivative of position with respect to time. So, a new
position is the integral of velocity over the simulation time step
(the initial condition is the old position). In the case of zero acceleration,
we can compute a position by Forward Euler
Integration as:

$$ p_1 = p_0 + \vec{v} \cdot \Delta t,$$

where $ \Delta t $ is the time interval. There are some drawbacks to this
scheme, especially when $ \Delta t $ or the magnitude of $ \vec{v} $ is too large. For a discussion, see:

  <http://web.mit.edu/10.001/Web/Course_Notes/Differential_Equations_Notes/node3.html>


Collisions
-------------------------------------------------------------------
The static collision detection and response ideas used in this game
are described at [Static Void Games](http://staticvoidgames.com/tutorials/intermediateConcepts/collisionDetection).

There are some serious drawbacks to the approached described there,
including tunneling through objects when the ball moves quickly and
incorrect collision normals at corners. 

However, the method is really simple to implement and avoids some
realistic-but-undesirable results such as changing the ball's angle to
something other than an integer multiple of 90 degrees from the
diagonal.


<a name="state"></a>
State
===================================================================

- game mode: title screen, waiting to launch the ball, playing, or game over
- what keys are currently pressed
- score
- ballsLeft
- brickArray[]
   - image
   - center
     - x
     - y
   - size
     - x 
     - y
   - sound to play when broken
   - points to assign when broken
- ball
   - image
   - center
     - x
     - y
   - size
     - x
     - y
   - velocity
     - x 
     - y
- paddle
   - image
   - center
     - x
     - y
   - size
     - x
     - y
   - velocity
     - x 
     - y
- starArray[]
   - center
     - x
     - y
   - size
     - x
     - y
   - velocity
     - y
   - angle
- sounds for:
  - hit wall
  - hit paddle
  - title theme
  - background music
  - launch ball
  - win
  - lose
 
Because of the similarity between structures, I define the concept of
an _entity_ as an object with center, size, velocity, image, and angle
properties. I will then define some helper procedures that operate on
an _entity_ instead of special-casing everything for each object type.

<a name="actions"></a>
Actions
===================================================================

- on a key press
  1. mark the key as down
  1. maybe change the game mode  
- on a key release: mark the key as up
- on clock tick
  - ball position += velocity * time
  - check for collisions with bricks and the wall
- on collision with a brick
  1. play a sound
  2. reflect the ball
  3. increase score
  4. remove the brick
  5. speed up the ball
- on last brick removed
  1. mode = game over
- on ball collision with top, left, or right wall:
  1. play a sound
  2. reflect ball velocity
- on ball collision with bottom wall:
  1. decrement numBalls
  2. play a sound
  3. if numBalls == 0: mode = game over

<!-- Markdeep: --><style class="fallback">body{white-space:pre;font-family:monospace}</style><script src="markdeep.min.js"></script><script src="http://casual-effects.com/markdeep/latest/markdeep.min.js"></script>