multiplayer (on different devices) alpha
multiplayer (on different devices) alpha

file:a/index.js -> file:b/index.js
--- a/index.js
+++ b/index.js
@@ -29,16 +29,18 @@
             player = users.length;
             console.log ('connected players : ' + users.length);
             socket.emit('send:connected', {username: username, users:users.length});
-            io.emit('send:player', {username: username, index:users.indexOf(username)+1});
+            io.emit('send:player', {username: username, index:player});
             io.emit('send:connectedusers', {users:users.length});
-            if (users.length == 4) {
+            if (users.length == 2) {
                 io.emit('send:startgame');
                 console.log ('start game');
             }
         } else if (connected == 'game') {
             users = [];
             io.sockets.sockets.forEach(function(s) {
-                s.disconnect(true);
+                if (socket != s) {
+                    s.disconnect(true);
+                }
             });
         }
     });
@@ -52,8 +54,18 @@
     });
 
     socket.on('send:move', function(msg){
-        io.emit('send:move', {player : player, msg : msg});
-        //console.log ('moved player' + player);
+        //io.emit('send:move', {player : player, msg : msg});
+        socket.broadcast.emit('send:move', {player : player, msg : msg});
+    });
+
+    socket.on('send:moves', function(msg){
+        //var data = {player : msg.player, x:msg.x, y:msg.y};
+        socket.broadcast.emit('send:moves', msg);
+    });
+
+    socket.on('send:ball', function(msg){
+        //socket.broadcast.emit('send:ball', msg);
+        io.emit('send:moveball', msg);
     });
 });
 

--- a/public/index.html
+++ b/public/index.html
@@ -65,9 +65,27 @@
     });
     socket.on('send:player', function(player){
         playersData[player.index] = {username: player.username, score : 0};
+        currentPlayer = player.index;
     });
