Javascript  

  

 

 

 

 

Pong Game - II

 

In this note, I wanted to try a little bit different approach. Motivation was similar to the case of Pong Game I. Simply put, I was tired of typing in the long requirement.

I thought that chatGPT would have its own idea about the implementation of Pong Game since it is simple and well-known game.

I wanted to see what it comes out with for the requiremnt with almost no detailed information.

 

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

 

I jused put the requirement as below.

 

Q

can you write a javascript for a simple pong game. HTML and Javascript file should be written into separate files.

 

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 : Drag Mouse Pointer Up / Down to move left paddle. Right paddle moves on its own.

.

 

PongGame2.html

<!DOCTYPE html>

<html>

<head>

  <title>Pong</title>

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

</head>

<body>

  <canvas id="gameCanvas" width="800" height="600"></canvas>

</body>

</html>

 

 

PongGame2.js

var canvas;

var canvasContext;

var ballX = 50;

var ballY = 50;

var ballSpeedX = 10;

var ballSpeedY = 4;

 

var player1Score = 0;

var player2Score = 0;

const WINNING_SCORE = 3;

 

var showingWinScreen = false;

 

var paddle1Y = 250;

var paddle2Y = 250;

const PADDLE_THICKNESS = 10;

const PADDLE_HEIGHT = 100;

 

function calculateMousePos(evt) {

  var rect = canvas.getBoundingClientRect();

  var root = document.documentElement;

  var mouseX = evt.clientX - rect.left - root.scrollLeft;

  var mouseY = evt.clientY - rect.top - root.scrollTop;

  return {

    x: mouseX,

    y: mouseY

  };

}

 

function handleMouseClick(evt) {

  if(showingWinScreen) {

    player1Score = 0;

    player2Score = 0;

    showingWinScreen = false;

  }

}

 

window.onload = function() {

  canvas = document.getElementById('gameCanvas');

  canvasContext = canvas.getContext('2d');

 

  var framesPerSecond = 30;

  setInterval(function() {

    moveEverything();

    drawEverything();

  }, 1000/framesPerSecond);

 

  canvas.addEventListener('mousedown', handleMouseClick);

 

  canvas.addEventListener('mousemove',

    function(evt) {

      var mousePos = calculateMousePos(evt);

      paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);

    });

}

 

function ballReset() {

  if(player1Score >= WINNING_SCORE ||

     player2Score >= WINNING_SCORE) {

 

    showingWinScreen = true;

 

  }

 

  ballSpeedX = -ballSpeedX;

  ballX = canvas.width/2;

  ballY = canvas.height/2;

}

 

function computerMovement() {

  var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);

  if(paddle2YCenter < ballY - 35) {

    paddle2Y += 6;

  } else if(paddle2YCenter > ballY + 35) {

    paddle2Y -= 6;

  }

}

 

function moveEverything() {

  if (showingWinScreen) {

    return;

  }

 

  computerMovement();

 

  ballX += ballSpeedX;

  ballY += ballSpeedY;

 

  if (ballX < 0) {

    if (ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {

      ballSpeedX = -ballSpeedX;

 

      var deltaY = ballY - (paddle1Y + PADDLE_HEIGHT / 2);

      ballSpeedY = deltaY * 0.35;

    } else {

      player2Score++; // must be BEFORE ballReset()

      ballReset();

    }

  }

  if (ballX > canvas.width) {

    if (ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {

      ballSpeedX = -ballSpeedX;

 

      var deltaY = ballY - (paddle2Y + PADDLE_HEIGHT / 2);

      ballSpeedY = deltaY * 0.35;

    } else {

      player1Score++; // must be BEFORE ballReset()

      ballReset();

    }

  }

  if (ballY < 0) {

    ballSpeedY = -ballSpeedY;

  }

  if (ballY > canvas.height) {

    ballSpeedY = -ballSpeedY;

  }

}

 

function drawEverything() {

  // canvas background

  colorRect(0, 0, canvas.width, canvas.height, 'black');

 

  // left player paddle

  colorRect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

 

  // right computer paddle

  colorRect(canvas.width - PADDLE_THICKNESS, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

 

  // ball

  colorCircle(ballX, ballY, 10, 'white');

 

  // score

  canvasContext.fillText(player1Score, 100, 100);

  canvasContext.fillText(player2Score, canvas.width - 100, 100);

}

 

function colorRect(leftX, topY, width, height, drawColor) {

  canvasContext.fillStyle = drawColor;

  canvasContext.fillRect(leftX, topY, width, height);

}

 

function colorCircle(centerX, centerY, radius, drawColor) {

  canvasContext.fillStyle = drawColor;

  canvasContext.beginPath();

  canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);

  canvasContext.fill();

}