let SCREEN_HEIGHT = 335;

let PADDLE_WIDTH = 10;

let PADDLE_HEIGHT = 70;

let PADDLE_SLANT = 20;

let BALL_SIZE = 10;

let WIN_SCORE = 10;

​

let x = 40;        // Left paddle X

let y = 160;       // Left paddle Y

let x2 = 600;      // Right paddle X

let y2 = 160;      // Right paddle Y

​

let bx = SCREEN_WIDTH / 2;    // Ball X

let by = SCREEN_HEIGHT / 2;   // Ball Y

let c = -1.5;    // Ball x movement

let v = 0;       // Ball y movement

​

let p1 = 0;        // Left player points

let p2 = 0;        // Right player points

let s = false; // Start variable

​

// Ball speed variables

let initialSpeed = 1.5;

let speedIncrement = 0.1;

let maxSpeed = 5.0;

​

// Ball trail variables

let trailLength = 10;

let trailX = new Array(trailLength);

let trailY = new Array(trailLength);

​

// Array for controller keys

let keys = new Array(8);

let A = 0, D = 1, W = 2, S = 3;  // Player 1 controls

let J = 4, L = 5, I = 6, K = 7;  // Player 2 controls

​

function setup() {

  createCanvas(640, 335);

  ellipseMode(CENTER);

  fill(255, 201, 9);

  strokeWeight(2);

  frameRate(60);  // Changed to 60 FPS

  textFont('Arial', 22);

  // Init all controller keys to "not pressed"

  for (let i = 0; i < 8; i++) {

    keys[i] = false;

  }

  // Initialize trail

  for (let i = 0; i < trailLength; i++) {

    trailX[i] = bx;

    trailY[i] = by;

  }

}

​

function draw() {

  if (!s) {

    background(0);

    drawStartScreen();

    noLoop(); // Stop the draw loop after drawing the start screen

  } else {

    background(0);

    updatePaddles();

    updateBall();

    checkCollisions();

    drawGame();

    checkWinCondition();

  }

}

​

function mousePressed() {

  if (p1 >= WIN_SCORE || p2 >= WIN_SCORE) {

    resetGame();

  }

  if (!s) {

    if ((mouseX <= 360 && mouseX >= 260) && (mouseY <= 208 && mouseY >= 178)) {

      s = true;

      resetGame();

      loop(); // Restart the draw loop when the game starts

    }

  }

}

​

function drawStartScreen() {

  textSize(22);

  text("DISRUPONG", 260, 150);

  textSize(15);

  text("Singapong", 260, 170);

  textSize(16);

  text(">>Start<<", 270, 200);

  stroke(255, 201, 9);

  noFill();

  rect(260, 178, 100, 30);

  rect(8, 8, 624, 319);

  line(260, 8, 300, 120);

  line(330, 220, 370, 326);

}

​

function updatePaddles() {

  if (keys[A]) x = max(PADDLE_SLANT, x - 2);

  if (keys[D]) x = min(SCREEN_WIDTH / 2 - PADDLE_WIDTH, x + 2);

  if (keys[W]) y = max(0, y - 2);

  if (keys[S]) y = min(SCREEN_HEIGHT - PADDLE_HEIGHT, y + 2);

  if (keys[J]) x2 = max(SCREEN_WIDTH / 2, x2 - 2);

  if (keys[L]) x2 = min(SCREEN_WIDTH - PADDLE_WIDTH, x2 + 2);

  if (keys[I]) y2 = max(0, y2 - 2);

  if (keys[K]) y2 = min(SCREEN_HEIGHT - PADDLE_HEIGHT, y2 + 2);

}

​

function updateBall() {

  bx += c;

  by += v;

  if (by <= 0 || by >= SCREEN_HEIGHT) v = -v;

  if (bx < 0) {

    resetBall(1);

    p2++;

  } else if (bx > SCREEN_WIDTH) {

    resetBall(-1);

    p1++;

  }

}

​

function resetBall(direction) {

  bx = SCREEN_WIDTH / 2;

  by = SCREEN_HEIGHT / 2;

  c = initialSpeed * direction;

  v = 0;

  // Reset trail

  for (let i = 0; i < trailLength; i++) {

    trailX[i] = bx;

    trailY[i] = by;

  }

}

​

