How I built Flappy Bird Using ChatGPT within 10 mins

Read Time : 2:25 min

Hello Productive Minds!

Exciting news in AI! Google's Gemini Ultra has emerged as the new AI titan, surpassing ChatGPT-4 in recent benchmarks. As the founder of Productive AI, I'm thrilled to share this groundbreaking development that signals a transformative era in artificial intelligence.

This post will delve into the process of creating a full mobile game in just 10 minutes. Feel free to explore the steps, try out your version, and I'd appreciate your feedback after playing. Let's make game development an interactive and enjoyable experience together! 🚀🕹️

Your engagement is key! Share your insights and be part of the conversation as we navigate this dynamic AI landscape. Thanks for being part of the Productive AI community; together, let's continue unraveling the wonders of artificial intelligence.

Ida Khanna,
Founder ProductiveAI Club

Today’s Menu

• Google announced the launch of Gemini on Wednesday

• How I built a rendition of Flappy Bird Using ChatGPT

• Ever thought about your favourite actors from “The Office” would look like as playable characters in GTA 5?

Benchmark Tests Show Gemini Surpassing ChatGPT in Performance

Gemini, tested in areas like general reasoning, math, coding, and multimodal capabilities (image, video, audio), outperformed ChatGPT in almost all areas, except the "HellaSwag" test. According to Google, Gemini Ultra excelled in 30 out of 32 key academic benchmarks, surpassing existing standards in tasks ranging from image and audio processing to mathematical reasoning. Additionally, Gemini Ultra achieved a remarkable 90% score, becoming the first model to surpass human expertise in MMLU, which assesses knowledge and problem-solving in 57 diverse subjects, including math, physics, and ethics.

Section 1

How I built Flappy Bird Using ChatGPT

Getting the idea to Build Flappy Bird using ChatGPT.

As I played around with ChatGPT, my curiosity grew, and I wondered just how creative it could get. I got drawn into the idea of making a classic mobile game, thinking about the nostalgia it could bring and the chance to add a new twist. Excited to see what ChatGPT could do, I decided to put it to the test, specifically asking if it could help me create a game inspired by Flappy Bird – that game we all remember from the early days of mobile gaming. It was like taking a leap into the unknown, eager to discover the imaginative side of ChatGPT and explore its potential in game development.

Section 2

Our journey into building a game with ChatGPT began with a simple question: "Can you build Flappy Bird using HTML, CSS, and JavaScript?" To my amazement, ChatGPT not only answered in the affirmative but also provided the fundamental code for all three components. Excitement brimming, I swiftly copied and pasted the code onto an online editor, like CodePen.io, to witness the birth of the basic framework of the game.

However, our ambitions didn't stop there. The initial framework lacked the essential features that would elevate it from a basic rendition to a fully functional game. ChatGPT, proving its prowess, introduced additional features that transformed the game dynamics:

• Boundaries and Collision Detection:

  • Ensuring the bird stayed within the canvas boundaries was paramount. ChatGPT suggested modifications to the code, implementing a mechanism that terminated the game if the bird ventured outside the canvas or collided with any pipes. This added a layer of challenge and strategy to the gameplay.

  Game Over Notification and Retry Button:

  • I didn't just focus on gameplay; I had to address the user experience too. After implementing the collision detection, incorporating a "Game Over" notification upon the end of each round. To enhance player engagement, a retry button was added, allowing users to seamlessly jump back into the action.

  Interactive Game Start:

  • To enhance user interaction, I had to add a feature where the game would commence only when the player clicked on the screen for the first time. This not only added an element of control for the player but also ensured a deliberate and engaging start to each gaming session.

• In a fascinating exchange of ideas and code snippets, ChatGPT evolved our game from a rudimentary structure to a feature-rich experience. With each recommendation seamlessly integrated into the code, the game's complexity grew, showcasing the symbiotic relationship between human intent and AI implementation.

Section 3

Increasing the visual features in the game:

After this, ChatGPT once again gave me the updated code and also asked me to provide the URLs, after providing them, the game was visually stunning and really fun to play.

Our journey through game development with ChatGPT took an exciting turn when we aimed to enhance the visual appeal of our Flappy Bird rendition. Armed with a desire for a more immersive experience, I prompted ChatGPT with three distinct requests, and the results were nothing short of transformative:

Image Integration for Aesthetic Flourish:

• Expressing a desire to elevate the game's aesthetics, I requested the replacement of the default bird, pipes, and canvas background with images from specific URLs. ChatGPT, rising to the challenge, not only provided the updated code but also guided me through the process of seamlessly integrating these images. The result was a visually stunning game that now featured a unique and personalized touch.

Scoreboard Integration for Progress Tracking:

• Recognizing the importance of tracking progress and adding an element of competition, I prompted ChatGPT to incorporate a scoreboard. Positioned elegantly at the top right corner of the canvas, the scoreboard dynamically increment with each successfully crossed pipe. This addition not only heightened the competitive aspect of the game but also provided players with a tangible measure of their success.

Visual Enhancements Beyond the Canvas:

• Going beyond the confines of the gameplay, I sought to add a patterned border to the canvas and replace the background outside of the canvas with a gradient. ChatGPT, with its keen eye for design, not only suggested the code modifications but also asked for specific details to generate a visually harmonious backdrop. The result was a game environment that not only immersed players during gameplay but also created a visually appealing setting beyond the immediate play area.

What my game finally looked like:

The prompts I gave where:

1.I want to replace the bird, pipes and the canvas background with images provided in the URLs.

2.Add a scoreboard on the top right corner of the canvas that increments by one for each pipe that is successfully crossed.

3.Add a pattern border to the canvas and replace the background outside of the canvas with a gradient.

After this, ChatGPT once again gave me the updated code and also asked me to provide the URLs, after providing them, the game was visually stunning and really fun to play.

The Office x GTA-V

Why did Dwight Schrute refuse to play GTA 5?

Because he couldn't find the "Assistant to the Regional Manager" job title in Los Santos!