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

Combining Ad Data using Dataform in Google Cloud Platform
Interactive Dashboard Wine Farms in the Western Cape
Mines in Africa data visualization
Ultimate Ads Dashboard Looker Studio template
200 Food Additives and their Legal Status in Canada, the EU, and the US