multiplayer client ball sync
multiplayer client ball sync

file:a/.gitignore -> file:b/.gitignore
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 bower_components
+dist
 

file:a/index.js -> file:b/index.js
--- a/index.js
+++ b/index.js
@@ -11,9 +11,10 @@
 });
 
 app.use(express.static(__dirname + '/public'));
-app.use(express.static(__dirname + '/bower_components'));
+app.use(express.static(__dirname + '/dist'));
 
-var users = [];
+var users = {};
+var ball = {};
 
 io.on('connection', function(socket){
     var connected, player, username;
@@ -24,32 +25,43 @@
     socket.on('send:connect', function(data){
         connected = data.type;
         username = data.username;
-        if (connected == 'player' && users.length <= 4) {
-            users.push(username);
-            player = users.length;
-            console.log ('connected players : ' + users.length);
-            socket.emit('send:connected', {username: username, users:users.length});
+        connectedUsers = Object.keys(users).length;
+        if (connected == 'player' && connectedUsers <= 4) {
+            for(i=1;i<=4;i++) {
+                if (typeof(users[i]) == "undefined") {
+                    users[i] = {};
+                    users[i].player = i;
+                    users[i].username = username;
+                    player = i;
+                    break;
+                }
+            }
+            console.log(Object.keys(users));
+            connectedUsers = Object.keys(users).length;
+            console.log ('player ' + username + ' (' + player + ') connected');
+            console.log ('\ttotal connected players : ' + connectedUsers);
+            socket.emit('send:connected', {username: username, users:connectedUsers, index:player});
             io.emit('send:player', {username: username, index:player});
-            io.emit('send:connectedusers', {users:users.length});
-            if (users.length == 2) {
-                io.emit('send:startgame');
-                console.log ('start game');
+
+            io.emit('send:connectedusers', {users:connectedUsers});
+            if (connectedUsers == 2) {
+                setTimeout(function(){
+                    io.emit('send:startgame');
+                    console.log ('start game');
+                }, 5000);
             }
         } else if (connected == 'game') {
-            users = [];
+            /*users = {};
             io.sockets.sockets.forEach(function(s) {
-                if (socket != s) {
-                    s.disconnect(true);
-                }
-            });
+                s.disconnect(true);
+            });*/
         }
     });
     socket.on('disconnect', function () {
         if (connected == 'player') {
-            var index = users.indexOf(username);
-            users.splice(index, 1);
-            console.log ('disconnected player : ' + username);
-            io.emit('send:disconected', {user: username, users:users.length});
+            delete users[player];
+            console.log ('disconnected player (' + player + ') : ' + username);
+            io.emit('send:disconected', {user: username, users:connectedUsers});
         }
     });
 
@@ -63,9 +75,12 @@
         socket.broadcast.emit('send:moves', msg);
     });
 
-    socket.on('send:ball', function(msg){
-        //socket.broadcast.emit('send:ball', msg);
-        io.emit('send:moveball', msg);
+    socket.on('send:syncball', function(msg){
+        socket.broadcast.emit('send:syncball', msg);
+    });
+
+    socket.on('send:hitball', function(msg){
+        io.emit('send:hitball', msg);
     });
 });
 

--- a/public/index.html
+++ b/public/index.html
@@ -5,13 +5,8 @@
 <meta content='IE=edge' http-equiv='X-UA-Compatible'>
 <meta content='width=device-width,initial-scale=1' name='viewport'>
 <title>Pong 4</title>
-<script type="text/javascript" src="/jquery/dist/jquery.min.js"></script>
-<script type="text/javascript" src="/socket.io-client/socket.io.js"></script>
-<script type="text/javascript" src="/js/pong.js"></script>
-<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
-<link rel="stylesheet" href="/css/pong.css">
-<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
-
+<script type="text/javascript" src="/js/pong-4-players.min.js"></script>
+<link rel="stylesheet" href="/css/pong-4-players.min.css">
 </head>
 <body>
 
@@ -40,6 +35,7 @@
             <p class="score lead"></p>
             <p>Scan to play</p>
             <p class="play"></p>
+            <p class="player"></p>
         </div>
     </div>
 </div><!-- /.container -->
@@ -54,18 +50,21 @@
     socket.on('send:connect', function(msg){
         console.log (msg);
     });
+    socket.on('send:connected', function(player){
+        $('.player').append(player.username + ' = ' + player.index);
+        currentPlayer = player.index;
+    });
+
+    // mobile
     socket.on('send:move', function(msg){
         playersMove[msg.player] = msg.msg;
-        //console.log (msg);
     });
     socket.on('send:startgame', function(msg){
-        setTimeout(function(){
-            startGame = true;
-        }, 5000);
+        startGame = true;
     });
     socket.on('send:player', function(player){
         playersData[player.index] = {username: player.username, score : 0};
-        currentPlayer = player.index;
+        $('.player').append(player.username + ' = ' + player.index);
     });
 
     // tmp
@@ -84,8 +83,16 @@
         }
     });
 
