create collision class

public/ClientBall.js

@@ -9,9 +9,11 @@ function ClientBall($el) {
 
     var attributes = {
         el: $el,
-        x: 0,
-        y: 0,
+        x: 100,
+        y: 100,
         z: 0,// :)
+        vx: -1.5 + Math.random()*3,
+        vy: 5 * Math.random()*1.5,
         speed: 10,
         width: 20,
         height: 20
@@ -21,21 +23,37 @@ function ClientBall($el) {
         init: function () {
 
         },
-        collides: function () {
-
+        getAxis: function(){
+            return {
+                x:attributes.x,
+                y:attributes.y
+            };
+        },
+        getVectors: function(){
+            return {
+                vx:attributes.vx,
+                vy:attributes.vy
+            };
         },
         setAxis: function (x, y) {
             attributes.x = x;
             attributes.y = y;
         },
+        setVectors: function (vx, vy) {
+            attributes.vx = vx;
+            attributes.vy = vy;
+        },
         redraw: function () {
+            attributes.x += attributes.vx;
+            attributes.y += attributes.vy;
+
             attributes.el.css('top', attributes.y);
             attributes.el.css('left', attributes.x);
         },
         create: function () {
             attributes.el.css({
                 'width': attributes.width,
-                'height': attributes.height,
+                'height': attributes.height
             });
             this.redraw();
 

public/ClientCollision.js

+/**
+ * ClientCollision
+ * @param Playground
+ * @param Ball
+ * @returns {{collision: Function}}
+ * @constructor
+ */
+
+function ClientCollision(Playground, Ball){
+
+    var attributes = {
+        'ball': Ball,
+        'playground': Playground
+    };
+
+    return {
+        collision: function(){
+            var ballAxis = attributes.ball.getAxis();
+            var ballVectors = attributes.ball.getVectors();
+
+            var playgroundDimension = attributes.playground.getDimension();
+
+            if(ballAxis.y > playgroundDimension.h) {
+                ballAxis.y = playgroundDimension.h;
+                attributes.ball.setAxis(ballAxis.x, ballAxis.y);
+            }
+
+            else if(ballAxis.y < 0) {
+                ballAxis.y = 0;
+            }
+
+            // If ball strikes the vertical walls, invert the
+            // x-velocity vector of ball
+            if(ballAxis.x > playgroundDimension.w) {
+                ballVectors.vx = -ballVectors.vx;
+                ballAxis.x = playgroundDimension.w;
+            }
+
+            else if(ballAxis.x < 0) {
+                ballVectors.vx = -ballVectors.vx;
+                ballAxis.x = 0;
+            }
+
+            attributes.ball.setAxis(ballAxis.x,ballAxis.y);
+            attributes.ball.setVectors(ballVectors.vx, ballVectors.vy);
+
+        }
+    }
+}

public/ClientMain.js

 $(function () {
 
+    window.requestAnimFrame = (function(){
+        return  window.requestAnimationFrame       ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame    ||
+        window.oRequestAnimationFrame      ||
+        window.msRequestAnimationFrame     ||
+        function( callback ){
+            return window.setTimeout(callback, 1000 / 60);
+        };
+    })();
+
     // Initialize varibles
     var $window = $(window);
 
@@ -10,8 +21,18 @@ $(function () {
 
     var score = new ClientScore( $('.score') );
     var ball = new ClientBall( $('#ball') );
+
+    ball.setAxis(100,100);
+
+    var clientPlayground = new ClientPlayground( $("#playground"));
+    clientPlayground.init();
+
+    var collision = new ClientCollision( clientPlayground, ball);
+
+
     ball.create();
 
+
     // Prompt for setting a username
     var user = new ClientPlayer($('.pages'));
     user.setLoginCallback(function () {
@@ -29,11 +50,13 @@ $(function () {
 
     var socket = io();
 
-    $(document).mousemove(function (event) {
+    var $playground = $("#playground");
+    $playground.mousemove(function (event) {
+
         var d = {
             id: user.getId(),
-            x: event.pageX,
-            y: event.pageY
+            x: event.pageX - $playground.offset().left,
+            y: event.pageY - $playground.offset().top
         };
         drawRacket(d)
         socket.emit('move racket', d);
@@ -45,6 +68,14 @@ $(function () {
         log.add("Joined: " + data.numUsers);
         log.add("Your name: " + data.username);
         user.setId(data.id);
+
+        function animloop() {
+            init = requestAnimFrame(animloop);
+            ball.redraw();
+            collision.collision();
+        }
+
+        animloop();
     });
 
     socket.on('show racket', function (data) {
@@ -62,7 +93,7 @@ $(function () {
     });
 
     function drawRacket(data) {
-        $('div.racket' + data.id).css({left: data.x + 20, top: data.y + 20});
+        $('div.racket' + data.id).css({left: data.x, top: data.y});
     }
 
     $('.logout').click(function () {

public/ClientPlayground.js

+
+
+function ClientPlayground(el){
+
+    var attributes = {
+        'el': el,
+        w: 0,
+        h: 0
+    };
+
+    return {
+        init: function(){
+            attributes.w = attributes.el.width();
+            attributes.h = attributes.el.height();
+        },
+
+        getDimension: function(){
+            return {
+                w:attributes.w,
+                h:attributes.h
+            }
+        }
+    }
+}

public/index.html

@@ -74,6 +74,8 @@
 
 <script src="/socket.io/socket.io.js"></script>
 <script src="/ClientScore.js"></script>
+<script src="/ClientCollision.js"></script>
+<script src="/ClientPlayground.js"></script>
 <script src="/ClientBall.js"></script>
 <script src="/ClientPlayer.js"></script>
 <script src="/Log.js"></script>

public/style_boot.css

@@ -106,6 +106,7 @@ body {
     position: absolute;
     top:100px;
     left: 100px;
+    z-index: 1;
 }
 
 .score{
@@ -125,5 +126,5 @@ body {
     top:100px;
     left: 100px;
     background: url(images/ball.png) no-repeat;
-    border: 1px solid red;
+    z-index: 2;
 }
\ No newline at end of file