AI to control a Ping Pong paddle I am making a Ping Pong game using Html5 Canvas. I am concerned about the movement(_b) method. This method should move the computer paddle (up and down) vertically and follow the ball. Some sort of simple AI. Everything works like it should but there is a lot of repetition of if else blocks that might be handled differently. Like shorter code or at least a bit more elegant.
The _b in the movement(_b) is parameter  for the ball that will be passed as an argument.
The keyword this refers to the computer paddle
The code below might give you an idea of what I am talking about.
class Paddle {
    constructor(x, y, width, height, color) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
        this.color = color
    }
    // collision  logic here...
}


class Ball {
    constructor(x, y, x_velocity, y_velocity, radius, color) {
        this.x = x;
        this.y = y;
        this.velocity = {
            x: x_velocity,
            y: y_velocity
        }
        this.radius = radius;
        this.color = color;
        this.isBouncingAllowed = true;
    }
    // movement logic here...
}

 class ComputerPaddle extends Paddle {
    constructor(...args) {
        super(...args)
    }

    movement(_b) {
        let centerOfPaddle = this.y + this.height / 2;

        if (centerOfPaddle &lt; _b.y - 80) {
            this.y += 4
        }
        else if (centerOfPaddle &gt; _b.y + 80) {
            this.y -= 4
        }
        else if (centerOfPaddle &lt; _b.y - 60) {
            this.y += 2
        }
        else if (centerOfPaddle &gt; _b.y + 60) {
            this.y -= 2
        }
        else if (centerOfPaddle &lt; _b.y - 40) {
            this.y += 1
        }
        else if (centerOfPaddle &gt; _b.y + 40) {
            this.y -= 1
        }
        else if (centerOfPaddle &lt; _b.y - 20) {
            this.y += 0.5
        }
        else if (centerOfPaddle &gt; _b.y + 20) {
            this.y -= 0.5
        }
    }
    update(_ball_) {
        this.movement(_ball_)
        this.ballInteraction(_ball_)
        this.draw()
    }
}

let player = new PlayerPaddle(20, canvas.height / 2 - sizes.paddle.height / 2, sizes.paddle.width, sizes.paddle.height, 'red')
let computer = new ComputerPaddle(canvas.width - (20 + sizes.paddle.width), canvas.height / 2 - sizes.paddle.height / 2, sizes.paddle.width, sizes.paddle.height, 'cyan')
let ball = new Ball(250, 350, 5, 0, sizes.ball.radius, 'green')


function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    ball.update()
    player.update(ball)
    computer.update(ball)
}
animate();

Any suggestions will be much appreciated.
EDIT: I did add the Ball and Paddle constructors. The methods in the classes containing the movement and collision detection logic were not included because that code is over 100 lines long and probably not relevant for my question.
Using a mechanical refactoring approach, you could create an array of objects to encapsulate the offsets and values associated with each offset:
movement(_b) {
  let centerOfPaddle = this.y + this.height / 2;

  let offsets = [
    { offset: 80, value: 4 },
    { offset: 60, value: 2 },
    { offset: 40, value: 1 },
    { offset: 20, value: 0.5 },
  ];

  for (const { offset, value } of offsets) {
    if (centerOfPaddle &lt; _b.y - offset) {
      this.y += value;
      break;
    } else if (centerOfPaddle &gt; _b.y + offset) {
      this.y -= value;
      break;
    }
  }
}

Going further, you could do a more conceptual refactoring and figure out the math behind your logic. For example:
movement(_b) {
  let centerOfPaddle = this.y + this.height / 2;

  for (let i = 80, j = 4; i &gt;= 20; i -= 20, j /= 2) {
    if (centerOfPaddle &lt; _b.y - i) {
      this.y += j;
      break;
    } else if (centerOfPaddle &gt; _b.y + i) {
      this.y -= j;
      break;
    }
  }
}

You could give those loop variables more appropriate names like offset and value.