PONG Home-Màquina

Author: solsolet

pong.js

@@ -12,11 +12,11 @@ const FONT_SIZE = '45px';
 
 const PADDLE_RIGHT_COLOR = 'RED';
 const PADDLE_LEFT_COLOR = 'WHITE';
-const PADDLE_WIDTH = '20';
-const PADDLE_HEIGHT = '100';
+const PADDLE_WIDTH = 20;
+const PADDLE_HEIGHT = 100;
 
 const BALL_COLOR = 'WHITE';
-const BALL_RADIUS = '10';
+const BALL_RADIUS = 10;
 const BALL_DELTA_VELOCITY = 0.5;
 const BALL_VELOCITY = 5;
 
@@ -70,22 +70,6 @@ const playerB = {
 let localPlayer = playerA;
 let computer = playerB;
 
-/* //rectangle fons
-ctx.fillStyle = 'BLACK';
-ctx.fillRect(10, 20, 150, 200);
-
-//cercle
-ctx.fillStyle = 'WHITE';
-ctx.beginPath();
-ctx.arc(60,70,10,0,2*Math.PI);
-ctx.closePath();
-ctx.fill();
-
-//text
-ctx.fillStyle = 'BLUE';
-ctx.font = '45px impact';
-ctx.fillText("Saludos", 200, 200); */
-
 //HELPER CANVAS
 function drawRect(x,y,w,h, color){
     ctx.fillStyle = color;
@@ -106,36 +90,60 @@ function drawText(text, x, y, color=FONT_COLOR, fontSize=FONT_SIZE, fontFamily=F
     ctx.fillText(text, x, y);
 }
 
-
-
-
-
-
 //HELPERS PONG
 function clearCanvas(){
-    drawRect(0,0,cvs.width,cvs.height,'BLACK');
+    drawRect(0,0,cvs.width,cvs.height, BG_COLOR);
 }
+
 function drawNet(){
     for(let i=0; i<=cvs.height; i+=net.padding){
         drawRect(net.x, net.y+i, net.width, net.height, net.color);
     }
 }
 
 function drawScore() {
-    drawText(localPlayer.score, cvs.width/4, cvs.height/5, 'WHITE');
-    drawText(computer.score, 3*cvs.width/4, cvs.height/5, 'WHITE');
+    drawText(localPlayer.score, cvs.width/4, cvs.height/6, 'WHITE');
+    drawText(computer.score, 3*cvs.width/4, cvs.height/6, 'WHITE');
 }
 
 function drawPaddle(paddle){
     drawRect(paddle.x, paddle.y, paddle.width, paddle.height, paddle.color);
 } 
 
 function drawBall(){
-    drawCircle(ball.x,ball.y,ball.radius, ball.color);
+    drawCircle(ball.x, ball.y, ball.radius, ball.color);
 }
 
-function updateComputer(){
-    computer.y += ball.y - (computer.y+computer.height/2) * COMPUTER_LEVEL;
+//Play HELPERS
+function initPaddleMovement(){
+    cvs.addEventListener('mousemove', updateLocalPlayerPos);
+}
+
+function updateLocalPlayerPos(event){
+    const rect = cvs.getBoundingClientRect();
+
+    localPlayer.y = event.clientY - localPlayer.height/2 - rect.top;
+}
+
+function pause(milliseconds){
+    stopGameLoop();
+    setTimeout(()=>{
+        initGameLoop();
+    }, milliseconds);
+}
+
+function newBall(){
+    console.log('Tanto!');
+
+    ball.x = cvs.width/2;
+    ball.y = cvs.height/2;
+
+    const direction = ball.velocityX > 0 ? -1 : 1;
+    ball.velocityX = direction * BALL_VELOCITY;
+    ball.velocityY = BALL_VELOCITY;
+    ball.speed = BALL_VELOCITY;
+
+    pause(500);
 }
 
 function collision(b, p){ //bola i pala
@@ -152,6 +160,14 @@ function collision(b, p){ //bola i pala
     return b.right > p.left && b.bottom > p.top && b.left < p.right && b.top < p.bottom;
 }
 
+function updateComputer(){
+    computer.y += (ball.y - (computer.y+computer.height/2)) * COMPUTER_LEVEL;
+}
+
+function isGameOver(){
+    return localPlayer.score >= NUM_BALLS || computer.score >= NUM_BALLS;
+}
+
 function update(){
     //actualizamos la posición de la bola
     ball.x += ball.velocityX;
@@ -165,21 +181,32 @@ function update(){
         ball.velocityY = -ball.velocityY;
     }
 
+    //comprobar si la pelota choca contra una pala
     let whatPlayer = (ball.x < cvs.width/2) ? playerA : playerB;
-
+    
     if(collision(ball, whatPlayer)){
-        let collidePoint = ball.y - whatPlayer.y + whatPlayer.height/2;
-        collidePoint = collidePoint/whatPlayer.height/2;
+        //calcular punt de colisió de la Y
+        let collidePoint = ball.y - (whatPlayer.y + whatPlayer.height/2);
+        //normalitzem el punt de colisio
+        collidePoint = collidePoint/(whatPlayer.height/2);
         //calcule l'angle en rad
-        const anglePad = collidePoint * Math.PI/4;
+        const angleRad = collidePoint * Math.PI/4;
+        //calculem la direccio de la pilota
         const direction = (ball.x < cvs.width/2) ? 1 : -1; //MEdiacapabilities o algo en lloc de cvs
-
-        ball.velocityX = direction * ball.speed * Math.cos(anglePad);
-        ball.velocityY = ball.speed * Math.sin(anglePad);
-
+        //modificar la velocitat de la pilota
+        ball.velocityX = direction * ball.speed * Math.cos(angleRad);
+        ball.velocityY = ball.speed * Math.sin(angleRad);
         //cada vez le damos a la pala incrementamos la velocidad de la bola
         ball.speed += BALL_DELTA_VELOCITY;
     }
+    //Actualitzem el marcador
+    if(ball.x-ball.radius < 0) {
+        computer.score++;
+        newBall();
+    } else if(ball.x+ball.radius > cvs.width) {
+        localPlayer.score++;
+        newBall();
+    }
 }
 
 function render() { //codi refactoritzat
@@ -190,35 +217,53 @@ function render() { //codi refactoritzat
 
     drawPaddle(localPlayer);
     drawPaddle(computer);
-
-    drawBall();
-    //drawText('Saludos',200,100); //no li passem color i ixiran per defecte
+    //si hemos termiando la partida
+    if( isGameOver() ){
+        endGame();
+    } else {
+        drawBall();
+    }
 }
 
-function drawBoard(){
-    clearCanvas();
-    drawNet();
+function endGame(){
+    console.log('Game Over');
 
-    drawScore();
+    //mostrem el final del joc
+    drawText('GAME OVER', cvs.width/3, cvs.height/2, 'BLUE');
 
-    drawPaddle(localPlayer);
-    drawPaddle(computer);
+    // detenemos el bucle de juego
+    stopGameLoop();
 }
 
-var gameLoopId;
+let gameLoopId;
 
 function gameLoop(){
     update();
     render();
 }
 
+function stopGameLoop(){
+    clearInterval(gameLoopId);
+}
+
 function initGameLoop(){
     gameLoopId = setInterval(gameLoop, 1000/FRAME_PER_SECOND);
 }
 
 function play() {
     drawBoard();
+    initPaddleMovement();
     initGameLoop();
 }
 
+function drawBoard(){
+    clearCanvas();
+    drawNet();
+
+    drawScore();
+
+    drawPaddle(localPlayer);
+    drawPaddle(computer);
+}
+
 play();