-    socket.on('users', function(msg){
-        console.log ('users : ' + msg);
+
+    // tmp
+    var data = {type:'player', username:'P' + Math.random(1, 10000)};
+    socket.emit('send:connect', data);
+
+    socket.on('send:moves', function(msg){
+        if (msg.player == 1) {
+            player1.move(msg.x, msg.y);
+        } else if (msg.player == 2) {
+            player2.move(msg.x, msg.y);
+        } else if (msg.player == 3) {
+            player3.move(msg.x, msg.y);
+        } else if (msg.player == 4) {
+            player4.move(msg.x, msg.y);
+        }
+    });
+
+    socket.on('send:moveball', function(msg){
+        ball.move(msg.x, msg.y);
     });
 </script>
 

--- a/public/js/pong.js
+++ b/public/js/pong.js
@@ -12,9 +12,9 @@
 var player2 = new Player2();
 var player3 = new Player3();
 var player4 = new Player4();
-//var wall = new Wall();
 var ball = new Ball(400, 400);
 
+var currentPlayer = 0;
 var playersData = {1:{},2:{},3:{},4:{}};
 var score = new Score();
 
@@ -39,7 +39,6 @@
     player2.render();
     player3.render();
     player4.render();
-    //wall.render();
 
     ball.render();
     score.display();
@@ -61,35 +60,33 @@
     animate(step);
 };
 
-function Paddle(x, y, width, height, orientation) {
+function Paddle(x, y, width, height, player) {
     this.x = x;
     this.y = y;
     this.width = width;
     this.height = height;
     this.x_speed = 0;
     this.y_speed = 0;
-    this.orientation = orientation;
-}
-
-Paddle.prototype.render = function (player) {
-    if (this.orientation == 'l') {
+    this.player = player;
+}
+
+Paddle.prototype.render = function () {
+    if (this.player == 1 || this.player == 2) {
         context.drawImage(graphics['paddleL'].instance, this.x, this.y);
     } else {
         context.drawImage(graphics['paddleP'].instance, this.x, this.y);
     }
 
-    //context.lineWidth=1;
     context.fillStyle="#fff";
-    //context.lineStyle="#ffff00";
     context.font="12px sans-serif";
     context.textAlign="center";
-    if (player == 1) {
+    if (this.player == 1) {
         context.fillText("P1", this.x+50, this.y+15);
-    } else if (player == 2) {
+    } else if (this.player == 2) {
         context.fillText("P2", this.x+50, this.y+15);
-    } else if (player == 3) {
+    } else if (this.player == 3) {
         context.fillText("P3", this.x+12, this.y+50);
-    } else if (player == 4) {
+    } else if (this.player == 4) {
         context.fillText("P4", this.x+12, this.y+50);
     }
 };
@@ -114,37 +111,26 @@
     }
 };
 
-function Block(x, y, width, height) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-    this.x_speed = 0;
-    this.y_speed = 0;
-}
-
-Block.prototype.render = function () {
-    context.fillStyle = "#5BA3E3";
-    context.fillRect(this.x, this.y, this.width, this.height);
-};
-
 function Player1() {
-    this.paddle = new Paddle(350, 765, 100, 25, 'l');
+    this.paddle = new Paddle(350, 765, 100, 25, 1);
 }
 
 Player1.prototype.render = function () {
-    this.paddle.render(1);
-};
-
-Player1.prototype.update = function (move) {
+    this.paddle.render();
+};
+
+Player1.prototype.update = function () {
     for (var key in keysDown) {
         var value = Number(key);
         if (value == 37) {
             this.paddle.move(-4, 0);
+            socket.emit('send:moves', {player : 1, x:-4, y:0});
         } else if (value == 39) {
             this.paddle.move(4, 0);
-        } else {
-            this.paddle.move(0, 0);
+            socket.emit('send:moves', {player : 1, x:4, y:0});
+        } else {
+            this.paddle.move(0, 0);
+            socket.emit('send:moves', {player : 1, x:0, y:0});
         }
     }
     var y = playersMove[1].y;
@@ -161,12 +147,16 @@
     //AI(this.paddle);
 };
 
+Player1.prototype.move = function (x, y) {
+    this.paddle.move(x, y);
+}
+
 function Player2() {
-    this.paddle = new Paddle(350, 10, 100, 25, 'l');
+    this.paddle = new Paddle(350, 10, 100, 25, 2);
 }
 
 Player2.prototype.render = function () {
-    this.paddle.render(2);
+    this.paddle.render();
 };
 
 Player2.prototype.update = function () {
@@ -174,10 +164,13 @@
         var value = Number(key);
         if (value == 90) {
             this.paddle.move(-4, 0);
+            socket.emit('send:moves', {player : 2, x:-4, y:0});
         } else if (value == 67) {
             this.paddle.move(4, 0);
-        } else {
-            this.paddle.move(0, 0);
+            socket.emit('send:moves', {player : 2, x:4, y:0});
+        } else {
+            this.paddle.move(0, 0);
+            socket.emit('send:moves', {player : 2, x:0, y:0});
         }
     }
     var y = playersMove[2].y;
@@ -194,12 +187,16 @@
     //AI(this.paddle);
 };
 
+Player2.prototype.move = function (x, y) {
+    this.paddle.move(x, y);
+}
+
 function Player3() {
-    this.paddle = new Paddle(10, 350, 25, 100, 'p');
+    this.paddle = new Paddle(10, 350, 25, 100, 3);
 }
 
 Player3.prototype.render = function () {
-    this.paddle.render(3);
+    this.paddle.render();
 };
 
 Player3.prototype.update = function () {
@@ -207,10 +204,13 @@
         var value = Number(key);
         if (value == 38) {
             this.paddle.move(0, -4);
+            socket.emit('send:moves', {player : 3, x:0, y:-4});
         } else if (value == 40) {
             this.paddle.move(0, 4);
-        } else {
-            this.paddle.move(0, 0);
+            socket.emit('send:moves', {player : 3, x:0, y:4});
+        } else {
+            this.paddle.move(0, 0);
+            socket.emit('send:moves', {player : 3, x:0, y:0});
         }
     }
     var y = playersMove[3].y;
@@ -227,12 +227,16 @@
     //AI2(this.paddle);
 };
 
