Question

I’ve recently bought a book to start learning to make games in HTML 5, CSS3, and Javascript/Jquery. The first game it introduced is a simple ping pong game. Most of it was copy and paste but since then I’ve been trying to add additional features.

Here is some code i’m trying adjust:

    pingpong.scoreB++;
    $("#scoreB").html(pingpong.scoreB);
    if (pingpong.scoreB == 10){
        alert("Player A Lost");
        pingpong.scoreA = 0;
        pingpong.scoreB = 0;
    }

Here, I am trying to reset the score to zero after someone hits 10. This code technically does work, just the score on the screen doesn’t reset till someone makes another score after closing the alert box.

Another code i’m trying to adjust:

if (pingpong.pressedKeys[KEY.ENTER]){
$("#ball").css({
    "left" : ballLeft + ball.speed * ball.directionX,
    "top" : ballTop + ball.speed * ball.directionY
})};

For this code, i’m trying to get the ball to move after pressing ENTER once. Currently, I need ENTER to be held down to continually move the ball.

Answer 1

Notice how when you change the score the first time (with pingpont.scoreB++), the very next line writes the new score to the HTML. But when you reset the scores to zero, you don’t follow that with any code to write the new scores to the HTML. Add a couple of lines to update the UI after you reset the scores:

pingpong.scoreB++;
$("#scoreB").html(pingpong.scoreB);  // This line updates the UI
if (pingpong.scoreB == 10){
    alert("Player A Lost");
    pingpong.scoreA = 0;
    pingpong.scoreB = 0;  // After you change the score here, update the UI again
    $("#scoreA").html(pingpong.scoreA);
    $("#scoreB").html(pingpong.scoreB);
}