Uploaded March 2023 | Updated September 2026, 2 weeks ago
In this video I'll be coding a game with chat GPT. The game is an angry birds clone with much of the original functionality. We build this game using vanilla JavaScript and HTML Canvas. The video is unscripted and unedited so we see when Chat GPT is helpful and when not.
You can play the game on my website:
radufromfinland.com
The game has different levels and has a level editor as well!
Stay tuned until the end to watch my conclusion!
⭐TIMESTAMPS⭐
00:00:00 Introduction
00:01:02 Canvas project setup
00:08:07 Coding the cannon
00:26:17 Coding the bird character
00:45:53 Tree background element
00:56:48 Game Mechanics
01:06:12 Cloud background element
01:19:21 Character movement
01:22:16 Sun background element
01:26:36 Complex background generation
01:56:11 The bubble class (Chat GPT) and Gravity (Me)
02:22:35 Level creation
02:31:43 Collision detection
03:27:32 Procedural sounds
03:44:45 Conclusions
In this video I'll be coding a game with chat GPT. The game is an angry birds clone with much of the original functionality. We build this game using vanilla JavaScript and HTML Canvas. The video is unscripted and unedited so we see when Chat GPT is helpful and when not.
You can play the game on my website:
radufromfinland.com
The game has different levels and has a level editor as well!
Stay tuned until the end to watch my conclusion!
⭐TIMESTAMPS⭐
00:00:00 Introduction
00:01:02 Canvas project setup
00:08:07 Coding the cannon
00:26:17 Coding the bird character
00:45:53 Tree background element
00:56:48 Game Mechanics
01:06:12 Cloud background element
01:19:21 Character movement
01:22:16 Sun background element
01:26:36 Complex background generation
01:56:11 The bubble class (Chat GPT) and Gravity (Me)
02:22:35 Level creation
02:31:43 Collision detection
03:27:32 Procedural sounds
03:44:45 Conclusions
![3D Objects in JavaScript - No Libraries [Understanding AI - Lesson 11 / 15]](https://i.ytimg.com/vi/HAoFrPz6LiQ/mqdefault.jpg "3D Objects in JavaScript - No Libraries [Understanding AI - Lesson 11 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
In Lesson 11 of the Understanding AI course, Im thrilled to unveil the magic of 3D extrusions in JavaScript. Today, Ill guide you through the process of making elements pop up in the third dimension, a technique commonly known as extrusion. And when I say everything, I mean it – from buildings and cars to road borders.
But heres where it gets really exciting! Ill demonstrate how to move the camera behind our car, allowing us to see it in action, and share a trick often used in racing games to enhance the feeling of speed. Get ready for an eye-opening experience as I expose you to some really cool techniques that will elevate your game development skills.
Join me in this lesson where we explore 3D extrusions and dynamic camera movement in JavaScript, unlocking a new dimension in your self-driving car project. Like, share, and subscribe for more lessons on AI, game development, and cutting-edge programming concepts!
💻CODE 💻
https://github.com/gniziemazity/understanding_ai
Follow Along: 6. Camera Part 1
Code After This Lesson: 7. Camera Part 2
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Video about Speed: https://youtu.be/e9OriySqLjQ
#RacingGame #RacingGameJavaScript #3D #Pseudo3D #3DNoLibraries #3DJavaScript #JavaScript Lesson #Extrusion #Speed
⭐TIMESTAMPS⭐
00:00 Introduction
01:05 Extruding Buildings
07:49 Extruding Cars
10:07 Extruding Trees
10:56 Extruding Road Borders
15:17 View from Behind
16:59 The feeling of Speed
19:30 Removing the Other Cars
23:40 Full-Screen")
![A Virtual World - JavaScript Course: Lesson 10 / 11 [OpenStreetMap Tutorial]](https://i.ytimg.com/vi/IKwkOajkSHs/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 10 / 11 [OpenStreetMap Tutorial]
Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. The world editor we built is nice. Feels really fast to use, definitely minimizing the number of clicks. But you know what’s better than a few clicks?
⭐NO CLICKS!⭐
Lets learn about OpenStreetMap: how to query data from it using overpass turbo and how to parse it in our code. You’ll also learn about real-world coordinates, how they work and the geometry of our 3D world. 🌎
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
9. Integration = follow along
10. OpenStreetMap = code after this lesson
⭐LINKS⭐
https://www.openstreetmap.org
https://overpass-turbo.eu [ Note that overpass has also an API ;-) ]
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Emoji I used in the video⭐
🗺️✔️❌
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:01 Preparing to use OSM Data
05:55 OpenStreetMap and Overpass Turbo
12:53 Parsing OSM Data
16:19 Latitude and Longitude
24:29 Understanding Coordinates
25:34 Proper Scaling
34:46 One-way Road Segments
38:14 Optimization
42:50 Saving the World Failed (Partially)")
![Self-driving car - No libraries - JavaScript course [Lecture 2]](https://i.ytimg.com/vi/IxhrXKEVCsc/mqdefault.jpg "Self-driving car - No libraries - JavaScript course [Lecture 2]
Self-driving car - No libraries - JavaScript course [Lecture 2]")