+Player3.prototype.move = function (x, y) {
+    this.paddle.move(x, y);
+}
+
 function Player4() {
-    this.paddle = new Paddle(765, 350, 25, 100, 'p');
+    this.paddle = new Paddle(765, 350, 25, 100, 4);
 }
 
 Player4.prototype.render = function () {
-    this.paddle.render(4);
+    this.paddle.render();
 };
 
 Player4.prototype.update = function () {
@@ -240,10 +244,13 @@
         var value = Number(key);
         if (value == 83) {
             this.paddle.move(0, -4);
+            socket.emit('send:moves', {player : 4, x:0, y:-4});
         } else if (value == 88) {
             this.paddle.move(0, 4);
-        } else {
-            this.paddle.move(0, 0);
+            socket.emit('send:moves', {player : 4, x:0, y:4});
+        } else {
+            this.paddle.move(0, 0);
+            socket.emit('send:moves', {player : 4, x:0, y:0});
         }
     }
     var y = playersMove[4].y;
@@ -259,6 +266,10 @@
     }
     //AI2(this.paddle);
 };
+
+Player4.prototype.move = function (x, y) {
+    this.paddle.move(x, y);
+}
 
 function Score() {
     playersData[1] = {username: 'None', score : 0};
@@ -288,14 +299,6 @@
     }
 }
 
-function Wall() {
-    this.wall = new Block(0, 560, 500, 10);
-}
-
-Wall.prototype.render = function () {
-    this.wall.render();
-};
-
 function Ball(x, y) {
     this.x = x;
     this.y = y;
@@ -311,14 +314,13 @@
     //context.stroke();
 };
 
-Ball.prototype.update = function (paddle1, paddle2, paddle3, paddle4, wall) {
+Ball.prototype.update = function (paddle1, paddle2, paddle3, paddle4) {
     this.x += this.x_speed;
     this.y += this.y_speed;
     var top_x = this.x - 5;
     var top_y = this.y - 5;
     var bottom_x = this.x + 5;
     var bottom_y = this.y + 5;
-
 
     if (this.x - 5 < 0) {
         this.x = 5;
@@ -351,14 +353,13 @@
         this.y = 300;
     }
 
-    if (top_y > 700) {
+    if (top_y > 750) {
         if (top_y < (paddle1.y + paddle1.height) && bottom_y > paddle1.y && top_x < (paddle1.x + paddle1.width) && bottom_x > paddle1.x) {
-
             this.y_speed = -SpeedX();
             this.x_speed += (paddle1.x_speed / 2);
             this.y += this.y_speed;
         }
-    } else if (top_y < 100) {
+    } else if (top_y < 50) {
         if (top_y < (paddle2.y + paddle2.height) && bottom_y > paddle2.y && top_x < (paddle2.x + paddle2.width) && bottom_x > paddle2.x) {
             this.y_speed = SpeedY();
             this.x_speed += (paddle2.x_speed / 2);
@@ -366,20 +367,26 @@
         }
     }
 
-    if (top_x < 400) {
+    if (top_x < 50) {
         if (top_y < (paddle3.y + paddle3.height) && bottom_y > paddle3.y && top_x < (paddle3.x + paddle3.width) && bottom_x > paddle3.x) {
             this.x_speed = SpeedX();
             this.y_speed += (paddle3.y_speed / 2);
             this.y += this.y_speed;
         }
-    } else {
+    } else if (top_x > 750) {
         if (top_y < (paddle4.y + paddle4.height) && bottom_y > paddle4.y && top_x < (paddle4.x + paddle4.width) && bottom_x > paddle4.x) {
             this.x_speed = -SpeedX();
             this.y_speed += (paddle4.y_speed / 2);
             this.y += this.y_speed;
         }
     }
-};
+    socket.emit('send:ball', {x:this.x, y:this.y});
+};
+
+Ball.prototype.move = function (x, y) {
+    this.x = x;
+    this.y = y;
+}
 
 function SpeedX()
 {
@@ -433,10 +440,12 @@
 animate(step);
 
 window.addEventListener("keydown", function (event) {
+    event.preventDefault();
     keysDown[event.keyCode] = true;
 });
 
 window.addEventListener("keyup", function (event) {
+    event.preventDefault();
     delete keysDown[event.keyCode];
 });
 

comments