function checkCollisions() {

  // Left paddle collision

  if (bx >= x - PADDLE_SLANT && bx <= x + PADDLE_WIDTH && 

      by >= y && by <= y + PADDLE_HEIGHT) {

    let relativeIntersectY = (y + (PADDLE_HEIGHT / 2)) - by;

    let normalizedRelativeIntersectionY = (relativeIntersectY / (PADDLE_HEIGHT / 2));

    let bounceAngle = normalizedRelativeIntersectionY * radians(75);

    let speed = min(sqrt(c * c + v * v) + speedIncrement, maxSpeed);

    c = abs(speed * cos(bounceAngle));

    v = speed * -sin(bounceAngle);

    // Adjust ball position based on paddle slant

    let t = (by - y) / PADDLE_HEIGHT;

    bx = x + t * PADDLE_SLANT + PADDLE_WIDTH + 1;

  }

​

  // Right paddle collision

  if (bx >= x2 - PADDLE_SLANT && bx <= x2 + PADDLE_WIDTH && 

      by >= y2 && by <= y2 + PADDLE_HEIGHT) {

    let relativeIntersectY = (y2 + (PADDLE_HEIGHT / 2)) - by;

    let normalizedRelativeIntersectionY = (relativeIntersectY / (PADDLE_HEIGHT / 2));

    let bounceAngle = normalizedRelativeIntersectionY * radians(75);

    let speed = min(sqrt(c * c + v * v) + speedIncrement, maxSpeed);

    c = -abs(speed * cos(bounceAngle));

    v = speed * -sin(bounceAngle);

    // Adjust ball position based on paddle slant

    let t = (by - y2) / PADDLE_HEIGHT;

    bx = x2 - t * PADDLE_SLANT - 1;

  }

}

​

function drawGame() {

  drawScores();

  drawField();

  drawPaddles();

  drawBall();

}

​

function drawScores() {

  textSize(20);

  text(p1, 20, 45);

  text(p2, 610, 45);

}

​

function drawField() {

  stroke(255, 201, 9);

  line(SCREEN_WIDTH / 2, 8, SCREEN_WIDTH / 2, 140);

  line(SCREEN_WIDTH / 2, 190, SCREEN_WIDTH / 2, SCREEN_HEIGHT - 9);

  noFill();

  rect(8, 8, SCREEN_WIDTH - 16, SCREEN_HEIGHT - 16);

  fill(255, 201, 9);

  textSize(22);

  text("DISRUPONG", 262, 170);

}

​

function drawPaddles() {

  fill(255, 201, 9);

  // Left paddle

  quad(x - PADDLE_SLANT, y, 

       x + PADDLE_WIDTH - PADDLE_SLANT, y, 

       x + PADDLE_WIDTH, y + PADDLE_HEIGHT, 

       x, y + PADDLE_HEIGHT);

  // Right paddle

  quad(x2 - PADDLE_SLANT, y2, 

       x2 + PADDLE_WIDTH - PADDLE_SLANT, y2, 

       x2 + PADDLE_WIDTH, y2 + PADDLE_HEIGHT, 

       x2, y2 + PADDLE_HEIGHT);

}

​

function drawBall() {

  // Update trail positions

  for (let i = trailLength - 1; i > 0; i--) {

    trailX[i] = trailX[i-1];

    trailY[i] = trailY[i-1];

  }

  trailX[0] = bx;

  trailY[0] = by;

  // Draw trail

  noStroke();

  for (let i = 0; i < trailLength; i++) {

    let alpha = map(i, 0, trailLength - 1, 255, 0);

    fill(255, 201, 9, alpha);

    let size = map(i, 0, trailLength - 1, BALL_SIZE, BALL_SIZE / 2);

    ellipse(trailX[i], trailY[i], size, size);

  }

  // Draw ball

  fill(255, 201, 9);

  ellipse(bx, by, BALL_SIZE, BALL_SIZE);

}

​

function checkWinCondition() {

  if (p1 >= WIN_SCORE || p2 >= WIN_SCORE) {

    textSize(20);

    if (p1 >= WIN_SCORE) {

      text("Player_1 ravaged you", 400, 130);

    } else {

      text("Player_2 slayed you", 100, 130);

    }

    textSize(10);

    text(">>click to restart", p1 >= WIN_SCORE ? 400 : 100, 180);

    noLoop();

  }

}

​

function keyPressed() {

  setKey(key, true);

}

​

function keyReleased() {

  setKey(key, false);

}

​

function setKey(k, state) {

  switch(k.toLowerCase()) {

    case 'a': keys[A] = state; break;

    case 'd': keys[D] = state; break;

    case 'w': keys[W] = state; break;

    case 's': keys[S] = state; break;

    case 'j': keys[J] = state; break;

    case 'l': keys[L] = state; break;

    case 'i': keys[I] = state; break;

    case 'k': keys[K] = state; break;

  }

}

​

function resetGame() {

  p1 = 0;

  p2 = 0;

  x = 40;

  y = SCREEN_HEIGHT / 2 - PADDLE_HEIGHT / 2;

  x2 = 600;

  y2 = SCREEN_HEIGHT / 2 - PADDLE_HEIGHT / 2;

  resetBall(random(1) < 0.5 ? -1 : 1);

  loop(); // Ensure the game loop is running

}

​