Assistive Coding: ChatGPT vs Gemini

I asked OpenAI ChatGPT and Google DeepMind Gemini to create a dynamic board game with just 5 prompts. I was surprised that Google's Gemini dominated it 4/5!

For my experiment, I've used the free version of ChatGPT (3.5) and Gemini (Pro) only. I wanted to know which one is better in terms of "Assistive Coding" and see how viable it is to create a simple program from scratch.

?? Prompt #1

Create a board game like an upgraded and dynamic version of chess using plain HTML5, CSS, and Javascript only that can be deployed to Google Firebase and accessible to any internet browser

• The board will have 9x9 squares and should be drawn using pure HTML/CSS/Javascript. Each square would have its own property whether a board character or an object is present on that square. A square can be occupied by a board character by a “move” action or by an object created by a board character’s “skill” action
• There will be 2 Players. Each player will have 2 board characters on each side and one castle in the middle of their side.
• It is also a turn based game similar to chess each but each turn will end if all the board character’s on the player side have finished an “action”.
• During a player’s turn, each board character can perform one “action” only. They can choose to “move” to a target square, “attack” a target square, or use a “skill”
• There are 3 skills per board character. The skills vary for each character but there will be a skill to create an object on a target square. The 3rd skill can only be used once but it will create an object all around the character.?
• Each player will have a castle in the middle of their side that takes 3 “attacks” to win the game.?
• The game should be playable on my local browser for now so I can test it
• I have a local environment using the “Ionic Framework” that can be deployed to Google Firebase anytime. If you know Ionic Framework, use this framework. If not, you can use plain CSS.
• Since it is a web application, make sure the design is responsive to mobile devices

↘Results:

ChatGPT

• Responded with a simple HTML, Javascript functions but no implementations at all

Gemini

• Responded with a revised version of my requirements. It was not clear for him that I needed codes

?Winner: ChatGPT. It understood the assignment very well and Gemini, not so much

?? Prompt #2

"Create the HTML, CSS, and Javascript codes for all of these requirements that I can run on my computer"

↘ Results:

ChatGPT

• Generated the codes but they are still functions without implementations
• Generated a separate CSS and JS output but it was not used in the HTML head

Gemini

• Generated the codes with working Javascript functions
• The CSS and JS file was also created separately and was used in the HTML head

?Winner: Gemini, by a mile! It already has a sense of what I’m trying to do while ChatGPT seems to be still just giving away guidelines at this point. The screenshots from the output of each is way different in favor of Gemini.

?? Prompt #3

"Improve the existing code. Add a function so that I can move the board character pieces on the board. The move should be one square at a time per board character. "

↘ Results:

ChatGPT

• Added a new line in the CSS file whenever a square was selected
• Created a variable in the JS file to represent a selected character with 3 additional functions to check if the move is valid, to move, and to update the square highlighting
• So far so good. However, nothing is working up to this point. I can see that the HTML squares have updated “id” props that represents its location but the listeners are not working at all

Gemini

• Updated the existing “moveCharacter()” function and the existing event listeners for each square. It also created a new function called “isMoveValid()” used inside the move function.
• The codes generated are much better. However, it is not working completely after I updated the codes on my local

?Winner: Still Gemini. The functions are detailed and complete. Though it is not working, I can see where the bug is but chose not to fix it.

?? Prompt #4

"Improve the existing code. The player should be able to drag and drop the board characters they control during their turn. The board should highlight in green all the valid squares they can drop the character to move into"

↘ Results:

ChatGPT

• Created a new CSS for the squares that is a valid move
• Updated the “createBoard()” function to add attributes/listeners to each square to make it draggable
• Created 5 additional functions for the drag/drop functionality and updated the “isValidMove()” function
• I can do the drag/drop (the animation on the mouse is working) but since the board itself seems to be not working from the start, nothing is happening at all

Gemini

• Updated the HTML code to add props to the game-board div and the characters listeners to add the drag/drop events
• Created 4 additional functions for the the drag/drop functionality
• Created 2 additional listeners for the valid-move-highlight events
• I can do the drag/drop as well nothing is working too with errors on all the drag/drop events

?Winner: Gemini. It created a separate listener for the “valid-move-highlight” move which is the correct way to do it.

?? Prompt #5

Improve the existing code. The game will start on its own after a 3 seconds countdown timer once it’s loaded. The board characters will move towards the square where the other player’s castle is during their turn automatically. The board characters will choose the best path towards the enemy castle avoiding contact with the other board characters. Once a board character hits the enemy castle 3 times, the game will stop and show who is the winning player. Add console logging on each function entry and exit and properties of the characters such as current position so I can monitor what is happening just by looking at the browser logs

↘Results:

ChatGPT

• Created 4 variables to hold different character props like position and state and 9 different functions to auto play the entire thing
• It is still not working even though I added some console logging to check if something is happening in the background.

Gemini

• It created a new html div for the countdown timer itself and centered it on the page using its own CSS
• Created 4 additional functions to play the game itself
• Created 4 additional functions that acts like an AI to learn the current state of the board and determine the best path towards the enemy castle

?Winner: Clearly Gemini. It even created its own div for a customized timer but what surprised me the most is it created an "AI" logic to find the best path which I did not specify on any of my request but it already determined I needed it.

??Conclusion

1. From an “Assistive Coding” point of view, Gemini (Pro) seems to be better overall. The only advantage I can see from ChatGPT 3.5 is that it displays the codes in its own readable and copy-friendly html div.
2. The errors that I got from directly copying and running the codes seems to be easy to fix if? you got the right knowledge and experience. I did not invest time on debugging since it’s part of the test to see if they can code themselves to victory.
3. Even though the codes are easy to understand and implement, intermediate knowledge of pure HTML/CSS/JS is a must to maximize the assistive coding offered by both tools.

My next step is to try to finish the board game with a different set of prompts this time which entirely depends on the output of the previous prompts. I believe this will increase the quality of the output overall and it might do what I wanted it to do.

PS: If someone is interested in the complete code generated by each AI, let me know so I can upload it on GitHub ;)