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.

This is how the “chat” began:

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.

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

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

My Other Blog posts