Breakout

HTML

<div id="board">
    <div id="bricks">
        <div class="brick-row red">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="brick-row orange">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="brick-row brown">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="brick-row yellow">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="brick-row green">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="brick-row blue">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>
    <div id="ball"></div>
    <div id="paddle"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    cursor: none;
}
#board {
    background-color: #1A1A1A;
    height: 600px;
    width: 600px;
}
#bricks {
    width: 428px;
    margin: 0 auto;
    padding-top: 50px;
}
#bricks .brick-row span {
    display: inline-block;
    width: 50px;
    height: 10px;
    margin-right: 3px;
}
#bricks .brick-row.red span {
    background-color: #FF1717;
}
#bricks .brick-row.orange span {
    background-color: #C66C3A;
}
#bricks .brick-row.brown span {
    background-color: #B47A30;
}
#bricks .brick-row.yellow span {
    background-color: #A2A22A;
}
#bricks .brick-row.green span {
    background-color: #48A048;
}
#bricks .brick-row.blue span {
    background-color: #4248C8;
}
#ball {
    height: 7px;
    width: 7px;
    background-color: white;
    position: absolute;
    left: 294px;
    top: 360px;
}
#paddle {
    height: 10px;
    width: 50px;
    background-color: #0088FF;
    position: absolute;
    top: 580px;
    left: 0px;
}

JavaScript

var LEFT = 37;
var RIGHT = 39;
var A = 97;
var S = 115;
var PADDLE_MOVE = 25;

$(document).keypress(function(e){
    var paddle = $("#paddle");
    console.log("e", e);
    if (e.keyCode == A)  {
        //console.log("left");
        var leftVal = $("#paddle").css("left");
        leftVal = leftVal.substring(0, leftVal.indexOf("px"));
        if (leftVal < 25) {
            return;
        }
        //console.log(parseInt(leftVal) - PADDLE_MOVE);
        $("#paddle").css("left", parseInt(leftVal) - PADDLE_MOVE + "px");
    } else if (e.keyCode == S)  {
        //console.log("Right!");
        var leftVal = $("#paddle").css("left");
        leftVal = leftVal.substring(0, leftVal.indexOf("px"));
        if (leftVal > 525) {
            return;
        }
        //console.log(parseInt(leftVal) + PADDLE_MOVE);
        $("#paddle").css("left", parseInt(leftVal) + PADDLE_MOVE + "px");
    }
});

$(document).mousemove(function( event ) {
  var msg = "Handler for .mousemove() called at ";
  var x = event.pageX;
    //console.log("x", x);
  if (x > 550 || x < 0) {
      return;
  }
  $("#paddle").css("left", event.pageX + "px");
});