Why is my pong AI jittering so much?

Question

I am trying to make an AI for my pong game, but the AI controlled paddle jitters a lot when it is trying to hit the ball.

Here is the AI section of my code:

function calculateAI() {
if (paddleA.AI) {
    if (ball.x + (ball.width / 2) <= ctx.canvas.width * 0.4 && ball.directionX == -1) {
        if (ball.y + (ball.height / 2) >= paddleA.y + (paddleA.height + paddleA.heightModifier * 0.75) && paddleA.y + paddleA.height + paddleA.heightModifier < ctx.canvas.height) {
            paddleA.y += paddleA.speed + paddleA.speedModifier;
        }
        else if (ball.y + (ball.height / 2) <= paddleA.y + (paddleA.height + paddleA.heightModifier * 0.25) && paddleA.y > 0) {
            paddleA.y -= paddleA.speed + paddleA.speedModifier;
        }
    }
    else {
        if (paddleA.y + ((paddleA.height + paddleA.heightModifier) / 2) <= (ctx.canvas.height / 2) - 50 && paddleA.y + paddleA.height + paddleA.heightModifier < ctx.canvas.height) {
            paddleA.y += paddleA.speed + paddleA.speedModifier;
        }
        else if (paddleA.y + ((paddleA.height + paddleA.heightModifier) / 2) >= (ctx.canvas.height / 2) + 50 && paddleA.y > 0) {
            paddleA.y -= paddleA.speed + paddleA.speedModifier;
        }
    }
}
}

You can find a .zip of the full code here: http://dl.dropbox.com/u/23225581/Pong.zip

My question, is how could I restructure this so the AI doesn't jitter so much? If anyone has other suggestions for the AI in general, I would love to hear them.

Have a look at pseudo double buffering in HTML5. http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering — Ayush, Feb 03 '12 at 17:55
@xbonez That is irrelevant to why the AI is jittering. I know it has to do with the paddle rapidly moving, not the canvas flickering while it renders. — rshea0, Feb 03 '12 at 18:04

Jeffrey Sweeney · Accepted Answer · 2012-02-03T22:05:33.373

3

I'm assuming you want to make the AI chase the ball more smoothly. Here's some suggestions:

Move slowly when the paddle is near the ball

Say the AI's speed is 8. If the ball is moving at a speed of 2, the paddle shouldn't jump down 8, then jump back up. Instead, set the y position to equal the ball's.

Make the paddle only chase the ball when it really needs to

You may have already implemented this, and I just didn't notice. Basically, if the ball will hit the edge of the paddle, don't bother moving.

I've revised your code a bit to do these things:

function calculateAI() {
if (paddleA.AI) {

    //ball's x position
    var bx = ball.x + (ball.width / 2);

    //Get half he paddle's height and its y position
    var hD2 = (paddleA.height + paddleA.heightModifier)/2;
    var py = paddleA.y;

    //speed
    var speed = paddleA.speed + paddleA.speedModifier;

    //by is either the center of the screen or the ball's y position,
    //depending on what the paddle wants to do.
    var by = ctx.canvas.height/2;
    if (bx <= ctx.canvas.width * 0.4 && ball.directionX == -1) {
        by = ball.y + (ball.height / 2) - hD2;
    }

    //Attempt to move toward 'by' (if I 'have' to)
    if (by > py+hD2) {

        //Jump to position if close enough
        //(Commented out to retain speed)
        /*
        if(by - speed < py)
            py = by;
        else
        */
            py += speed;

    }
    else if (by < py-hD2) {

        //Jump to position if close enough
        //(Commented out to retain speed)
        /*
        if(by + speed > py)
            py = by;
        else
        */
            py -= speed;
    }

    //Border range check goes here


    paddleA.y = py;
}
}

It's incomplete, but everything should work.

For more pong AI ideas, you can check out the source to my pong game: http://jsweeneydev.net84.net/apps.php

http://jsweeneydev.net84.net/apps/pong/game/script.js

edited Feb 03 '12 at 22:05

answered Feb 03 '12 at 18:56

Jeffrey Sweeney

5,986
5
24
32

This looks like exactly what I wanted! I'll accept the answer once I test out the code a bit. – rshea0 Feb 03 '12 at 19:40
1

Let me know if there are any problems (here's 2 possible ones: the paddle won't go right to the middle, and it can go over the top/bottom borders). The code is really just an example, and since we have different coding styles, you may want to reprogram it to your liking anyway ;) – Jeffrey Sweeney Feb 03 '12 at 19:45
This works perfectly, but I have 2 requests for additions to it. 1. Make the paddle able to do this without changing speed, as there are powerups in the game that modify the paddle's speed; and it makes sense that AI wouldn't be able to slow down normally, since the player can't. 2. Make the AI try to get powerups as a second priority (if the ball isn't within the paddle's range, 40% of the canvas). Do you have any ideas of what I could do to achieve those things? – rshea0 Feb 03 '12 at 21:52
For your first suggestion, comment out the 'too close' check (edited my code in the post). As for collecting powerups, you could do a check to see if powerups are nearby, and set the paddle's preferred y position to the powerups' y position (in my code, that's the `by` variable). – Jeffrey Sweeney Feb 03 '12 at 22:01
Something I noticed is that if the paddle is moving towards the ball, it will start and stop rapidly because one frame the the ball is too far away so it moves, but then the next it is within range so the paddle stops. And then it repeats this cycle of starting and stopping, creating the jittering movement. – rshea0 Feb 03 '12 at 22:34
Yeah, there isn't much you can do about that, other than having the AI calculate where the ball will end up (which is kind of cheap). You could also make it move in 'steps.' There are a lot of possibilities. – Jeffrey Sweeney Feb 03 '12 at 22:46

Why is my pong AI jittering so much?

1 Answers1