Gamedev Canvas Workshop - Custom

Modified version of lesson game.

by MegaScience

HTML

<script src="https://cdn.rawgit.com/paulirish/1579671/raw/682e5c880c92b445650c4880a6bf9f3897ec1c5b/rAF.js"></script>
<!--<canvas id="myCanvas" width="480" height="320"></canvas>
<input id="fgcolor" type="color" />-->

CSS

canvas,
div {
  display: block;
  margin: 0 auto;
}

div {
  margin-top: 5px;
}

input {
  box-sizing: border-box;
}

canvas {
  //background-color: #eee;
}

JavaScript

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

var gameData = {
  foregroundColor: "#0095DD",
  backgroundColor: "#eeeeee",
  gWindow: {
    width: 480,
    height: 320,
  },
  ballRadius: 10,
  paddle: {
    height: 10,
    width: 75
  },
  brick: {
    rowCount: 5,
    columnCount: 3,
    width: 75,
    height: 20,
    padding: 10,
    offset: {
      top: 30,
      left: 30
    }
  },
  gameCycle: null,
  pause: true,
  scrollAdjust: 1.25,
  init: function() {
    this.canvas = document.createElement("canvas");
    this.gWindow.hWidth = this.gWindow.width / 2;
    this.gWindow.hHeight = this.gWindow.height / 2;
    this.paddle.hWidth = this.paddle.width / 2;
    this.canvas.setAttribute("width", this.gWindow.width);
    this.canvas.setAttribute("height", this.gWindow.height);
    this.canvas.addEventListener("click", this.clickHandler.bind(this));
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");
    this.ctx.font = "16px Arial";
    this.inputs = document.createElement("div");
    this.inputs.style.width = this.gWindow.width + "px";
    //for (var i = 0, props = ["foreground", "background"], len = props.length, input; i < len; i++) {
    //  input = props[i] + "Input";
    //  this[input] = document.createElement("input");
    //  this[input].type = "color";
    //  this[input].style.width = this.gWindow.hWidth + "px";
    //  this[input].addEventListener("input", this.colorHandler);
    //  this[input].defaultValue = this[props[i] + "Color"];
    //  this.inputs.appendChild(this[input]);
    //}
    ["foreground", "background"].forEach(type => {
      input = type + "Input";
      this[input] = document.createElement("input");
      this[input].type = "color";
      this[input].style.width = this.gWindow.hWidth + "px";
      this[input].addEventListener("input", this.colorHandler);
      this[input].defaultValue = this[type + "Color"];
     ...