JavaScript Pong Jeu Lag

voix
1

Je crée un jeu Pong JS, mais le ballon dans le jeu de pong commence à la traîne au bout de quelques secondes. J'ai essayé d'arrêter le cadre d'animation, d'optimiser mon code pour une meilleure performance et réécrire le code pour le ballon, mais nothings travail. Quelqu'un peut-il me aider s'il vous plaît?

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 (jQuery aide)

/*
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;

});
Créé 20/07/2016 à 03:27
utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

J'apporté de légères modifications pour tenir compte des taux de trame dans votre code.

S'il vous plaît essayer celui ci-dessous.

//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);
}

Faites-moi savoir si cela a fonctionné.

Créé 20/07/2016 à 03:53
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more