English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 55 lectures (46h 38m) | 38.74 GB
Master JavaScript, HTML, CSS and Web Development using Game Programming – Build Games/Apps with ChatGPT and Gen AI!
“Fast and Furious Game Development with JavaScript and AI” was created to take anyone with or without experience in coding, teach them HTML5 + CSS and JavaScript from the ground up using Graphics and Game Development as the platform to learn. And then with the fundamentals in hand, we take one of the most exciting journeys in computing and we learn how to use Generative AIs like ChatGPT to build working games! Thus, this is really three courses in one.
In the first part of the course, we start with how the internet and HTML work with respect to browsers. Then we start off with a “Hello World” in HTML and build our first web page. From there, lecture after lecture, we dig deeper and deeper into the most important features of HTML5 + CSS, so you can create basic websites with formatting, styling, controls and more. So, if you have never made a website in your life, you will learn step by step in this part of the course. Even if you are a seasoned programmer that has never got around to learning HTML5 + CSS you will enjoy this section.
In the next part of the course we cover JavaScript from the ground up, we will learn the basics of variables, math, conditionals, loops, functions, and more. As the lectures progress, we cover more and more advanced subjects like event driven programming, recursion, and object oriented programming in JavaScript. Then we switch gears and start learning about computer graphics and game development as we continue to learn JavaScript features. We learn how to draw on the HTML5 Canvas, how to animate sprites, and perform simple physics simulations. Of course, along the way, we learn how to interface with the keyboard and mouse and how to integrate our HTML pages (websites) with JavaScript and how to send messages between them. Additionally, we learn how to manipulate the DOM (Document Object Model) which is the tree like data structure that represents your webpages. Learning a new language can be a daunting task, but learning a new language using graphics and game development as the platform to learn is the only way to do it! I promise it won’t be boring.
In the last part of the course, we delve into AI and ChatGPT. At this point in the course, you’re a skilled JavaScript programmer with all the tools needed to make complete games. However, instead of making games by ourselves, we are going to learn to collaborate with the most advanced AI in the world (arguably) ChatGPT. You will learn how to “Prompt” ChatGPT to create working skeletons of classic arcade games. You will learn how to steer the AI to get it to generate working code along with its limitations through “Prompt Engineering”. Then after ChatGPT gives us a working skeleton of a game then you and I will take that game and finish it with what we have learned and add graphics, sound, music, and more game play features. We will do this over half a dozen times as we re-create classic games that are fun to play as well as amazing achievements for an AI to create. We will build these games and more:
- Pong
- Breakout / Arkanoid
- Snake
- Flappy Bird
- 3D Wire Frame Space Shooter
- Space Invaders
- Blackjack
- RetroRift (ChatGPT original)
Finally, the course also comes with free electronic PDF copies of some of my most classic game development books that have taught millions of students and professionals game development over the years:
- “Tricks of the Windows Game Programming Gurus”
- “The Black Art of 3D Game Programming”
- “Tricks of the 3D Game Programming Gurus”
In closing, this course takes the hottest subjects in computing; JavaScript + HTML5, Game Development and Artificial Intelligence with ChatGPT and blends them together in a way no one has ever done before making learning these subjects fun and engaging. And with the knowledge you learn, you can deploy games and apps that run on billions of devices that support browsers. That’s a Super Power you want to have in your toolbox!
What you’ll learn
- Students will learn HTML5 + CSS (Cascading Style Sheets) + JavaScript from the ground up. As well as touch on many Computer Science topics.
- Students will learn about many of the new exciting features of the HTML5 APIs such as the Canvas for graphics, asynchronous and high performance coding.
- Students will learn the basics of Computer Graphics including rasterization, how to draw objects, bitmapped graphics, and how to create a “Sprite” engine.
- Students will learn how to load and play sounds and music in their JavaScript programs.
- Students will learn how to use numerous tools such as graphics and sound editors to manipulate content for their games.
- Students will learn how to get user input from the keyboard and mouse to control their game characters.
- Students will learn how to use LLMs (Large Language Models) and Generative AI like ChatGPT to help them write fully functioning games.
- Students will learn Game Development by developing over half a dozen classic video games with the help of AI and ChatGPT.
- And finally, students will be able to put all these things together and create amazing games of their own.
Table of Contents
The Starting Line
1 Let’s Get Ready to Rumble Introduction, Setup and Installation
HTML and CSS Crash Course
2 Intro to the Web HTMLCSS Basics and the DOM
3 Building our First Web Page and Using Online Editors
4 HTML Primer – Getting to Know the Basic Tags
5 Adding a Bit of Drama with Style, Div, and Span Tags
6 Embedding Images and Sounds in HTML
7 Getting Things Done with Buttons and Input Controls
8 Working with Forms and Introduction to CSS (Cascading Style Sheets)
9 Exploring More Advanced CSS Styling and Animation
JavaScript and Graphics Primer
10 JavaScript Primer++ – Getting to Know Types, Objects, Variables, Math and Debug
11 JavaScript Debugging Techniques and External Scripts
12 Working with Basic Types Part I – Strings, Arrays, Number, and Math Objects
13 Basic Types Part II – Strings, Arrays, Bit Operations, Number and Math Objects
14 More Math, Arrays, and Functions – Part III
15 Advanced Arrays, Functions, and Interacting with the DOM
16 Making Decisions with if – Part I
17 Advanced Conditionals and the Switch Statement – Part II
18 Repeating Code and Looping with for and while
19 Reusing Code with Functions
20 Advanced Function Concepts – Anonymous Functions, Callbacks and Recursion
21 Introducing Objects Part I – And Other Things That Go Bump in the Night
22 Objects Part II – Advanced Concepts, Methods, Properties, and Constructors
23 Using Pre-Written APIs and Objects and Benchmarking with Time and Date Objects
24 Interfacing to the HTML DOM Part I Fundamentals, Handlers and Node Manipulation
25 Interfacing to the HTML DOM Part II Adding Elements and More Event Handlers
26 Graphics and Animation with the Canvas Part I Points, Lines, Pixels, Color
27 Graphics and Animation Part II – Understanding Graphics Contexts and Paths
28 Graphics and Animation Part III – Fundamentals of Animation and Basics Physics
29 Graphics and Animation Part IV – Parallax 3D Star Field and Working with Fonts
30 Rendering Bitmaps and Sprites Understanding Bitmap Formats & Graphical Editors
31 Bitmaps and Sprites Part II – Building our Sprite Engine, Sprite Sheets and More
32 Bitmaps and Sprites Part III – Finishing our Sprite Engine & Advanced Animation
33 Hacking the Keyboard – More sprites, Animation Tools and User Control Schemes
34 Hacking the Keyboard Part II – Advanced Sprite Character Animation and Effects
35 Interfacing to the Mouse – Reading the Mouse Position, Buttons and Events
36 Interfacing to the Mouse Part II – Porting a 3D Game Raiders-3D with Mouse
37 Playing Sound FX and Music in JavaScript
38 Sound Design and Engineering – Adding sound FX and Music to Raiders 3D
Using ChatGPT and other Generative AIs as Coding Assistants
39 Using ChatGPT & LLMs as Coding Assistants – Prompting, Code Generation and Demos
40 Demos of ChatGPT Generated Games – A Preview of What’s Possible with ChatGPTAI
Game Development with ChatGPT and JavaScript
41 Classic “Pong” Part I – Using Generative AI to Code a Version of Pong
42 Classic “Pong” Part II – Adding Code, Graphics, Sound and Music
43 Building “Breakout” Part I – Using Generative AI to Code a Version of Breakout”
44 Building “Breakout’”Part II – Adding Code, Graphics, Sound and Music
45 Building “Flappy Bird” Part I – Using Generative AI to Code “Flappy Bird
46 Building “Flappy Bird” Part II – Adding Code, Graphics, Sound and Music
47 Building “Snake” Part I – Using Generative AI to Code a Version of Snake
48 Building “Snake” Part II – Adding Code, Graphics, Sound and Music
49 Building Space Invaders Part I – Using Generative AI to Code Space Invaders
50 Building “Space Invaders” Part II – Adding Code, Graphics, Sound and Music
51 Building Blackjack Part I – Using Generative AI to Code Blackjack
52 Building “Blackjack” Part II – Adding Code, Graphics, Sound and Music
53 Retro Rift – Epilog and AI Musings – ChatGPT Builds its own Game
Bonus Lectures
54 Using ChatGPT and Dall-e to Generate Pixel Art
55 Interfacing to Gamepads
Resolve the captcha to access the links!