1

I'm creating a JS Pong Game, but the ball in the pong game starts to lag after a few seconds. I tried to stop the animation frame, optimize my code for better performance and rewrite the code for the ball, but nothings working. Can someone help me please?

HTML (No CSS)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pong</title>
</head>

<body>
    <canvas id="canvas" width="800" height="400" style="background: #000"></canvas>
</body>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.JS"></script>

Javascript (Using jQuery)

/*
Created : 7 / 18 / 2016
*/

//Bottom comment is used to define JQuery

/*jslint browser: true*/
/*global $, jQuery, alert*/

//Define variables
var canvas, ctx;

var ballX, ballY; //Balls x and y pos
var ballSpeedX, ballSpeedY; //Speed of ball x and y pos

var paddleY, paddleHeight, paddleWidth, aiY; //PaddleY = paddle's y pos and paddleHeight = Centering mouse on paddle

//Score variables
var aiScore, playerScore;

//Set functions

//Gets mouse pos
function getMousePos(e) {

    "use strict";

    //Define variables
    var rect, root, mouseX, mouseY;

    rect = canvas.getBoundingClientRect(); //Get canvas outline
    root = document.documentElement; //Get html document

    mouseX = e.clientX - rect.left - root.scrollLeft;
    mouseY = e.clientY - rect.top - root.scrollTop;

    //Return x and y pos to page
    return {

        x: mouseX,
        y: mouseY

    };

}

//Move ai function
function moveAI() {

    "use strict";

    var aiYCenter = aiY + paddleHeight / 2;

    if (aiYCenter < ballY - 35) {

        aiY += 6;

    } else if (aiYCenter > ballY + 35) {

        aiY -= 6;

    }

}

//Animate objects
function animate() {

    "use strict";

    //Animate ball
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    //Make ai move
    moveAI();

    return false;

}

function resetBall() {

    "use strict";

    ballX = canvas.width / 2;
    ballY = canvas.height / 2;

    //Flip ball
    ballSpeedX = -ballSpeedX;

    return false;

}

//Detect collisiom
function collision() {

    "use strict";

    //Right wall
    if (ballX > canvas.width) {

        //If player paddle hits ball
        if (ballY > aiY && ballY < aiY + paddleHeight) {

            ballSpeedX = -ballSpeedX;

        } else {

            //If player paddle doesn't hit ball
            resetBall(); //Reset ball function

            playerScore += 1; //If ai scores add 1 point to ai's score

        }

    }
    //Left wall
    if (ballX < 0) {

        //If player paddle hits ball
        if (ballY > paddleY && ballY < paddleY + paddleHeight) {

            ballSpeedX = -ballSpeedX;

        } else {

            //If player paddle doesn't hit ball
            resetBall(); //Reset ball function

            aiScore += 1; //If ai scores add 1 point to ai's score

        }

    }

    if (ballY > canvas.height) { //If ballY does outside of 800px

        ballSpeedY = -ballSpeedY;

    }
    if (ballY <= 0) { //If ballY goes outside of 0px

        ballSpeedY = -ballSpeedY;

    }

    return false;

}

//Make paddle move
function movePaddle(e) {

    "use strict";

    var pos = getMousePos(e);
    paddleY = pos.y - paddleHeight / 2; //Set paddleY to y pos of function and center user's mouse on the paddle

    return false;

}

//Draw objects
function draw() {

    "use strict";

    ctx.clearRect(0, 0, canvas.width, canvas.height); //Clear canvas after animation frame
    ctx.fillStyle = "white"; //Set color

    //Draw ball
    ctx.beginPath();
    ctx.arc(ballX, ballY, 10, 0, Math.PI * 2, true);
    ctx.fill();

    //Draw player paddle
    ctx.fillRect(0, paddleY, paddleWidth, paddleHeight);

    //Draw ai
    ctx.fillRect(canvas.width - paddleWidth, aiY, paddleWidth, paddleHeight);

    //Score boarc
    ctx.font = "30px Roboto";
    //Draw score
    ctx.fillText(playerScore, 100, 100); //Player score
    ctx.fillText(aiScore, canvas.width - 100, 100);

    return false;

}

//When document is ready
$("document").ready(function () {

    "use strict";

    //Get canvas and set its context
    canvas = $("#canvas")[0];
    ctx = canvas.getContext("2d");

    //Set values to variables

    //Set fps
    var fps = 30;

    ballX = 100;
    ballY = 100;
    ballSpeedX = 2;
    ballSpeedY = 2;

    paddleHeight = 100; //Used for centering mouse on paddle
    paddleY = canvas.height / 2 - paddleHeight / 1.5; //Set paddle's y pos
    paddleWidth = 10; //Width of paddle

    //Score variables
    aiScore = 0;
    playerScore = 0;

    aiY = canvas.height / 2 - paddleHeight / 1.5; //Height of ai player

    setInterval(function () {

        animate();
        collision();
        $(canvas).bind("mousemove", movePaddle); //Move paddle
        draw();

    }, fps / 1000);

    return false;

});
2
  • Have you tried replacing setInterval with requestAnimationFrame? If not, please refer to developer.mozilla.org/en-US/docs/Web/API/window/… and try implementing it.
    – user6077173
    Jul 20, 2016 at 4:37
  • Why not move $(canvas).bind("mousemove", movePaddle); outside the game loop so that the binding happens only once and use requestAnimationFrame instead of setInterval for the game loop? Jul 20, 2016 at 4:46

1 Answer 1

1

I made slight modifications to consider frame rates in your code.

Please try the one below.

//Set fps

var fps = 30, frameInterval = 1000/fps, lastTime = new Date().getTime();; // I would increase fps to 60

$(document).ready(function () {

    "use strict";

    //Get canvas and set its context
    canvas = $("#canvas")[0];
    ctx = canvas.getContext("2d");

    //Set values to variables


    ballX = 100;
    ballY = 100;
    ballSpeedX = 2;
    ballSpeedY = 2;

    paddleHeight = 100; //Used for centering mouse on paddle
    paddleY = canvas.height / 2 - paddleHeight / 1.5; //Set paddle's y pos
    paddleWidth = 10; //Width of paddle

    //Score variables
    aiScore = 0;
    playerScore = 0;

    aiY = canvas.height / 2 - paddleHeight / 1.5; //Height of ai player
    $(canvas).bind("mousemove", movePaddle); //Bind once only
    window.requestAnimationFrame(run);

    return false;

});


function run() {
        var now = new Date().getTime();
        var elapsed = now - lastTime;
        if(elapsed > frameInterval) {
            animate();
            collision();

            draw();
            lastTime = now;
        }
        window.requestAnimationFrame(run);
}

Let me know if it worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.