Writing a Tic Tac Toe game purely from ChatGPT

VXRL
6 min readFeb 21, 2023

--

Researcher: {Alan Ho}

Many of you have already been using ChatGPT for quite a while and probably able to get what you needed from the response.

Using ChatGPT for programming is quite popular, many developers use the responses as templates or even writing the full source code. Today I am going to share my experience for using ChatGPT to write a Tic Tac Toe in HTML, CSS and Javascript. What I am doing is to only copy and paste, without human modifying any of the source code generated by ChatGPT.

Ok, Let’s start, at the very beginning, I just gave a simple instruction.

I guess many of you have experienced that, ChatGPT always stops in the middle when generating the source code. So I just asked it to “finish it”, but this does not always work. 😅

partial of the HTML code
partial of the javascript code and ChatGPT answer

Eventually it generated HTML + CSS and Javascript, apparently it should be working for two players taking turns to play.

So next step, I tried to give the instruction to write the game for player vs computer.

As expected, it stopped in the middle. And got to find some ways to complete the code.

And many times, for ChatGPT to write the remaining code, it often simply re-writes from the top, or the new code does not match the code it generated just now. So after several rounds of writing and rewriting, I decided to ask it to write it in one file, and javascript functions separately.

The following HTML and CSS could be freezed.

So now I could focus on the javascript part.

Somehow it eventually printed out the full code, but after testing, the game board did not really work. Hence I talked to it and asked it to fix. (a lot of patience is need. 🙂)

We had a lot of conversation on `checkForWin` function.

Eventually I posted the code snippet to remind it again.

Finally, it did correctly and version 1.0 was ready. You may try it yourself.

It only makes random moves, without any thoughts to win. Therefore, for the next step, I posted the source code and asked it to make a winning move.

First it only described the source code that i posted, then I asked it again.

WTF it replied me with python?

However it still kept giving me codes that did not work.

Unfortunately it still did not work. And ….python again???

So after this long conversation, here is the version 2.0, it attempts to win and block 🤔 (looks like still quite random)

Ok, let’s make the final adjustment. Now it seems to make the move in a random way (although it’s less random than version 1.0), see how it goes after instructing it more precisely.

I posted my source code again, and asked.

Python again, why? Anyway, ask it to write in javascript again. Finally it’s giving something constructive.

After a bit of conversation, I got the feeling that the program should be working properly soon … trying to fix the functions one by one.

The logic should be working now, then we asked it to make some decoration

Finally, version 3.0, please try it!

After a lot of conversation (and frustrations), ChatGPT eventually wrote a simple player-vs-computer tic tac toe game without any human code modification.

Look like when doing such “development”, need to find a way to ask ChatGPT to write the missing codes correctly, sometimes need to provide the code snippets to remind ChatGPT. And sometimes if you just use it too much, you will be reaching the hourly usage limit…

There may be other ways that can ask ChatGPT to write a proper program more efficient, please feel free to share :)

--

--

VXRL

VXRL Team is founded by group of enthusiastic security researchers, providing information security services and contribute to the community. https://www.vxrl.hk