For this post, I tried to have ChatGPT generate a simple game of two-player pong. Many of my last posts involved experimentation like this so I had a good idea of how I should engineer my early prompt. As I am working with Codepen and WordPress code blocks I needed to have all of my HTML, CSS, and JS written in just HTML and with no header section. My first prompt was:
“Generate HTML, CSS, and JS written in HTML with no header section. Make a simple game of pong that lets to opponents play on one computer and keeps score and has a reset button”
Prompt #1 Code
<!DOCTYPE html>
<html>
<body style=”margin: 0; display: flex; flex-direction: column; align-items: center; background: #000; color: #fff; height: 100vh; justify-content: center;”>
<div style=”text-align: center; margin-bottom: 10px;”>
<span id=”score”>0 : 0</span>
<button onclick=”resetGame()” style=”margin-left: 10px;”>Reset</button>
</div>
<canvas id=”pongCanvas” width=”800″ height=”400″ style=”border: 2px solid #fff;”></canvas>
<script>
const canvas = document.getElementById(“pongCanvas”);
const context = canvas.getContext(“2d”);
let paddleHeight = 100, paddleWidth = 10;
let player1Y = (canvas.height – paddleHeight) / 2, player2Y = (canvas.height – paddleHeight) / 2;
let player1Score = 0, player2Score = 0;
let ballX = canvas.width / 2, ballY = canvas.height / 2;
let ballSpeedX = 5, ballSpeedY = 5;
let ballRadius = 10;
document.addEventListener(“keydown”, keyDownHandler);
document.addEventListener(“keyup”, keyUpHandler);
let player1Up = false, player1Down = false, player2Up = false, player2Down = false;
function resetGame() {
player1Score = 0;
player2Score = 0;
resetBall();
updateScore();
}
function updateScore() {
document.getElementById(“score”).innerText = `${player1Score} : ${player2Score}`;
}
function keyDownHandler(e) {
switch (e.key) {
case “w”:
player1Up = true;
break;
case “s”:
player1Down = true;
break;
case “ArrowUp”:
player2Up = true;
break;
case “ArrowDown”:
player2Down = true;
break;
}
}
function keyUpHandler(e) {
switch (e.key) {
case “w”:
player1Up = false;
break;
case “s”:
player1Down = false;
break;
case “ArrowUp”:
player2Up = false;
break;
case “ArrowDown”:
player2Down = false;
break;
}
}
function drawPaddle(x, y) {
context.fillStyle = “#fff”;
context.fillRect(x, y, paddleWidth, paddleHeight);
}
function drawBall(x, y) {
context.fillStyle = “#fff”;
context.beginPath();
context.arc(x, y, ballRadius, 0, Math.PI * 2);
context.fill();
context.closePath();
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = Math.random() * 6 – 3;
}
function gameLoop() {
context.clearRect(0, 0, canvas.width, canvas.height);
if (player1Up && player1Y > 0) player1Y -= 6;
if (player1Down && player1Y < canvas.height – paddleHeight) player1Y += 6;
if (player2Up && player2Y > 0) player2Y -= 6;
if (player2Down && player2Y < canvas.height – paddleHeight) player2Y += 6;
drawPaddle(0, player1Y); // Left paddle (Player 1)
drawPaddle(canvas.width – paddleWidth, player2Y); // Right paddle (Player 2)
drawBall(ballX, ballY);
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballY – ballRadius < 0 || ballY + ballRadius > canvas.height) {
ballSpeedY = -ballSpeedY;
}
if (ballX – ballRadius < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX + ballRadius > canvas.width – paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX – ballRadius < 0) {
player2Score++;
updateScore();
resetBall();
}
if (ballX + ballRadius > canvas.width) {
player1Score++;
updateScore();
resetBall();
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
This worked quite well for the first prompt. The reset button worked, and two players could compete using W and S or the arrow keys. I then wanted to prompt it to add a start button and make it pause at the beginning so that it would not just run automatically. My next prompt looked like this:
“At a start button and make it paused at the beginning”
Prompt #2 Code
<!DOCTYPE html>
<html>
<body style=”margin: 0; display: flex; flex-direction: column; align-items: center; background: #000; color: #fff; height: 100vh; justify-content: center;”>
<div style=”text-align: center; margin-bottom: 10px;”>
<span id=”score”>0 : 0</span>
<button id=”startButton” onclick=”startGame()” style=”margin-left: 10px;”>Start</button>
<button onclick=”resetGame()” style=”margin-left: 10px;”>Reset</button>
</div>
<canvas id=”pongCanvas” width=”800″ height=”400″ style=”border: 2px solid #fff;”></canvas>
<script>
const canvas = document.getElementById(“pongCanvas”);
const context = canvas.getContext(“2d”);
let paddleHeight = 100, paddleWidth = 10;
let player1Y = (canvas.height – paddleHeight) / 2, player2Y = (canvas.height – paddleHeight) / 2;
let player1Score = 0, player2Score = 0;
let ballX = canvas.width / 2, ballY = canvas.height / 2;
let ballSpeedX = 5, ballSpeedY = 5;
let ballRadius = 10;
let gamePaused = true;
document.addEventListener(“keydown”, keyDownHandler);
document.addEventListener(“keyup”, keyUpHandler);
let player1Up = false, player1Down = false, player2Up = false, player2Down = false;
function startGame() {
gamePaused = false;
document.getElementById(“startButton”).style.display = “none”;
gameLoop();
}
function resetGame() {
player1Score = 0;
player2Score = 0;
resetBall();
updateScore();
gamePaused = true;
document.getElementById(“startButton”).style.display = “inline”;
}
function updateScore() {
document.getElementById(“score”).innerText = `${player1Score} : ${player2Score}`;
}
function keyDownHandler(e) {
switch (e.key) {
case “w”:
player1Up = true;
break;
case “s”:
player1Down = true;
break;
case “ArrowUp”:
player2Up = true;
break;
case “ArrowDown”:
player2Down = true;
break;
}
}
function keyUpHandler(e) {
switch (e.key) {
case “w”:
player1Up = false;
break;
case “s”:
player1Down = false;
break;
case “ArrowUp”:
player2Up = false;
break;
case “ArrowDown”:
player2Down = false;
break;
}
}
function drawPaddle(x, y) {
context.fillStyle = “#fff”;
context.fillRect(x, y, paddleWidth, paddleHeight);
}
function drawBall(x, y) {
context.fillStyle = “#fff”;
context.beginPath();
context.arc(x, y, ballRadius, 0, Math.PI * 2);
context.fill();
context.closePath();
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = Math.random() * 6 – 3;
}
function gameLoop() {
if (gamePaused) return;
context.clearRect(0, 0, canvas.width, canvas.height);
if (player1Up && player1Y > 0) player1Y -= 6;
if (player1Down && player1Y < canvas.height – paddleHeight) player1Y += 6;
if (player2Up && player2Y > 0) player2Y -= 6;
if (player2Down && player2Y < canvas.height – paddleHeight) player2Y += 6;
drawPaddle(0, player1Y); // Left paddle (Player 1)
drawPaddle(canvas.width – paddleWidth, player2Y); // Right paddle (Player 2)
drawBall(ballX, ballY);
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballY – ballRadius < 0 || ballY + ballRadius > canvas.height) {
ballSpeedY = -ballSpeedY;
}
if (ballX – ballRadius < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX + ballRadius > canvas.width – paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX – ballRadius < 0) {
player2Score++;
updateScore();
resetBall();
}
if (ballX + ballRadius > canvas.width) {
player1Score++;
updateScore();
resetBall();
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
This all worked too so I added in a 10 point win and announcement for the winner using the prompt:
“Make the game go to 10 points, announce the winner, and reset to the initial state”
Prompt #3 Code
<!DOCTYPE html>
<html>
<body style=”margin: 0; display: flex; flex-direction: column; align-items: center; background: #000; color: #fff; height: 100vh; justify-content: center;”>
<div style=”text-align: center; margin-bottom: 10px;”>
<span id=”score”>0 : 0</span>
<button id=”startButton” onclick=”startGame()” style=”margin-left: 10px;”>Start</button>
<button onclick=”resetGame()” style=”margin-left: 10px;”>Reset</button>
<div id=”message” style=”margin-top: 10px; color: yellow; font-size: 18px;”></div>
</div>
<canvas id=”pongCanvas” width=”800″ height=”400″ style=”border: 2px solid #fff;”></canvas>
<script>
const canvas = document.getElementById(“pongCanvas”);
const context = canvas.getContext(“2d”);
let paddleHeight = 100, paddleWidth = 10;
let player1Y = (canvas.height – paddleHeight) / 2, player2Y = (canvas.height – paddleHeight) / 2;
let player1Score = 0, player2Score = 0;
let ballX = canvas.width / 2, ballY = canvas.height / 2;
let ballSpeedX = 5, ballSpeedY = 5;
let ballRadius = 10;
let gamePaused = true;
const winningScore = 10;
document.addEventListener(“keydown”, keyDownHandler);
document.addEventListener(“keyup”, keyUpHandler);
let player1Up = false, player1Down = false, player2Up = false, player2Down = false;
function startGame() {
gamePaused = false;
document.getElementById(“startButton”).style.display = “none”;
document.getElementById(“message”).innerText = “”;
gameLoop();
}
function resetGame() {
player1Score = 0;
player2Score = 0;
player1Y = (canvas.height – paddleHeight) / 2;
player2Y = (canvas.height – paddleHeight) / 2;
resetBall();
updateScore();
gamePaused = true;
document.getElementById(“startButton”).style.display = “inline”;
document.getElementById(“message”).innerText = “”;
}
function updateScore() {
document.getElementById(“score”).innerText = `${player1Score} : ${player2Score}`;
}
function keyDownHandler(e) {
switch (e.key) {
case “w”:
player1Up = true;
break;
case “s”:
player1Down = true;
break;
case “ArrowUp”:
player2Up = true;
break;
case “ArrowDown”:
player2Down = true;
break;
}
}
function keyUpHandler(e) {
switch (e.key) {
case “w”:
player1Up = false;
break;
case “s”:
player1Down = false;
break;
case “ArrowUp”:
player2Up = false;
break;
case “ArrowDown”:
player2Down = false;
break;
}
}
function drawPaddle(x, y) {
context.fillStyle = “#fff”;
context.fillRect(x, y, paddleWidth, paddleHeight);
}
function drawBall(x, y) {
context.fillStyle = “#fff”;
context.beginPath();
context.arc(x, y, ballRadius, 0, Math.PI * 2);
context.fill();
context.closePath();
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = Math.random() * 6 – 3;
}
function declareWinner(winner) {
document.getElementById(“message”).innerText = `${winner} wins!`;
gamePaused = true;
document.getElementById(“startButton”).style.display = “inline”;
}
function checkWin() {
if (player1Score >= winningScore) {
declareWinner(“Player 1”);
} else if (player2Score >= winningScore) {
declareWinner(“Player 2”);
}
}
function gameLoop() {
if (gamePaused) return;
context.clearRect(0, 0, canvas.width, canvas.height);
if (player1Up && player1Y > 0) player1Y -= 6;
if (player1Down && player1Y < canvas.height – paddleHeight) player1Y += 6;
if (player2Up && player2Y > 0) player2Y -= 6;
if (player2Down && player2Y < canvas.height – paddleHeight) player2Y += 6;
drawPaddle(0, player1Y); // Left paddle (Player 1)
drawPaddle(canvas.width – paddleWidth, player2Y); // Right paddle (Player 2)
drawBall(ballX, ballY);
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballY – ballRadius < 0 || ballY + ballRadius > canvas.height) {
ballSpeedY = -ballSpeedY;
}
if (ballX – ballRadius < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX + ballRadius > canvas.width – paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX – ballRadius < 0) {
player2Score++;
updateScore();
resetBall();
checkWin();
}
if (ballX + ballRadius > canvas.width) {
player1Score++;
updateScore();
resetBall();
checkWin();
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
This all worked great but when I went to put it into WordPress I realized that all of my game was in white and did not work on this white background. I was able to change the text and box border to black but never found a color property for the paddles or ball. Because of this, I gave Copilot my next prompt:
“Take this code and make it all black on white”
Prompt #4 Code
<!DOCTYPE html>
<html>
<body style=”margin: 0; display: flex; flex-direction: column; align-items: center; background: #fff; color: #000; height: 100vh; justify-content: center;”>
<div style=”text-align: center; margin-bottom: 10px;”>
<span id=”score”>0 : 0</span>
<button id=”startButton” onclick=”startGame()” style=”margin-left: 10px;”>Start</button>
<button onclick=”resetGame()” style=”margin-left: 10px;”>Reset</button>
<div id=”message” style=”margin-top: 10px; color: red; font-size: 18px;”></div>
</div>
<canvas id=”pongCanvas” width=”800″ height=”400″ style=”border: 2px solid #000;”></canvas>
<script>
const canvas = document.getElementById(“pongCanvas”);
const context = canvas.getContext(“2d”);
let paddleHeight = 100, paddleWidth = 10;
let player1Y = (canvas.height – paddleHeight) / 2, player2Y = (canvas.height – paddleHeight) / 2;
let player1Score = 0, player2Score = 0;
let ballX = canvas.width / 2, ballY = canvas.height / 2;
let ballSpeedX = 5, ballSpeedY = 5;
let ballRadius = 10;
let gamePaused = true;
const winningScore = 10;
document.addEventListener(“keydown”, keyDownHandler);
document.addEventListener(“keyup”, keyUpHandler);
let player1Up = false, player1Down = false, player2Up = false, player2Down = false;
function startGame() {
gamePaused = false;
document.getElementById(“startButton”).style.display = “none”;
document.getElementById(“message”).innerText = “”;
gameLoop();
}
function resetGame() {
player1Score = 0;
player2Score = 0;
player1Y = (canvas.height – paddleHeight) / 2;
player2Y = (canvas.height – paddleHeight) / 2;
resetBall();
updateScore();
gamePaused = true;
document.getElementById(“startButton”).style.display = “inline”;
document.getElementById(“message”).innerText = “”;
}
function updateScore() {
document.getElementById(“score”).innerText = `${player1Score} : ${player2Score}`;
}
function keyDownHandler(e) {
switch (e.key) {
case “w”:
player1Up = true;
break;
case “s”:
player1Down = true;
break;
case “ArrowUp”:
player2Up = true;
break;
case “ArrowDown”:
player2Down = true;
break;
}
}
function keyUpHandler(e) {
switch (e.key) {
case “w”:
player1Up = false;
break;
case “s”:
player1Down = false;
break;
case “ArrowUp”:
player2Up = false;
break;
case “ArrowDown”:
player2Down = false;
break;
}
}
function drawPaddle(x, y) {
context.fillStyle = “#000”;
context.fillRect(x, y, paddleWidth, paddleHeight);
}
function drawBall(x, y) {
context.fillStyle = “#000”;
context.beginPath();
context.arc(x, y, ballRadius, 0, Math.PI * 2);
context.fill();
context.closePath();
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = Math.random() * 6 – 3;
}
function declareWinner(winner) {
document.getElementById(“message”).innerText = `${winner} wins!`;
gamePaused = true;
document.getElementById(“startButton”).style.display = “inline”;
}
function checkWin() {
if (player1Score >= winningScore) {
declareWinner(“Player 1”);
} else if (player2Score >= winningScore) {
declareWinner(“Player 2”);
}
}
function gameLoop() {
if (gamePaused) return;
context.clearRect(0, 0, canvas.width, canvas.height);
if (player1Up && player1Y > 0) player1Y -= 6;
if (player1Down && player1Y < canvas.height – paddleHeight) player1Y += 6;
if (player2Up && player2Y > 0) player2Y -= 6;
if (player2Down && player2Y < canvas.height – paddleHeight) player2Y += 6;
drawPaddle(0, player1Y); // Left paddle (Player 1)
drawPaddle(canvas.width – paddleWidth, player2Y); // Right paddle (Player 2)
drawBall(ballX, ballY);
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballY – ballRadius < 0 || ballY + ballRadius > canvas.height) {
ballSpeedY = -ballSpeedY;
}
if (ballX – ballRadius < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX + ballRadius > canvas.width – paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX – ballRadius < 0) {
player2Score++;
updateScore();
resetBall();
checkWin();
}
if (ballX + ballRadius > canvas.width) {
player1Score++;
updateScore();
resetBall();
checkWin();
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
The last thing I noticed was that the arrow keys did not work as controls because they also moved the page up and down. I used the prompt:
“Change the player two controls to something else so it doesn’t try to scroll”
Prompt #5 Code
<!DOCTYPE html>
<html>
<body style=”margin: 0; display: flex; flex-direction: column; align-items: center; background: #fff; color: #000; height: 100vh; justify-content: center;”>
<div style=”text-align: center; margin-bottom: 10px;”>
<span id=”score”>0 : 0</span>
<button id=”startButton” onclick=”startGame()” style=”margin-left: 10px;”>Start</button>
<button onclick=”resetGame()” style=”margin-left: 10px;”>Reset</button>
<div id=”message” style=”margin-top: 10px; color: red; font-size: 18px;”></div>
</div>
<canvas id=”pongCanvas” width=”800″ height=”400″ style=”border: 2px solid #000;”></canvas>
<script>
const canvas = document.getElementById(“pongCanvas”);
const context = canvas.getContext(“2d”);
let paddleHeight = 100, paddleWidth = 10;
let player1Y = (canvas.height – paddleHeight) / 2, player2Y = (canvas.height – paddleHeight) / 2;
let player1Score = 0, player2Score = 0;
let ballX = canvas.width / 2, ballY = canvas.height / 2;
let ballSpeedX = 5, ballSpeedY = 5;
let ballRadius = 10;
let gamePaused = true;
const winningScore = 10;
document.addEventListener(“keydown”, keyDownHandler);
document.addEventListener(“keyup”, keyUpHandler);
let player1Up = false, player1Down = false, player2Up = false, player2Down = false;
function startGame() {
gamePaused = false;
document.getElementById(“startButton”).style.display = “none”;
document.getElementById(“message”).innerText = “”;
gameLoop();
}
function resetGame() {
player1Score = 0;
player2Score = 0;
player1Y = (canvas.height – paddleHeight) / 2;
player2Y = (canvas.height – paddleHeight) / 2;
resetBall();
updateScore();
gamePaused = true;
document.getElementById(“startButton”).style.display = “inline”;
document.getElementById(“message”).innerText = “”;
}
function updateScore() {
document.getElementById(“score”).innerText = `${player1Score} : ${player2Score}`;
}
function keyDownHandler(e) {
switch (e.key) {
case “w”:
player1Up = true;
break;
case “s”:
player1Down = true;
break;
case “i”:
player2Up = true;
break;
case “k”:
player2Down = true;
break;
}
}
function keyUpHandler(e) {
switch (e.key) {
case “w”:
player1Up = false;
break;
case “s”:
player1Down = false;
break;
case “i”:
player2Up = false;
break;
case “k”:
player2Down = false;
break;
}
}
function drawPaddle(x, y) {
context.fillStyle = “#000”;
context.fillRect(x, y, paddleWidth, paddleHeight);
}
function drawBall(x, y) {
context.fillStyle = “#000”;
context.beginPath();
context.arc(x, y, ballRadius, 0, Math.PI * 2);
context.fill();
context.closePath();
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = Math.random() * 6 – 3;
}
function declareWinner(winner) {
document.getElementById(“message”).innerText = `${winner} wins!`;
gamePaused = true;
document.getElementById(“startButton”).style.display = “inline”;
}
function checkWin() {
if (player1Score >= winningScore) {
declareWinner(“Player 1”);
} else if (player2Score >= winningScore) {
declareWinner(“Player 2”);
}
}
function gameLoop() {
if (gamePaused) return;
context.clearRect(0, 0, canvas.width, canvas.height);
if (player1Up && player1Y > 0) player1Y -= 6;
if (player1Down && player1Y < canvas.height – paddleHeight) player1Y += 6;
if (player2Up && player2Y > 0) player2Y -= 6;
if (player2Down && player2Y < canvas.height – paddleHeight) player2Y += 6;
drawPaddle(0, player1Y); // Left paddle (Player 1)
drawPaddle(canvas.width – paddleWidth, player2Y); // Right paddle (Player 2)
drawBall(ballX, ballY);
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballY – ballRadius < 0 || ballY + ballRadius > canvas.height) {
ballSpeedY = -ballSpeedY;
}
if (ballX – ballRadius < paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX + ballRadius > canvas.width – paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX – ballRadius < 0) {
player2Score++;
updateScore();
resetBall();
checkWin();
}
if (ballX + ballRadius > canvas.width) {
player1Score++;
updateScore();
resetBall();
checkWin();
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>