Javascript  

  

 

 

 

 

Pong Game - I

 

In this note, I wanted to try a little bit different approach. As you might have noticed, I used to put the detailed and step-by-step requirement to chatGPT. But I didn't put may own version of the detailed requirement for two reasons.

  • I am not a gaming person. I almost never play any sort of games and don't know how to write down step-by-step requirement even for such a simple game like Pong game.
  • Even if I know how to describe it, somehow I became so lazy today and I didn't want to write down the procedure myself.

Then I thought 'what if I ask chatGPT to write the step by step procedure and ask it to implement the code for it'. The outcome is impressive at least in my personal standard.

NOTE : I noticed that chatGPT can make mistake in logics of the code, not about the simple syntax error. Very much like human programmer :).  It took me a lot of back-and-forth between me and chatGPT just to find two lines of the logical mistake. Except those two lines of mistakes, overall code was working fine.

 

This code is created first by chatGPT on Jan 18 2023 (meaning using chatGPT 3.5). The initial conversation started as follows.

 

First I asked chatGPT to write a step by step procedure.

Q

can you write the step by step procedure for simple pong game ?

 

It came out with the procedure as below.

A

Sure, here is a basic outline of the steps involved in creating a simple pong game:

 

1. Create a game window with the appropriate dimensions for the game.

2. Draw the game elements (e.g. the paddles, the ball) on the screen.

3. Implement the game logic for moving the ball and paddles.

4. Implement collision detection to determine when the ball hits the paddles or the edges of the game window.

5. Handle scoring and game over conditions.

6. Implement user input (e.g. keyboard or mouse) to control the movement of the paddles.

7. Add sound effects and/or music.

8. Test the game and make any necessary adjustments.

Note: This is a high-level overview and a lot of things are missing. For a full implementation you may need to use a Game Engine like Unity or Unreal Engine.

 

The I copied the procedure except the last to two steps to make it simpler and pasted into chatGPT as my request.

Q

can you write javascript in html for a pong game with the following procedure ? Javascript and html should be in separate files. Write the whole procedure into a single javascript file.

1. Create a game window with the appropriate dimensions for the game.

2. Draw the game elements (e.g. the paddles, the ball) on the screen.

3. Implement the game logic for moving the ball and paddles.

4. Implement collision detection to determine when the ball hits the paddles or the edges of the game window.

5. Handle scoring and game over conditions.

6. Implement user input (e.g. keyboard or mouse) to control the movement of the paddles.

NOTE : It is not guaranteed that you would have the same code as I got since chatGPT produce the answers differently depending on the context. And it may produce the different answers everytime you ask even with the exact the same question.

NOTE : If you don't have any of your own idea for the request, copy my request and paste it into the chatGPT and put additional requests based on the output for the previous request. I would suggest to create a new thread in the chatGPT and put my request and then continue to add your own request.

 

Usage : Press Q or A key to move left paddle and Press W or S to move right paddel.

 

PongGame.html

<!DOCTYPE html>

<html>

  <head>

    <title>Pong</title>

  </head>

  <body>

    <canvas id="gameCanvas" width="500" height="500"></canvas>

    <script src="PongGame.js"></script>

  </body>

</html>

 

 

PongGame.js

var canvas = document.getElementById("gameCanvas");

var ctx = canvas.getContext("2d");

 

// Game variables

var ballX = canvas.width/2;

var ballY = canvas.height/2;

var ballSpeedX = 1;

var ballSpeedY = 1;

 

var leftPaddleY = canvas.height/2 - 50;

var rightPaddleY = canvas.height/2 - 50;

 

var player1Score = 0;

var player2Score = 0;

 

var paddleSpeed = 10;

 

// Draw game elements

function draw() {

  //console.log(leftPaddleY);

  //console.log(canvas.width);

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "black";

  ctx.fillRect(10, leftPaddleY, 10, 100);

  ctx.fillRect(canvas.width - 20, rightPaddleY, 10, 100);

  ctx.beginPath();

  ctx.arc(ballX, ballY, 10, 0, 2 * Math.PI);

  ctx.fill();

}

 

 

// Move the ball on each frame

function updateBall() {

  ballX += ballSpeedX;

  ballY += ballSpeedY;

}

 

// Move the left paddle based on user input

function moveLeftPaddle(direction) {

  leftPaddleY += direction * paddleSpeed;

  // Check if the paddle is out of bounds

  if (leftPaddleY < 0) {

    leftPaddleY = 0;

  } else if (leftPaddleY + 100 > canvas.height) {

    leftPaddleY = canvas.height - 100;

  }

}

 

// Move the right paddle based on user input

function moveRightPaddle(direction) {

  rightPaddleY += direction * 10;

  // Check if the paddle is out of bounds

  if (rightPaddleY < 0) {

    rightPaddleY = 0;

  } else if (rightPaddleY + 100 > canvas.height) {

    rightPaddleY = canvas.height - 100;

  }

}

 

// Check for collisions

function checkCollision() {

  // Check for collisions with left paddle

  if (ballX - 10 <= 20 && ballY >= leftPaddleY && ballY <= leftPaddleY + 100) {

    ballSpeedX = -ballSpeedX;

  }

 

  // Check for collisions with right paddle

  if (ballX + 10 >= canvas.width - 20 && ballY >= rightPaddleY && ballY <= rightPaddleY + 100) {

    ballSpeedX = -ballSpeedX;

  }

 

  // Check for collisions with top and bottom edges of game window

  if (ballY - 10 <= 0 || ballY + 10 >= canvas.height) {

    ballSpeedY = -ballSpeedY;

  }

}

 

// Check for scoring

function checkScore() {

   // Check for ball going out of bounds on left side

   if (ballX - 10 <= 0) {

     player2Score++;

     resetGame();

   }

 

  // Check for ball going out of bounds on right side

   if (ballX + 10 >= canvas.width) {

     player1Score++;

     resetGame();

   }

 

   // Check for player 1 winning

   if (player1Score >= 10) {

     alert("Player 1 wins!");

     resetScores();

   }

 

   // Check for player 2 winning

   if (player2Score >= 10) {

     alert("Player 2 wins!");

     resetScores();

   }

 

}

 

// Handle user input

window.addEventListener("keydown", function(event) {

   if (event.code === "ArrowUp") {

      moveLeftPaddle(-1);

   }

   else if (event.code === "ArrowDown") {

      moveLeftPaddle(1);

   }

   else if (event.code === "KeyW") {

      moveRightPaddle(-1);

   }

   else if (event.code === "KeyS") {

      moveRightPaddle(1);

   }

});

 

// Reset game when ball goes out of bounds

function resetGame() {

   ballX = canvas.width/2;

   ballY = canvas.height/2;

   ballSpeedX = -ballSpeedX;

   ballSpeedY = 5;

}

 

// Reset scores when a player wins

function resetScores() {

   player1Score = 0;

   player2Score = 0;

}

 

// Call update functions and render the game

function gameLoop() {

   // NOTE : At first, chatGPT put moveLeftPaddle() and moveRightPaddle() here as well. It made the Paddle disappear

   // as soon as the game start. These functions should be called only when a certain key is pressed. Not here.

   // It took me a long back-and-forth with the chatGPT until I found the logical error.

   updateBall();

   checkCollision();

   checkScore();

   draw();

   requestAnimationFrame(gameLoop);

}

 

gameLoop();