How I Built My First JavaScript Game with Zero JavaScript Experience (Using ChatGPT)

I’ve been an active user of ChatGPT since it was released to the public to simplify my life.

Four years ago, I worked with the GPT-2 model, and it wasn't that great. To be precise, I once chatted with it about feeling down, and GPT-2 suggested I book tickets to Madrid and leave my family. A bit extreme, I agree.

That’s why I’m so impressed by the quality of responses and the range of tasks ChatGPT can perform today. In just four years, it has come a long way.

I use it for many tasks—from text summarisation and spellchecking to developing study plans, drafting legal contracts, or checking contracts and highlighting key clauses. It even acts as my personal therapist and coach, suggesting exercises and activities to help me feel better.

But in this newsletter, I want to talk about how, in just 7 minutes, I created a game in JavaScript with zero prior knowledge of Java.

Coding a Game

I decided to test the new version of ChatGPT with the Canvas model and asked it to create a TicTacToe game for me. Since I wasn't sure what the best prompt would be, my initial prompt was:

1. I want you to create a fully functioning a tictactoe game. Help me to write you a prompt so you can execute this task as best as possible

ChatGPT responded with the following prompt:

Prompt:

"I need a Python program that implements a fully functioning Tic-Tac-Toe game. The game should have the following features:

1. It should be playable by two players taking turns.

2. The game board should be displayed in the console, showing the current state after each move.

3. Players should be able to select where they want to place their mark (X or O) by entering the position on a 3x3 grid (e.g., positions numbered 1-9).

4. The game should check for a win condition (three in a row horizontally, vertically, or diagonally) or a draw.

5. If a player wins or if it's a draw, it should display the appropriate message and offer the option to restart or end the game.

6. Include input validation to handle incorrect or unavailable positions and notify the player to try again.

7. It should include a simple AI for a single-player mode against the computer, where the computer makes moves intelligently.

Write clean, well-commented Python code so it is easy for me to understand and modify later. The code should use functions where appropriate to maintain modularity."

I copied the prompt exactly and waited for the magic to happen.

The initial version was good, but I requested some additional features.

2. additional features Game Setup: 1. **HTML File: index.html** - Create an HTML file with a canvas element sized 800x600 pixels. - Display a ‘Game Over’ message when the game ends. Generate a zip file containing the HTML and JavaScript files

ChatGPT created the files but didn't make them downloadable. So, my next prompt was:

3. how can I download it

At this stage, I received a zip file, and by clicking on the .html file, I was able to play TicTacToe.

This version required two players (which was clearly stated in the initial prompt, that I copied without making any adjustments), but my goal was to play against the computer, so I needed to make some modifications. My next prompt was:

4. can we make a modification, I want to be able to play against a computer

After ChatGPT finished with this version, I asked for an updated version of my zip file

5. please generate a new zip file for me to download

The game was good, but I kept winning. So, my next step was to ask for modifications to make the game more challenging:

6. can we add more complexity to this game, seems like I always win. generate a new zip file for me to download

And that was it—I had a fully functioning game created in just 7 minutes!

You can continue making modifications, such as adding colors, complexity levels, or a scoring board.

As my final prompt, I asked ChatGPT for the perfect prompt to recreate the game as it is now:

can you now create a prompt that I should have used to achieve this result

And this is the final result:

I need a web-based Tic-Tac-Toe game that can be played either against another player or against a computer with a challenging AI. The game should include the following features:

1. HTML Setup:

   • Create an HTML file named index.html that contains a canvas element sized 800x600 pixels.

   • The game should be visually appealing, and the grid and moves should be clear and easy to understand.

2. JavaScript Game Logic:

   • Create a game.js file that handles the game logic and displays it on the canvas.

   • The game should support both two-player mode (where players take turns) and single-player mode against the computer.

   • The computer should use a smart strategy to make the game challenging:

     • First, try to win if there is a winning move.

     • If the player is about to win, block their move.

     • Take the center if it's available.

     • Take a corner if possible.

     • If none of the above are available, take a side.

3. Gameplay Requirements:

   • The game board should be displayed in the canvas, updating with each move.

   • Players should be able to click on the grid to place their mark ("X" or "O").

   • The game should detect win conditions (three in a row horizontally, vertically, or diagonally) and display a "Game Over" message, indicating the winner or if the game is a draw.

   • Provide an option to reset the game after it ends.

4. Code Quality:

   • Write clean, well-commented JavaScript code to ensure it is easy to understand and modify.

   • Use functions where appropriate to maintain modularity, separating concerns like drawing the board, handling player moves, and managing the AI's logic.

5. Additional:

   • Package the HTML and JavaScript files in a zip folder for easy sharing and deployment.

I don’t think AI will ever replace humans, but it can be an incredible supplement to our work and daily life. This experiment is a perfect example of how AI can help us accomplish things we never thought possible—even with zero prior experience. Let’s work smarter, not harder.

Keep pushing 💪

Karina

Need more help?

Just starting with Python? Wondering if programming is for you?

Master key data analysis tasks like cleaning, filtering, pivot and grouping data using Pandas, and learn how to present your insights visually with Matplotlib with ‘Data Analysis with Python’ masterclass

Book 1:1 coaching with me or get CV, Portfolio and LinkedIn Review.

More from me: YouTube | TikTok | Instagram | Threads | LinkedIn