-    socket.on('send:moveball', function(msg){
-        ball.move(msg.x, msg.y);
+    socket.on('send:syncball', function(msg){
+        ball.sync(msg.x, msg.y);
+    });
+
+    socket.on('send:hitball', function(msg){
+        ball.hit(msg.x_speed, msg.y_speed);
+    });
+
+    socket.on('disconnect', function(){
+        playersData[player.index].bot = true;
     });
 </script>
 

--- a/public/js/pong.js
+++ b/public/js/pong.js
@@ -21,6 +21,7 @@
 var keysDown = {};
 var playersMove = {1:{},2:{},3:{},4:{}};
 var offset = {1:0,2:0,3:0,4:0};
+var rand = 0;
 
 var graphics = {
     ball: {src: '/img/ball.png', instance: null},
@@ -144,7 +145,9 @@
             this.paddle.move(0, 0);
         }
     }
-    //AI(this.paddle);
+    if (playersData[1].bot == true) {
+        AI(this.paddle);
+    }
 };
 
 Player1.prototype.move = function (x, y) {
@@ -184,7 +187,9 @@
             this.paddle.move(0, 0);
         }
     }
-    //AI(this.paddle);
+    if (playersData[2].bot == true) {
+        AI(this.paddle);
+    }
 };
 
 Player2.prototype.move = function (x, y) {
@@ -224,7 +229,9 @@
             this.paddle.move(0, 0);
         }
     }
-    //AI2(this.paddle);
+    //if (playersData[3].bot == true) {
+        AI2(this.paddle);
+    //}
 };
 
 Player3.prototype.move = function (x, y) {
@@ -264,7 +271,9 @@
             this.paddle.move(0, 0);
         }
     }
-    //AI2(this.paddle);
+    //if (playersData[4].bot == true) {
+        AI2(this.paddle);
+    //}
 };
 
 Player4.prototype.move = function (x, y) {
@@ -279,16 +288,7 @@
 }
 
 Score.prototype.increase = function (player) {
-    if (player == 1) {
-        playersData[1].score++;
-    } else if (player == 2) {
-        playersData[2].score++;
-    } else if (player == 3) {
-        playersData[3].score++;
-    } else if (player == 4) {
-        playersData[4].score++;
-    }
-    //console.log (this);
+    playersData[player].score++;
     this.display();
 };
 
@@ -300,28 +300,30 @@
 }
 
 function Ball(x, y) {
-    this.x = x;
-    this.y = y;
-    this.x_speed = 0; //SpeedX();
-    this.y_speed = 3; //SpeedY();
+    this.width = 20;
+    this.height = 20;
+    this.x = x - 10;
+    this.y = y - 10;
+    this.x_speed = 3;
+    this.y_speed = 0;
 }
 
 Ball.prototype.render = function () {
-    context.drawImage(graphics['ball'].instance, this.x-10, this.y-10);
-    context.beginPath();
-    context.arc(this.x, this.y, 10, 2 * Math.PI, false);
-    //context.strokeStyle = 'black';
-    //context.stroke();
-};
-
+    context.drawImage(graphics['ball'].instance, this.x, this.y);
+    //context.beginPath();
+    //context.arc(this.x, this.y, 10, 2 * Math.PI, false);
+};
+
+var run = true;
 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;
