1. Ivan Vučica
  2. TVZPong

Commits

Ivan Vučica  committed 28736a2

Using center of paddle instead of left side to determine position. Added the ball.

  • Participants
  • Parent commits 0f59c38
  • Branches default

Comments (0)

Files changed (3)

File index.php

View file
 <div class="playfield" id="playfield">
 <div id="paddle1" class="paddle"></div>
 <div id="paddle2" class="paddle"></div>
+<div id="ball" class="ball"></div>
 </div>
 
 </body>

File pong-game.js

View file
 var pongGame_previouslySentPaddle1X = 0;
 var pongGame_needToSendOnMove = false;
 
+
+var pongGame_positionBallX;
+var pongGame_positionBallY;
+
+var pongGame_velocityBallX;
+var pongGame_velocityBallY;
+
 function pongGame_start(fullJid)
 {
     pongGame_talkTo = fullJid;
     $('#roster').slideUp().hide();
     $('#playfield').fadeIn();
     
-    window.addEventListener("mousemove", pongGame_onMouseMove, false);
+    $('#playfield')[0].addEventListener("mousemove", pongGame_onMouseMove, false);
     
     
     pongGame_sendUpdate();
+    pongGame_velocityBallX = 50;
+    pongGame_velocityBallY = 100;
+    pongGame_positionBallX = $('#playfield')[0].offsetWidth/2;
+    pongGame_positionBallY = $('#playfield')[0].offsetHeight/2;    
+    
+    setInterval("pongGame_localGameUpdate(0.05);", 50);
+
 }
 
 
 function pongGame_sendUpdate()
 {
     
-    var paddle1X = $('#paddle1')[0].style.left;
-    paddle1X = paddle1X.substr(0, paddle1X.length - 2); // remove 'px'
+    var paddle1X = $('#paddle1')[0].pongGame_positionX;
     
     if(pongGame_previouslySentPaddle1X == paddle1X)
     {
 }
 function pongGame_onMouseMove(event)
 {
-    var newX = event['offsetX'] - $('#paddle1')[0].offsetWidth/2;
+    var newX = event['offsetX'];
     var newY = event['offsetY'];
     
-    $('#paddle1')[0].style.left = newX + 'px';
-    //$('#paddle2')[0].style.left = newX + 'px';
+    if(newX < 0 + $('#paddle1')[0].offsetWidth/2)
+        newX = 0 + $('#paddle1')[0].offsetWidth/2;
+    if(newX > $('#playfield')[0].offsetWidth - $('#paddle1')[0].offsetWidth/2)
+        newX = $('#playfield')[0].offsetWidth - $('#paddle1')[0].offsetWidth/2;
+
+    $('#paddle1')[0].pongGame_positionX = newX;
+    
+    $('#paddle1')[0].style.left = (newX - $('#paddle1')[0].offsetWidth/2) + 'px';
     
     if(pongGame_needToSendOnMove)
     {
 }
 function pongGame_positionOpponentPaddle(pos)
 {
-    $('#paddle2')[0].style.left = pos + 'px';
-}
+    if(pos < 0 + $('#paddle2')[0].offsetWidth/2)
+        pos = 0 + $('#paddle2')[0].offsetWidth/2;
+    if(pos > $('#playfield')[0].offsetWidth - $('#paddle2')[0].offsetWidth/2)
+        pos = $('#playfield')[0].offsetWidth - $('#paddle2')[0].offsetWidth/2;
+    
+    $('#paddle2')[0].style.left = (pos - $('#paddle2')[0].offsetWidth/2) + 'px';
+}
+
+
+////////////////////////////////////////////////////////
+
+
+function pongGame_localGameUpdate(timeDelta)
+{
+    pongGame_ballUpdate(timeDelta);
+}
+function pongGame_ballUpdate(timeDelta)
+{
+    console.log(pongGame_velocityBallX * timeDelta);
+    pongGame_positionBallX += pongGame_velocityBallX * timeDelta;
+    pongGame_positionBallY += pongGame_velocityBallY * timeDelta;
+    
+    $('#ball')[0].style.left = (pongGame_positionBallX - $('#ball')[0].offsetWidth/2) + "px";
+    $('#ball')[0].style.top = (pongGame_positionBallY - $('#ball')[0].offsetHeight/2) + "px";
+
+
+    if(pongGame_positionBallY + $('#ball')[0].offsetHeight/2 > $('#paddle1')[0].offsetTop)
+    {
+        pongGame_velocityBallY *= -1;
+        
+        var diff = (pongGame_positionBallY + $('#ball')[0].offsetHeight/2) - $('#paddle1')[0].offsetTop;
+        pongGame_positionBallY = $('#paddle1')[0].offsetTop - diff;
+    }
+    if(pongGame_positionBallY - $('#ball')[0].offsetHeight/2 < $('#paddle2')[0].offsetTop + $('#paddle2')[0].offsetHeight)
+    {
+        pongGame_velocityBallY *= -1;
+        
+        var diff = pongGame_positionBallY - $('#ball')[0].offsetHeight/2 - ($('#paddle2')[0].offsetTop + $('#paddle2')[0].offsetHeight); // negative number
+        pongGame_positionBallY = $('#paddle2')[0].offsetTop + $('#paddle2')[0].offsetHeight - diff;
+    }
+    
+    if(pongGame_positionBallX + $('#ball')[0].offsetWidth/2 > $('#playfield')[0].offsetWidth)
+    {
+        pongGame_velocityBallX *= -1;
+        
+        var diff = pongGame_positionBallX + $('#ball')[0].offsetHeight/2 - $('#playfield')[0].offsetWidth;
+        pongGame_positionBallX = $('#playfield')[0].offsetWidth - diff;
+    }
+    if(pongGame_positionBallX - $('#ball')[0].offsetWidth/2 < 0)
+    {
+        pongGame_velocityBallX *= -1;
+        
+        var diff = pongGame_positionBallX - $('#ball')[0].offsetHeight/2 - 0; // negative number
+        pongGame_positionBallX = 0 - diff;
+    }
+}
+
+
+
+
+
+
+
+
+
+

File style.css

View file
 {
     top: 10px;
 }
+
+/************** ball **************/
+
+.ball
+{
+    left: 50px;
+    top: 50px;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 20px;
+}