diff --git a/mdn-breakout/index.html b/mdn-breakout/index.html
index 3e0058f..8be959f 100644
--- a/mdn-breakout/index.html
+++ b/mdn-breakout/index.html
@@ -11,29 +11,55 @@ canvas { background: #eee; display: block; margin: 0 auto; }
   <body>
     <canvas id="myCanvas" width="480" height="320"></canvas>
     <script>
-var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
-var x = canvas.width/2;
-var y = canvas.height-30;
-var dx = 2;
-var dy = -2;
+(function() {
+  var canvas = document.getElementById("myCanvas");
+  var ctx = canvas.getContext("2d");
+  var ballRadius = 10;
+  var ballColor = '#0095DD';
+  var x = canvas.width/2;
+  var y = canvas.height-30;
+  var dx = 2;
+  var dy = -2;
 
-function drawBall() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
+  function randInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
 
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  drawBall();
-  x += dx;
-  y += dy;
-}
+  function randColor() {
+    return 'rgba(' + ([
+      randInt(0, 255),
+      randInt(0, 255),
+      randInt(0, 255)
+    ].map(function(elem, i) { return '' + elem; }).join(',')) + ', 1.0)'
+  }
 
-setInterval(draw, 10);
+  function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+    ctx.fillStyle = ballColor;
+    ctx.fill();
+    ctx.closePath();
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+      dy = -dy;
+      ballColor = randColor();
+    }
+    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+      dx = -dx;
+      ballColor = randColor();
+    }
+  }
+
+  setInterval(draw, 10);
+})();
     </script>
   </body>
 </html>
