Frontend Engineering Meets AI
Collaboratively Crafting a Website with 2D Game using ChatGPT
In the realm of frontend engineering, collaboration can yield outstanding results. In this article, we will explore the captivating journey of a frontend engineer who teamed up with an AI language model to create a futuristic-themed landing page and 2D fighting game prototype. This unique partnership aimed not only to build an aesthetically pleasing and functional website, but also to design an entertaining game that integrated the developer’s personal interests.
As we delve into the step-by-step process, we’ll examine the challenges encountered, the iterative adjustments made, and the lessons learned from this remarkable collaboration.
Conditioning and requirements
As a starter, I want to note that for this experiment I have been using GPT-4 (March 2023 version). Before beginning the project, I set specific conditions for collaborating with ChatGPT. I emphasised the importance of asking questions before providing answers, ensuring a thorough understanding of my inquiries and the ability to better zone in on my needs. This approach helped foster a productive dialogue and allowed for a more targeted response to my requirements throughout the process.
For my initial requirements, I wanted to create a website that showcased my interests while also incorporating a playable game directly on the site. I desired a dark, futuristic theme based on hexagons, with running light animations between hexagons. The game was to be a mix of various elements, drawing inspirations, as well as my passion for boxing. I chose a colour scheme featuring purple and black, and I wanted the website to be responsive for mobile devices. Additionally, the site was to include links to my LinkedIn and Medium profiles. With these requirements in mind, the AI and I embarked on our collaborative journey to build the website and game prototype.
The journey
As a frontend engineer, I was excited to embark on this journey to create a futuristic-themed website and 2D game prototype in collaboration with an AI language model. We started by discussing my requirements and establishing a clear vision for the project.
The first task was to create the landing page, which was to be dark and futuristic with hexagonal elements and running light animations. ChatGPT provided me with the HTML structure, which I reviewed and validated. We then moved on to the CSS styling, making sure the design aligned with my preferences for a purple and black colour scheme. After that, we incorporated JavaScript functionality to handle the running light animations, making adjustments based on my feedback to ensure the desired outcome.
At this stage, ChatGPT did an outstanding work providing me copy and paste code that was working directly as expected, but it seems it has forgot some of the requirements especially on the animation side. So, with not so much trouble, we were able to come to an understanding step-by-step getting somewhat satisfying animations. In order to come to this point, I still had to point it out to it. And well, to be entirely honest I was a bit disappointed with the result after a bit of trying.
Once the landing page was complete, we shifted our focus to the game prototype. I wanted a fast-paced 2D fighting game that combined elements from my favorite games and hobbies. We began by creating a basic game structure using a Game class and a Player class. ChatGPT helped me implement basic player movement, jumping, and attack actions such as punch, kick, and special attack. We also added a collision system to prevent the character from moving outside the canvas and integrated gravity for a more realistic movement experience.
To enhance the gameplay experience, we introduced health and power meters using a StatusBar class. We then incorporated a second local player with separate controls and their own health and power meters. Throughout this process, we encountered challenges in achieving the desired game mechanics and aesthetics, but through open communication and iterative adjustments, we were able to overcome these obstacles.
This was actually quick, but there began the part where I had to really activate my engineer brain. We were not really in a collaboration anymore, but more like I was coaching it to the expected result. I had to explain to it that it forgot some functionalities or that sometime the given code did not work out as expected.
Moreover, when the project got this far, I had actually to really understand the content of the code to be able to debug it because of different variable names or to understand how to combine the code when ChatGPT as giving me only portions of code with ... existing code ... comments.
In the end, I did not go as far as going through the entire game, because I had already experienced enough to draw some conclusions on it. In addition to this, I admit that I’ve grown tired of only pointing out errors and where to go next while the need for debugging the given code been more and more necessary.
If you are interested in the output you can take a look at the deployed result on one of my Github Page (https://jmondaut.github.io/gpt4-website-2d-game/) or look through the code directly on the Github (https://github.com/jmondaut/gpt4-website-2d-game). I prefer to put a warning on this because I intentionally did not finalise the project and it will be buggy.
Conclusion
Looking back at this collaboration, I am impressed with the progress we made together on the website and game prototype. Even with the encountered difficulties, the process has been smooth enough to output result in a short timespan, at least a way shorter one than I could do it all by myself.
For developers at any level, this article offers valuable insights and inspiration for future projects that unite human expertise with AI-driven assistance. The process demonstrated the potential of human-AI collaboration in frontend engineering, and I look forward to exploring more creative possibilities in future projects. I think that communication between AI and humans can still be improved and for the time being we still need to make an effort of communication to obtain satisfying results.
I want to thank everyone that helped review this article, especially Adeline, Alexis, Holger and Nicolas.
If you found this article valuable or insightful, I’d greatly appreciate your support by following me, Jonathan Mondaut, here on Medium. I’m committed to sharing more engaging and practical content that will help you stay ahead in today’s fast-paced world. Don’t miss out on my upcoming articles — follow me now, and let’s learn and grow together!
