#21. Coding, 27 years later

I recall the summer of 1997 as the last one I spent coding. I had just finished my second year at university, during which we had been taught coding with Turbo Pascal. We spent that summer at my grandparents’ house because of some minor construction at home, and I needed to find a way to keep myself busy. So, I decided to code a Tetris game in Turbo Pascal.

Regardless of the outcome (spoiler: it worked!), I just loved the experience. To me, coding felt like solving a problem by breaking it down into elementary blocks that had to seamlessly fit together using efficient instructions. It combined problem-solving, logic, and tinkering – what else could an engineer ask for? But, for some reason, I never sustained that early passion after that summer: we didn’t have coding courses in subsequent years at university, Turbo Pascal was already pretty much obsolete (why the university taught an outdated coding system would make for a different post), and I didn’t have the time or patience to learn a more relevant language (C++) on my own.

Since then, the only time I’ve done anything close to coding was in my early years at Amazon (2014-2016), building occasional SQL queries to extract data and run basic business analysis. I still liked the logic involved in building queries and the underlying problem-solving it required, but I must admit it was less fun than I remembered from 1997. The context was radically different: there was a tighter time constraint which did not exist during my 1997 holiday, and a much larger knowledge gap to fill, both in terms of SQL language and the underlying data tables. This only increased my FOMO about whether I should (re)learn to code, at least as a hobby or maybe to keep up with an increasingly tech-driven world.

If any of the above resonates with you, I have some good news. Let’s fast forward to 2024.

Encouraged by a recent Amazon all-team event, conducted under the guiding principle of the company’s “Learn and Be Curious” leadership principle, and which included inspirational examples of how various Amazon teams had used (company-approved) GenAI tools to boost productivity, I felt it was time to overcome my personal FOMO about coding. I wanted to test how easy or hard it would be to build an executable piece of software (a game, in this case) using GenAI tools like ChatGPT or PartyRock.

The game is simple: as a player, your goal is to click inside a square that randomly moves every two seconds. To make it harder, as soon as you hover the mouse over the square, a new timer kicks in, and the square moves only a fraction of a second later, without waiting for the end of the full two seconds. If you're fast and manage to click on the square, you get a point. If you're not fast enough and miss it, you get no points and need to chase the square again to its new position. Total play time is 60 seconds.

Given my zero knowledge about coding (whatever I learned about Turbo Pascal 27 years ago is now both forgotten and irrelevant), building such an app from scratch would have taken me weeks. But with GenAI tools, it took me just three hours from start to finish, including all the inefficiencies along the way. Here’s how the process unfolded.

I started with PartyRock, using a very simple prompt for a basic version of the game: “I'd like to do a game. The goal of the game is to be able to move a pointer inside a square of 2cm x 2cm, and click inside it. However, to make it difficult, the square will change position in the screen 0.2 seconds after the pointer has reached inside it before clicking”. That prompt generated an interactive HTML5 canvas, a few plain-language code explanations, and some game instructions. Since I had no idea what an “interactive HTML5 canvas” was, I asked ChatGPT (“I have no idea of programming, but have generated an HTML5 canvas game. How can I try it?”), and got a simple answer explaining what it was and how to get the game running. The game wasn’t exactly what I’d asked for, as the square wouldn’t move at all until clicked on, but it was still impressive for just a few minutes of effort.

From there, getting to a finished version of the game took nine more iterations. I switched to ChatGPT 4o, as I found it easier to build on prior prompts. These iterations added features like a score counter, a success jingle for each point, a timer, and three levels of game complexity. They also helped with debugging, as the square would sometimes move before the two-second timer finished, even without a click. Debugging was probably the most frustrating part of the experience: I felt repeatedly misunderstood even if I described ChatGPT what was not right. It was just like when you try to get something fixed, and the person on the other side ignores what you want or simply does not get it:

• “[…] The square movement is still not right. When the player successfully clicks in the square, the square will move (which is OK), but then will move again before the new, re-set 2-second timer is finished. That's not right. Please correct.”

• “The issue remains. Please re-check!!!”

• “Always the same problem. Please fix.”

Still, the larger chunk of the three hours was not lost in asking ChatGPT to debug, but rather in myself trying to read and understand the code, hoping that I would be able to debug myself. In hindsight, that was useless, inefficient, and wrong.

Needless to say, when the game finally worked, I was both amused and amazed. Amused because it had been a fun experience that reconnected me with the 1997 Tetris exercise. Amazed because of how quickly it all came together. It also sparked many questions about the future of coding. Chief among them: Is coding dead as a discipline?

I don’t know, but I don’t think so. Building my game was a very simple, isolated exercise. I can’t imagine an AI tool generating complex, high-value software based on prompts from a tech-illiterate person and having that result in a widely successful product. Not in the short or mid-term, at least. The large number of dependencies between disparate systems, increasingly complex security requirements, and the human need to “feel in control” make it unlikely that we’ll leave software building entirely in the hands of machines anytime soon. Even if counterexamples exist, I believe they’ll be the exception rather than the rule—they won’t be widespread enough to kill coding as a discipline. Instead, as I mentioned in this previous post, mediocre coders will have a harder time. They’ll face competition from less experienced but curious and resourceful individuals who can build their own applications with GenAI tools. Meanwhile, strong, experienced, high-judgment coders will boost their productivity further by using these same tools.

I’m clearly not the first person to try “coding” with zero knowledge using GenAI tools. The web is filled with examples (here’s one by tech entrepreneur Martin Varsavsky). If you haven’t tried it yet, I encourage you to do so, even with a simple application. In the meantime, if you’d like to test the game I built, below is the code. You can copy-paste it into a text file (txt), change the extension to .html, and double-click to play.

