game starts in 5 seconds when all 4 players are connected
game starts in 5 seconds when all 4 players are connected

file:a/index.js -> file:b/index.js
--- a/index.js
+++ b/index.js
@@ -26,9 +26,10 @@
         username = data.username;
         if (connected == 'player' && users.length <= 4) {
             users.push(username);
-            player = users.length + 1;
+            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:connectedusers', {users:users.length});
             if (users.length == 4) {
                 io.emit('send:startgame');

--- a/public/index.html
+++ b/public/index.html
@@ -58,6 +58,14 @@
         playersMove[msg.player] = msg.msg;
         //console.log (msg);
     });
+    socket.on('send:startgame', function(msg){
+        setTimeout(function(){
+            startGame = true;
+        }, 5000);
+    });
+    socket.on('send:player', function(player){
+        playersData[player.index] = {username: player.username, score : 0};
+    });
     socket.on('users', function(msg){
         console.log ('users : ' + msg);
     });

--- a/public/js/pong.js
+++ b/public/js/pong.js
@@ -7,12 +7,15 @@
 canvas.width = width;
 canvas.height = height;
 var context = canvas.getContext('2d');
+var startGame = false;
 var player1 = new Player1();
 var player2 = new Player2();
 var player3 = new Player3();
 var player4 = new Player4();
 //var wall = new Wall();
 var ball = new Ball(400, 400);
+
+var playersData = {1:{},2:{},3:{},4:{}};
 var score = new Score();
 
 var keysDown = {};
@@ -47,7 +50,9 @@
     player2.update();
     player3.update();
     player4.update();
-    ball.update(player1.paddle, player2.paddle, player3.paddle, player4.paddle);
+    if (startGame == true) {
+        ball.update(player1.paddle, player2.paddle, player3.paddle, player4.paddle);
+    }
 };
 
 var step = function () {
@@ -212,9 +217,9 @@
     if (y) {
         offset = y / 10;
         if (y <= -5) {
-            this.paddle.move(-4 + offset, 0);
+            this.paddle.move(0, -4 + offset);
         } else if (y >= 5) {
-            this.paddle.move(4 + offset, 0);
+            this.paddle.move(0, 4 + offset);
         } else {
             this.paddle.move(0, 0);
         }
@@ -245,9 +250,9 @@
     if (y) {
         offset = y / 10;
         if (y <= -5) {
-            this.paddle.move(-4 + offset, 0);
+            this.paddle.move(0, -4 + offset);
         } else if (y >= 5) {
-            this.paddle.move(4 + offset, 0);
+            this.paddle.move(0, 4 + offset);
         } else {
             this.paddle.move(0, 0);
         }
@@ -256,22 +261,21 @@
 };
 
 function Score() {
-    this.players = [];
-    this.players[1] = {name: 'P1', score : 0};
-    this.players[2] = {name: 'P2', score : 0};
-    this.players[3] = {name: 'P3', score : 0};
-    this.players[4] = {name: 'P4', score : 0};
+    playersData[1] = {username: 'None', score : 0};
+    playersData[2] = {username: 'None', score : 0};
+    playersData[3] = {username: 'None', score : 0};
+    playersData[4] = {username: 'None', score : 0};
 }
 
 Score.prototype.increase = function (player) {
     if (player == 1) {
-        this.players[1].score++;
+        playersData[1].score++;
     } else if (player == 2) {
-        this.players[2].score++;
+        playersData[2].score++;
     } else if (player == 3) {
-        this.players[3].score++;
+        playersData[3].score++;
     } else if (player == 4) {
-        this.players[4].score++;
+        playersData[4].score++;
     }
     //console.log (this);
     this.display();
@@ -279,8 +283,8 @@
 
 Score.prototype.display = function () {
     $('.score').html("");
-    for(player in this.players) {
-        $('.score').append(this.players[player].name + ' - ' + this.players[player].score + '<br />');
+    for(player in playersData) {
+        $('.score').append(playersData[player].username + ' - ' + playersData[player].score + '<br />');
     }
 }
 
@@ -314,6 +318,7 @@
     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;

--- a/public/play.html
+++ b/public/play.html
@@ -22,6 +22,9 @@
     socket.on('send:disconected', function(msg){
         $('.h2').html('There are ' + msg.users + ' conected players right now');
     });
+    socket.on('send:startgame', function(msg){
+        $('.h3').html('The game will start in 5 seconds.');
+    });
     socket.on('disconnect', function(){
         $('.status').append('disconnect');
     });
@@ -29,7 +32,7 @@
         $('.save').click(function(e){
             e.preventDefault();
             var data = {type:'player', username:$('#username').val()};
-            console.log (data);
+            //console.log (data);
             socket.emit('send:connect', data);
         });
     });
@@ -73,6 +76,7 @@
             </div>
             <h1 class="h1"></h1>
             <h2 class="h2"></h2>
+            <h2 class="h3"></h2>
         </div>
     </div>
 </div><!-- /.container -->

comments