Ask AI: Creating Pong in Javascript

A robot coded this game in less than a minute. Play it now: Pong

In this installment of Ask AI, I test out the capabilities of GPT-3's code completion. I had intended to test out Codex (code-davinci-002 or code-cushman-001), but I forgot to switch the model from text-davinci-002 and it still did remarkably. I only needed a few commands:
1. Write the html and javascript code for the game Pong; make it a one-player game and add a scoreboard.
2. Initialize the variable showingWinScreen as false

An error came up in the console onload because this variable didn't exist, so I initialized it

3. Center text horizontally on the Win Screen after game is over

As you can see, this wasn't fully successful in getting the text centered, but that just makes it avant-garde
To see the uncentered text, finish the game against the computer here (games are up to 3 points)

That third line leads well into some of the caveats:

This specific string of commands was only found after some experimentation (about ten minutes worth)
Pong could very well be part of the training data set for t-davs already - it didn't perform as well on things like creating functional flashcard or matching game apps
One time, I entered this text: "Write the html and javascript code for the game Pong." and got back this! A fully functioning auto-complete drop down menu for selecting any country in the world. I was really trying to figure out what this could possibly do with Pong when it started getting typed on my screen: /*An array containing all the country names in the world:*/ var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda",
Some semi-manual debugging was necessary to make the code functional (i.e. step 2 above). I initially tried to get it to work by stating things like "Correct this code", but at about 1,500 tokens (7 cents at current prices) a pop, I didn't do too many iterations
The game doesn't really work well on mobile, so if you're on the phone, use your computer instead
Sometimes centering some text on your webpage is still annoyingly hard

Overall, I was incredibly impressed once again with text-davinci-002. I'm in awe of its ability to create something fun to play so quickly. Especially in javascript, which doesn't seem to be Codex's absolute forte (it's python), but also that I didn't even use code-davinci-002 which is the actual model for code completion!

I urge you to play the final product: Pong

Below is the final html page that the AI wrote.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Pong</title>
    <style>
        #canvas {
            background: #222;
            width: 400px;
            height: 400px;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ballX = canvas.width / 2;
var ballY = canvas.height / 2;
var ballSpeedX = 5;
var ballSpeedY = 5;
var paddle1Y = 250;
var paddle2Y = 250;
var player1Score = 0;
var player2Score = 0;
var showingWinScreen = false;
const PADDLE_HEIGHT = 100;
const PADDLE_THICKNESS = 10;

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 ballReset() {
    if (player1Score >= 3 || player2Score >= 3) {
        showingWinScreen = true;
    }
    ballSpeedX = -ballSpeedX;
    ballX = canvas.width / 2;
    ballY = canvas.height / 2;
}

function drawNet() {
    for (var i = 0; i < canvas.height; i += 40) {
        colorRect((canvas.width / 2) - 1, i, 2, 20, 'white');
    }
}

function colorCircle(centerX, centerY, radius, drawColor) {
    ctx.fillStyle = drawColor;
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
    ctx.fill();
}

function colorRect(leftX, topY, width, height, drawColor) {
    ctx.fillStyle = drawColor;
    ctx.fillRect(leftX, topY, width, height);
}
</script>
</body>

</html>

Ask AI - The Internet Series

The author generated this text in part with GPT-3, OpenAI’s large-scale language-generation model. Upon generating draft language, the author reviewed, edited, and revised the language to their own liking and takes ultimate responsibility for the content of this publication.

Published: Saturday, August 13, 2022

The Internet

I'm the person who created this website and wrote this article! I sometimes like expressing myself, so I thought I'd mark out a little corner on the internet just for myself.