-
+    var top_x = this.x - 10;
+    var top_y = this.y - 10;
+    var bottom_x = this.x + 10;
+    var bottom_y = this.y + 10;
+
+    // vertical walls
     if (this.x - 5 < 0) {
         this.x = 5;
         this.x_speed = -this.x_speed;
@@ -341,6 +343,7 @@
         this.y_speed = SpeedY();
         this.x = 400;
         this.y = 300;
+        var rand = 0;
     } else if (this.x < 0 || this.x > 800) {
         if (this.x < 0) {
             score.increase(3);
@@ -351,52 +354,73 @@
         this.y_speed = SpeedY();
         this.x = 400;
         this.y = 300;
-    }
-
-    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 < 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);
-            this.y += this.y_speed;
-        }
-    }
-
-    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 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) {
+        var rand = 0;
+    }
+
+    if (top_y > 700) {
+        if (this.checkCollision(this, paddle1)) {
+            //if (currentPlayer == 1) {
+                socket.emit('send:hitball', {x_speed:(paddle1.x_speed / 1.5) + randMove(), y_speed:-SpeedY()});
+            //}
+        }
+    } else if (top_y < 100) {
+        if (this.checkCollision(this, paddle2)) {
+            //if (currentPlayer == 2) {
+                socket.emit('send:hitball', {x_speed:(paddle2.x_speed / 1.5) + randMove(), y_speed:SpeedY()});
+            //}
+        }
+    }
+
+    if (top_x < 100) {
+        if (this.checkCollision(this, paddle3)) {
+            //if (currentPlayer == 3) {
+                socket.emit('send:hitball', {x_speed:SpeedX(), y_speed:(paddle3.y_speed / 1.5) + randMove()});
+            //}
+        }
+    } else if (top_x > 700) {
+        if (this.checkCollision(this, paddle4)) {
+            socket.emit('send:hitball', {x_speed:-SpeedX(), y_speed:(paddle4.y_speed / 1.5) + randMove()});
+        }
+    }
+    x = this.x;
+    y = this.y;
+    if (run) {
+        setTimeout(function(){
+            socket.emit('send:syncball', {x:x, y:y});
+            run = true;
+        }, 500);
+        run = false;
+    };
+};
+
+Ball.prototype.checkCollision = function (object1, object2) {
+    if (object1.x < object2.x + object2.width  && object1.x + object1.width  > object2.x &&
+            object1.y < object2.y + object2.height && object1.y + object1.height > object2.y ) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+Ball.prototype.hit = function (x_speed, y_speed) {
+    this.x_speed = x_speed;
+    this.y_speed = y_speed;
+}
+
+Ball.prototype.sync = function (x, y) {
     this.x = x;
     this.y = y;
 }
 
 function SpeedX()
 {
-    var arr = [3,3.5];
+    var arr = [3,3.5,4];
     return arr[Math.floor(Math.random()*arr.length)];
 }
 
 function SpeedY()
 {
-    var arr = [3,3.5];
+    var arr = [3,3.5,4];
     return arr[Math.floor(Math.random()*arr.length)];
 }
 
@@ -404,9 +428,9 @@
     var x_pos = ball.x;
     var diff = -((paddle.x + (paddle.width / 2)) - x_pos);
     if (diff < 0 && diff < -4) {
-        diff = -5;
+        diff = -4;
     } else if (diff > 0 && diff > 4) {
-        diff = 5;
+        diff = 4;
     }
     paddle.move(diff, 0);
     if (paddle.x < 0) {
@@ -418,11 +442,11 @@
 
 function AI2(paddle){
     var y_pos = ball.y;
-    var diff = -((paddle.y + (paddle.width / 2)) - y_pos);
+    var diff = -((paddle.y + (paddle.width / 1.2)) - y_pos);
     if (diff < 0 && diff < -4) {
-        diff = -5;
+        diff = -4;
     } else if (diff > 0 && diff > 4) {
-        diff = 5;
+        diff = 4;
     }
     paddle.move(0, diff);
     if (paddle.y < 0) {
@@ -439,8 +463,13 @@
 });
 animate(step);
 
+function randMove()
+{
+    return rand+=0.2;
+}
+
 window.addEventListener("keydown", function (event) {
-    event.preventDefault();
+    //event.preventDefault();
     keysDown[event.keyCode] = true;
 });
 

comments