ChatGPT wrote Pong in an IIFE..!

pong-chat.md

Me: Using the language Javascript, create an IIFE that will play the game of Pong when run in a chrome debug console.

ChatGPT: Here is an example of how you could create an immediately invoked function expression (IIFE) that plays the game of Pong when run in a Chrome debug console:

Copy code

(function() {
  // set up canvas
  const canvas = document.createElement('canvas');
  canvas.width = 800;
  canvas.height = 600;
  document.body.appendChild(canvas);
  const ctx = canvas.getContext('2d');

  // set up ball
  let ballX = 400;
  let ballY = 300;
  let ballSpeedX = 5;
  let ballSpeedY = 3;
  const ballRadius = 10;

  // set up paddles
  const paddleWidth = 10;
  const paddleHeight = 100;
  let paddle1Y = 250;
  let paddle2Y = 250;
  const paddleSpeed = 5;
  const player1Score = 0;
  const player2Score = 0;

  // draw ball
  function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.closePath();
  }

  // draw paddles
  function drawPaddles() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, paddle1Y, paddleWidth, paddleHeight);
    ctx.fillRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight);
  }

  // draw scores
  function drawScores() {
    ctx.font = '24px Arial';
    ctx.fillText(player1Score, 200, 50);
    ctx.fillText(player2Score, canvas.width - 200, 50);
  }

  // move ball
  function moveBall() {
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    // bounce off top and bottom walls
    if (ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) {
      ballSpeedY = -ballSpeedY;
    }

    // check for paddle collision
    if (ballX - ballRadius < paddleWidth) {
      if (ballY > paddle1Y && ballY < paddle1Y + paddleHeight) {
        ballSpeedX = -ballSpeedX;
      } else {
        player2Score++; // player 2 scores a point
        resetBall();
      }
    }
    if (ballX + ballRadius > canvas.width - paddleWidth) {
      if (ballY > paddle2Y && ballY < paddle2Y + paddleHeight) {
        ballSpeedX = -ballSpeedX;
      } else {
        player1Score++; // player 1 scores a point
        resetBall();
      }
    }
  }

  // reset ball to center of the screen
  function resetBall() {
    ballX = 400;
    ballY = 300;
    ballSpeedX = -ballSpeedX;
  }

  // move paddles
  function movePaddles() {
    // player 1
    if (keysDown[87]) { // W key
      paddle1Y -= paddleSpeed;
    }

Me: You didn't finish the IIFE that you started making to play the game Pong, please complete it from where you left off

ChatGPT: Sure, here is the rest of the IIFE to play the game of Pong:

Copy code

  // player 2
  if (keysDown[38]) { // up arrow
    paddle2Y -= paddleSpeed;
  }
  if (keysDown[40]) { // down arrow
    paddle2Y += paddleSpeed;
  }
}

// keyboard input
const keysDown = {};
window.addEventListener('keydown', (e) => {
  keysDown[e.keyCode] = true;
});
window.addEventListener('keyup', (e) => {
  delete keysDown[e.keyCode];
});

// game loop
function update() {
  moveBall();
  movePaddles();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  drawPaddles();
  drawScores();
}

function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

loop();
})();

To run this IIFE in a Chrome debug console, you will need to copy and paste the entire code block into the console and press Enter. This will create a canvas element in the body of the page, and the game of Pong will start running immediately.

In this implementation, player 1 uses the W key to move their paddle up and down, and player 2 uses the up and down arrow keys to move their paddle. The ball will bounce off the top and bottom walls, and the paddles will bounce the ball back across the screen. When a player scores a point, the ball is reset to the center of the screen and the game continues.

Me: There's a bug in this code, can you spot it?

ChatGPT: Yes, there is a bug in the code that I provided. The player1Score and player2Score variables are defined as constants, which means they cannot be reassigned. However, they are being incremented in the moveBall function when a player scores a point.

To fix this bug, you can change the const declarations for player1Score and player2Score to let declarations, like this:

Copy code

let player1Score = 0;
let player2Score = 0;

This will allow the variables to be updated as the game is played.