Using AI To Build A Game From Scratch (NO Experience)

Using Chat GPT to Build a Basic Video Game

In this video, the speaker attempts to use Chat GPT to build a basic video game using HTML, CSS, and JavaScript. The speaker has no prior coding knowledge and uses Visual Studio Code as their code editor.

Setting Up the Project

• Downloaded Visual Studio Code from code.visualstudio.com.

• Created a new folder for the project in Visual Studio Code.

• Chose to create a platformer game as it sounded like the most fun option.

Creating Files and Basic Structure

• Created three files in the project folder - index.html, style.css, and script.js.

• Copied HTML structure into index.html file from Chat GPT's instructions.

• Added basic styles to center canvas and set background color in style.css file from Chat GPT's instructions.

• Set up game loop using request animation frame and created functions to update game state and render objects on canvas in script.js file from Chat GPT's instructions.

Creating Game Objects

• Received code snippets for creating player object, platform object, physics properties (gravity, velocity), collision detection, player movement controls, collision detection level design polish, and testing from Chat GPT.

• Asked Chat GPT where to paste above code snippets into game code; received response with specific locations within original code.

Conclusion

The speaker successfully used Chat GPT to create a basic platformer game using HTML, CSS, and JavaScript. Chat GPT provided instructions and code snippets for setting up the project structure, creating files and basic structure, and creating game objects. The speaker was able to follow these instructions despite having no prior coding knowledge.

Integrating Snippets and Rendering the Player

In this section, the speaker integrates code snippets into their script.js file to render a player object on the canvas. They also discuss implementing player movement controls and collision detection.

Rendering the Player

• After integrating code snippets into script.js, a blue square appears on the canvas representing the player object.

• The speaker notes that they will work on making the player object move next.

Implementing Player Movement Controls

• The speaker is provided with code for implementing left and right movement controls for the player object.

• They run their index.html file but note that while they can move left and right, there is no up or down movement yet.

• The updated render function is provided to fix a trailing issue with the player object's movement.

Troubleshooting Jump Functionality

• Despite being given new code to try, the speaker still cannot get their player object to jump properly.

• They express frustration at not being able to spot and fix coding issues themselves.

Implementing Collision Detection and Level Design

In this section, the speaker discusses implementing collision detection between the player object and platforms in order for them to stand on them without falling through. They are also provided with code for level design.

Implementing Collision Detection

• The speaker is given code for implementing collision detection between their player object and platforms in order to prevent falling through them.

• They copy and paste this code into their script.js file but note that it does not seem to have made any difference yet.

Level Design

• Code for level design is provided by chatgpt after the speaker requests help debugging their existing JavaScript code.

• The new JavaScript code is copied over but does not appear to have fixed any issues yet.

Creating a Side-Scrolling Platform Game

In this section, the speaker discusses their progress in creating a side-scrolling platform game and seeks assistance with coding collision detection and jumping mechanics.

Updating Collision Detection

• The speaker has a green floor, blue player that moves left and right but doesn't jump, green grass floor, and a couple of platforms.

• The player can walk through the platforms instead of colliding with them.

• The speaker requests help with updating collision detection on the platforms.

• Replace all existing code with new code provided by GPT.

Debugging Jumping Mechanics

• The player can only jump when it reaches the edge of a platform; they cannot jump while in the middle of a platform or while on the ground.

• The speaker requests help debugging this issue.

• Replace everything in the update section to fix this issue.

Changing Player Character

• The speaker replaces the square player character with a stick figure using new code provided by GPT.

Continuing Progress Off-Camera

• Due to file size limitations, the speaker stops recording after four hours of footage.

• They continue working on the game off-camera and return to chat GPT for assistance.

Creating a Side-Scrolling Game

The speaker describes how they created a side-scrolling game using GPT Playground.

Adding Platforms and Code Snippets

• The speaker initially had three platforms and wanted to create a side-scrolling game with new platforms appearing as the player moves to the right.

• They asked for help on where to paste the new code snippets provided by GPT Playground.

• BT helped them place the code snippets in their existing code, allowing them to add coins throughout the level for players to collect.

Prettifying the Game

• The speaker went to Mid Journey to create a background image for their game.

• They asked GPT Playground how to implement an image for the background of their game that would be full width and loop as the player moves.

• After pasting in some new code, they were able to make the background take up the full height of the canvas.

• The speaker continued going back and forth with GPT Playground, adding a reset button, changing their character's appearance, and adding more color to platforms until they achieved their desired game.

Final Product

• The speaker added various features such as a high score, white borders around platforms, and parallax effect between foreground and background.

• They achieved their desired game by asking GPT Playground what worked or didn't work and making adjustments accordingly.

Animating Character Legs

In this section, the speaker discusses their efforts to animate character legs in a game using GPT. They share their code and ask for help in fixing the animation.

Troubleshooting Animation Code

• The speaker has been trying to get GPT to write code that animates character legs.

• After two hours of troubleshooting, they still haven't been able to make it work properly.

• The legs move correctly when the character is on the floor but not on the platform.

• Giving more context about the problem helped them get better solutions from GPT.

Walking Animation Success

In this section, the speaker shares how they finally got their walking animation to work and what steps they took.

Steps Taken for Walking Animation

• The speaker pasted their entire JavaScript code into OpenAI Playground and set maximum length to maximum.

• They gave as much context as possible about the problem they were facing with leg animation.

• Finally, after many attempts, they got their player character to animate like it's walking while on a platform.

Adding Explosion Effect

In this section, the speaker talks about adding an explosion effect when a player hits lava in their game. They discuss issues with generating new code using OpenAI Playground and share how they overcame them.

Generating Explosion Effect Code

• The speaker created an explosion image using Photoshop and exported it as a PNG file.

• They asked GPT4 how to add a flame explosion when a player hits lava and followed its instructions.

• While waiting for the code, they beat their personal high score at 227.

Learning to Code with GPT-3

In this section, the speaker talks about their experience using GPT-3 to learn how to code. They discuss the process of going back and forth with GPT-3, copying and pasting code, and learning through immersion.

Using GPT-3 to Learn How to Code

• The speaker spent a lot of time going back and forth with GPT-3, copying and pasting code without changing any of it themselves.

• They were no longer able to use Chat GPT because the message they submitted was too long.

• The speaker ended up spending a little over $20 on their GPT-4 usage.

• Through this process, the speaker learned how to code with JavaScript as they went along.

Benefits of Learning with AI Tools

• The back-and-forth process helped build a game while also teaching the speaker how to code in JavaScript.

• While they couldn't code anything from scratch at that moment, they felt like they could better spot issues in existing JavaScript code.

Future Plans for Game Development

• The speaker plans on making more games using Unity or Unreal Engine and seeing how much AI tools can help them create more complex games.