Have fun (non-)coding!

---

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Click the Moving Square Game</title>

    <style>

        body {

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            background-color: #f0f0f0;

        }

        canvas {

            border: 1px solid black;

        }

        .score-timer {

            position: absolute;

            top: 10px;

            left: 10px;

            font-family: Arial, sans-serif;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <canvas id="gameCanvas" width="800" height="600"></canvas>

    <div class="score-timer">

        <span id="score">Score: 0</span> |

        <span id="timer">Time Left: 60</span>

    </div>

    <!-- Success sound -->

    <audio id="successSound" src="https://www.soundjay.com/buttons/button-11.mp3" preload="auto"></audio>

    <script>

        const canvas = document.getElementById('gameCanvas');

        const ctx = canvas.getContext('2d');

        const successSound = document.getElementById('successSound');

        const squareSizeCm = 2;  // Size in centimeters

        const pixelsPerCm = 37.7952755906;  // 1 cm in pixels

        const squareSizePx = squareSizeCm * pixelsPerCm;  // Convert size to pixels

        let squareX = Math.random() * (canvas.width - squareSizePx);

        let squareY = Math.random() * (canvas.height - squareSizePx);

        let score = 0;

        let timeLeft = 60;

        let gameTimer, moveTimer, mouseOverTimer;

        let mouseOverDelay = 500;  // Default for Beginner: 0.5 seconds

        let gameRunning = true;

        // Ask player for complexity level before starting the game

        function chooseLevel() {

            const level = prompt("Choose your level: 'Beginner', 'Intermediate', or 'Expert':").toLowerCase();

            switch (level) {

                case 'beginner':

                    mouseOverDelay = 500;  // 0.5 seconds

                    break;

                case 'intermediate':

                    mouseOverDelay = 350;  // 0.35 seconds

                    break;

                case 'expert':

                    mouseOverDelay = 150;  // 0.15 seconds

                    break;

                default:

                    alert('Invalid choice! Defaulting to Beginner.');

                    mouseOverDelay = 500;  // Default to 0.5 seconds for Beginner

            }

            startGame();  // Start the game after selecting the level

        }

        // Draw the square

        function drawSquare() {

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

            ctx.fillStyle = 'red';

            ctx.fillRect(squareX, squareY, squareSizePx, squareSizePx);

        }

        // Move the square to a new random location

        function moveSquare() {

            clearAllTimers(); // Ensure all timers are cleared before moving

            squareX = Math.random() * (canvas.width - squareSizePx);

            squareY = Math.random() * (canvas.height - squareSizePx);

            drawSquare();

            resetMoveTimer();  // Reset the 2-second movement timer after each move

        }

        // Clear all timers (moveTimer and mouseOverTimer)

        function clearAllTimers() {

            clearInterval(moveTimer);

            clearTimeout(mouseOverTimer);

            mouseOverTimer = null;  // Ensure mouseOverTimer is also reset

        }

        // Update score display

        function updateScore() {

            document.getElementById('score').textContent = `Score: ${score}`;

        }

        // Update timer display

        function updateTimer() {

            document.getElementById('timer').textContent = `Time Left: ${timeLeft}`;

        }

        // Start the game

        function startGame() {

            drawSquare();

            resetMoveTimer();  // Start the 2-second movement timer

            gameTimer = setInterval(() => {

                timeLeft--;

                updateTimer();

                if (timeLeft === 0) {

                    endGame();

                }

            }, 1000);  // Decrease time every second

        }

        // End the game

        function endGame() {

            clearInterval(gameTimer);

            clearAllTimers();  // Clear all timers

            gameRunning = false;  // Prevent further game actions

            alert(`Time's up! Your score is: ${score}`);

        }

        // Reset the 2-second movement timer

        function resetMoveTimer() {

            moveTimer = setInterval(() => {

                moveSquare();

            }, 2000);  // Set a new 2-second timer

        }

        // Check if mouse is inside the square

        function isMouseInsideSquare(mouseX, mouseY) {

            return mouseX >= squareX && mouseX <= squareX + squareSizePx &&

                   mouseY >= squareY && mouseY <= squareY + squareSizePx;

        }

        // Handle mouse movement over the canvas

        canvas.addEventListener('mousemove', (event) => {

            if (!gameRunning) return;  // Do nothing if the game has ended

            const rect = canvas.getBoundingClientRect();

            const mouseX = event.clientX - rect.left;

            const mouseY = event.clientY - rect.top;

            if (isMouseInsideSquare(mouseX, mouseY)) {

                if (!mouseOverTimer) {  // If there isn't already a mouseOver timer running

                    mouseOverTimer = setTimeout(() => {

                        moveSquare();

                    }, mouseOverDelay);  // Use the selected delay (0.15/0.35/0.5 seconds)

                }

            } else {

                clearTimeout(mouseOverTimer);  // Cancel any pending mouse-over movement if the mouse leaves the square

                mouseOverTimer = null;

            }

        });

        // Handle mouse clicks

        canvas.addEventListener('click', (event) => {

            if (!gameRunning) return;  // Do nothing if the game has ended

            const rect = canvas.getBoundingClientRect();

            const mouseX = event.clientX - rect.left;

            const mouseY = event.clientY - rect.top;

            if (isMouseInsideSquare(mouseX, mouseY)) {

                score++;

                updateScore();  // Update the score on successful click

                successSound.play();  // Play success sound

                moveSquare();  // Move the square immediately after the click

            }

        });

        // Prompt player to choose their level before starting the game

        chooseLevel(); 

    </script>

</body>

</html>