ChatGPT-4 made this game!

I asked ChatGPT-4 to make a game similar to the famous “Dinosaur Game” that you can play in Google Chrome.

Below is the game! Use the W key to make the square jump over the rapidly approaching green blocks!

How GPT-4 made the game

I what quite a lengthy and involved process to create the game. Below is part of the conversation I had with ChatGPT to try and get the game to work correctly on my site.

a screenshot showing a human interacting with ChatGPT-4 in order to create a simple game. ChatGPT-4 game

This is how the “chat” began:

asking ChatGPT4 to make a dinosaur game ChatGPT-4 game

After many different attempts, it managed to get it right!

Below is the code for the game, created within seconds by GPT-4.

document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById('gameCanvas');
    var ctx = canvas.getContext('2d');

    var dinoWidth = 50;
    var dinoHeight = 50;
    var dinoX = 50;
    var dinoY = canvas.height - dinoHeight;
    var dinoSpeedY = 0;
    var jumping = false;
    var gravity = 0.5;
    var cactusWidth = 25;
    var cactusHeight = 50;
    var cactusX = canvas.width;
    var cactusY = canvas.height - cactusHeight;
    var gameSpeed = 4;

    function jump() {
        if (!jumping) {
            dinoSpeedY = -12;
            jumping = true;
        }
    }

    function resetGame() {
        dinoY = canvas.height - dinoHeight;
        jumping = false;
        dinoSpeedY = 0;
        cactusX = canvas.width;
    }

    function gameLoop() {
        dinoSpeedY += gravity;
        dinoY += dinoSpeedY;

        if (dinoY > canvas.height - dinoHeight) {
            dinoY = canvas.height - dinoHeight;
            jumping = false;
            dinoSpeedY = 0;
        }

        cactusX -= gameSpeed;

        if (cactusX + cactusWidth < 0) {
            cactusX = canvas.width;
        }

        if (dinoX + dinoWidth > cactusX && dinoX < cactusX + cactusWidth && dinoY + dinoHeight > cactusY) {
            resetGame();
        }

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

        ctx.fillStyle = 'black';
        ctx.fillRect(dinoX, dinoY, dinoWidth, dinoHeight);

        ctx.fillStyle = 'green';
        ctx.fillRect(cactusX, cactusY, cactusWidth, cactusHeight);

        requestAnimationFrame(gameLoop);
    }

    gameLoop();

    document.addEventListener('keydown', (e) => {
        if (e.code === 'KeyW') {
            jump();
        }
    });
});

Chat GPT-4 also knew a variety of WordPress plugins to use, in order to get around issues where the code conflicted with WordPress.

Chat GPT discussing wordpress plugins

Also I was wondering which was the correct way to write ChatGPT-4. So I asked it. I had previously used GPT-4 to

me asking ChatGPT4 how to correctly spell its name

If you enjoyed this post you might like my other blog posts!

My Other Blog posts

Looker Studio connection map
North American Sports Teams Data Visualization
Senegal
Comparing DALL-E and Midjourney AI Images in 2024