Fast and Furious Game Development with JavaScript and AI

This short lecture covers what to expect in the course, we install any tools you might need as well as create online IDE accounts on openai.com and replit.com that are needed to use the AI for the lessons and write code. Additionally, in the Resources Tab for this lecture you will download the master ZIP file for the course (use the latest dated version if more that one ZIP) along with the Master Course Outline PDF (which is very important that you download and peruse).

This lecture is a general course overview discussing the depth and breadth of what we will cover over the lectures of the course and what to expect. Also, we talk about resources for the course and then jump right into how websites work and how HTML+CSS+JavaScript fits into it all along with touching on the DOM (document object model).

In this lecture we learn how to make our first website both locally on your machine with a text editor as well as online with one of the online code editors like replit.com and codepen.io.

In this lecture, we ease into HTML with learning a few of the most basic tags for styling and organizing HTML code.

In this lecture, we take a look at some more advanced tags to style our web pages as well as to contain and organize content.

In this lecture, we learn how to embed graphics and sounds into our HTML documents and how to upload files to replit.com to use in our projects.

In this lecture, we are introduced to “controls” such as buttons and inputs and learn how to define them as well as respond to them in HTML.

In this lecture, we learn more about forms and how to create them as well as interact with them. We finish off with a formal introduction to CSS and how to separate our styles from our HTML code.

In this lecture, we cover more advanced CSS styling techniques, targeting elements and applying styles to them as well as some rudimentary CSS based animation techniques that you can use to apply to your HTML content.

In this lecture, we dive into JavaScript, its history and start writing some code. We cover basics like math, writing expressions, printing to the console, and working a little with the debugger.

In this lecture, we dig a little deeper into debugging techniques that are useful to “see” what your code is doing. We cover more methods to print information to the console and the HTML document as well as work more with the integrated browser debug tools (that is in all browsers). Finally, we learn about organizing our HTML and JavaScript into separate files.

In this multipart lecture, we begin our discussion of basic types used in JavaScript and are introduced to some of the more useful “objects” like Strings, Arrays, Numbers, and Math. It will all make sense I promise!

In this lecture, we continue our coverage of basic objects and learn more about arrays, strings, binary bit operations, and more math functionality.

In this lecture, we press on with more math and binary operations, advanced array functions and methods, and introduce functions to our coding toolbox.

In this lecture, we continue with more on manipulating arrays (yes, there’s a lot), additionally, we continue discussing functions and how to call event handlers and interact with the HTML page via the DOM (document object model) tree.

In this lecture, we learn about conditionals and branching logic in JavaScript. The “if” statement, and general conditional logic is introduced. We also, tie up some loose ends with arrays!

In this lecture, we cover some more advanced conditional syntax like ternary operators, as well as introduce the “switch” statement which is a multi-path conditional.

In this lecture, we continue learning about more looping constructs such as “for” and “while”. Additionally, we learn why “goto” is still a bad thing 70 years later :)

In this lecture, we more formally learn about how to write our own functions. We have been calling functions (methods) for many lectures now, but in this lecture, we learn how to write our own, and best practices.

In this lecture, the training wheels come off and we get into some advanced coding concepts like anonymous functions, function pointers, and the dreaded recursion (the bane of computer science students for decades!) But, fear not, I will make it fun, and you will be thinking like a stack machine in no time!

In this lecture, we keep up the pace and jump into the deep end with learning about how to create “objects” ourselves. JavaScript is arguably an object oriented language (everything is an object), so like it or not, the more we embrace the object paradigm and OOP (object oriented programming) and that data structures represent data as well as the methods that operate on them, the better things are going to go for you becoming a Jedi JavaScript coder.

In this lecture, we continue learning more about object syntax, and how to create objects on the fly, different methods of creating constructors, and some of the newer syntax and support on ES6 for object creation. There’s a lot to absorb in this lecture, so buckle up, and let’s get to it!

In this lecture, we learn more about working with standard HTML5 objects and APIs as well as take a look at performance measurements using timers to track how long code take to execute. In game development, or any time critical code, one of the most important tools is to be able to measure how long various algorithms or operations take, how many cycles. This is challenging with JavaScript, so we must use techniques like measuring time in milli or microseconds for code blocks to execute to gain insight into the code’s performance.

In this two part lecture block, we explore the DOM in more detail and instead of only making simplistic queries to it, we learn how to change it, add and delete “nodes” (elements of the HTML pages), and lots more. This is fascinating material and makes the combination of HTML+JavaScript truly formidable. With it, we can re-write our HTML websites on the fly and make them anything we wish, such as a “data driven” experience.

In this lecture, we continue our advanced interfacing to the DOM lecture, and wrap up with learning how to add elements and we cover more about event handlers.

In this lecture, we change gears and its time for the fun stuff! We are going to start our multi-lecture series on computer graphics and animation using the Canvas API object in HTML5. We are going to write all our own graphics code from the ground up, so no 3rd party libraries will be covered. This is computer graphics 101, so let’s get started!

In this lecture, we work through the Canvas API and learn about the “graphics context” which is the bridge between API calls and the screen. With this knowledge, we learn how to draw pixels, lines, basic shapes, and how “paths” work to create complex shapes. We also, continue our discussions of computer graphics fundamentals.

In this lecture, we formalize the idea of a game or animation loop, and the classic “erase-move-draw” motif. Additionally, we take a closer look at elastic collisions with our bouncing ball and border “physics” simulation and create a scrolling star field:)

In this lecture, we continue learning more about animation by adding features to our parallax 3D star field. Additionally, we introduce fonts, and text rendering which is never a simple subject in computer graphics, but we will prevail!

In this lecture, we are going to cover drawing bitmaps and sprites on the canvas, how to work with image editors like Krita to edit our images. And how to locate art online, create your own art, and organize it properly into sprite sheets. This is one of my favorite lectures since it really connects all the threads from all the other subjects we have been learning about.

In this lecture, we begin constructing a “sprite” engine. Which is a tool (made of code) that allows us to load images (a sprite) into an object, draw the images, animate them, move them, and in general work with the image data very easily. First, we are going to discuss the details how to organize the image data into regular cells called a sprite sheet, how to extract images from the cells (using the Canvas API), and then how to put it together, so we can load a sprite sheet, and then draw any cell we wish.

In this lecture, we continue developing our sprite engine, so it supports animation and more methods. Additionally, we discuss more complex collision detection techniques such as bounding boxes, polygon contours and more. With this lecture, we cross the threshold of the minimum required to render a video game and now have most of the tools needed to start writing games, at least from a graphics perspective.

In this lecture, we finally get to keyboard input and learn how to detect keyboard events such as key presses, releases, and the control keys. Then once we have the keyboard working, we continue our coverage of graphics and animation and we build more into our dungeon demo.

In this lecture, we finish off our dungeon demo using keyboard control and add full 2.5D “isometric” animation. We will add this functionality to our sprite engine, as well as continue to use the online sprite editor to “see” our animations from our sprites sheets. A lot of exciting material in this lecture, don’t blink!

In this lecture, we learn about how to interface with the mouse, respond to button clicks, along with all the painful details about mouse coordinates with respect to browser, window, client, and canvas coordinates. There’s a lot going on under the hood of a windowed application that you take for granted, but we need to deal with it.

In this lecture, we develop, rather “port” a full wire frame 3D game called “Raiders 3D”. This game is from my book “Tricks of the 3D Game Programming Gurus” which is included FREE with this course. We take the C/C++ from the game source and port it to JavaScript! This is one of my favorite lectures since it shows the power of JavaScript and the speed of it. Of course, along the way we continue our discussion of input devices and code in support for keyboard and mouse.

In this lecture, we learn how load and play sounds and music in our applications and games. We also learn about “sound design” and finding the right sound and music for your games which can be a very long process. Additionally, we play with the sound editor software (Audacity) a bit to make small changes to our sounds. Although, graphics are more “sexy” than sounds, make no mistake, a good sound track and effects makes all the difference in a game and can create tension, emote fear or excitement, so don’t miss this lecture!

In this lecture, we do the sound design for “Raiders 3D”. We will decide on sound effects like explosions, laser blasts, and background music. In the end, you will have a lot more respect for sound in games by the time you realize how much work it is to go through countless sounds, music and try and pick that just right sound.

In this lecture, we take a look at ChatGPT, Bard, and other LLMs (large language models). We learn how to interact and prompt these generative AIs, and about their limitations and quirks. Also, we will learn some of the lingo you will see used on internet such as: zero shot, one shot, few shot, chain of thought, self consistency, role model, and more. Additionally, we will use the AIs to create some simple demos and code, so you can see the process and what to expect in the next section when we develop working games.

In this lecture, we will take a look at some of my early experiments with ChatGPT and trying to get it to write working games. Many of the demos are fragments and unfinished, so don’t worry about the sources to them. Many of them we will create complete, working versions from scratch in the next Section (5). But, I just wanted to show you what to expect and some of my successes and failures with ChatGPT. The few games that are playable will be listed below, so you can try them.

In this first lecture, we tackle the “hello world” of video games by creating a version of classic Atari Pong.

In this lecture, we finish off “Pong” and add graphics, sound effects, and game play.

In this lecture, we turn up the pressure on ChatGPT and see if it can generate something like Atari “Breakout” or “Arkanoid”. Amazingly, it pulls it off! But, there will be a lot of work ahead to finish the game and make it playable.

In this lecture, we finish off our Breakout clone by adding graphics, sounds, and music and some game play elements like levels and difficulty.

In this lecture, we use ChatGPT to develop a simple version of “Flappy Bird”. If you have never played this game, its quite simple; you are a bird, you flap and try fly over obstacles. This game is a variant of 100s of games before it over the years, but Flappy Bird went viral and got installed on everyone’s phones and PCs. Anyway, the version we will develop will be much simpler, but even still is quite fun!

In this lecture, we finish the game off by adding graphics, sounds, music, and game play elements. Also, there is a “day” and “night” mode. Once you clear enough levels, it gets dark! Have fun and see what you can add to make the game more fun.

In this lecture, we create a digital version of the computer game “Snake”. If you haven’t played this one, its as simple as it gets. You start off with a colored dot (the snake) in a 2D grid world. Then a single dot of “food” appears, as you eat it, the snake become longer and longer. The game is a classic for Computer Science students to implement since it relies on arrays and careful thought about turning and collision. Anyway, we start off and see if ChatGPT can pull this one off by itself.

In this Lecture, we finish off the Snake game by adding graphics, sounds, music and gameplay elements. Honestly, I had a lot of fun finishing this game since it’s such a simple game, the challenge is to try and make it more fun by adding elements to it. Give it a try, I bet you get hooked on it!

In this lecture, we pull of a minor miracle. Having ChatGPT write simple games like Pong is one thing, but to have it write something more complex like an arcade game is something entirely different. I played with the AI quite a bit to see what it could pull off from Asteroids to Pac Man and in the end the game that it seemed to give reasonable results was “Space Invaders” from 1978 by Taito. Space Invaders is the most classic arcade there is in my opinion. Inspired by movies like “War of the Worlds”, and 1950’s Sci-Fi, Space Invaders was the first fast action game really to hit the market and capture the imagination of millions of kids (and adults). The game consists of a single player at the bottom of the screen and rows of alien invaders. The only thing protecting the player are a set of destructable barriers overhead.

In this lecture, we complete the Space Invaders game by adding, graphics, sounds, and gameplay elements. I am quite pleased with how the game turned out. Of course, as usual, I used artistic license and made our version of the game not a copy, but more of an inspired interpretation of the original game. I did have to go through many versions of the game until completing it, I think (6) versions, but it was worth the effort. This game represents a glimpse at the collaboration of human and AI in the realm of game development, and the AI definitely saved me time.

In this lecture, we take a break from classic video games and do something a little different; we create the card game “Blackjack” otherwise known as “21”. If you have never played cards, or this game in particular, its relatively simple; the dealer deals you and himself 2 cards. The goal is to reach the numerical value of 21 if you count the cards up (face cards count as 10, Ace counts as 1 or 11). After the deal, the player can “hit” to get more cards or “stand” if he feels he is close enough to 21. Then the dealer has his turn. Of course, there are lots of details to the rules (which we will review as we develop the game), but graphically the challenge is to draw cards, a table, money perhaps, and make the game feel like your are playing at a casino.

That all said, again, I had a lot of fun with this game, but ChatGPT definitely had a lot of trouble generating a working version of the game due to the very specific rules and details of the prompt. As I re-prompted to add something or fix something, then something else would break. At some point though, I got enough from ChatGPT to move on and finish the game.

In this lecture, we finish the game and add graphics, sounds, and music. Again, I was very pleased with how it turned out and the collaboration with the AI. For play testing, I used my 91 year old father “Bill” to test the game out, he likes playing online gambling games and going to Las Vegas, so if he liked it, I thought good enough :) So, I named the virtual casino after him in the artwork and called it “Lucky Bill’s”. In any event, this game represents an example of doing something you don’t like, but end up having fun.

I personally don’t like gambling, as a mathematician, I see it as pointless since the house usually has the advantage. Nevertheless, writing a simple Blackjack was actually fun and a nice reprieve from shooter after shooter type game. Point is, when developing games, be open to trying things you normally wouldn’t have interest in. You may not want to play the game, but writing it can be an interesting challenge.

This is the final game in this section (at this time), so I thought I would end with an epilog of sorts and given all the work we have done with ChatGPT, I wanted to see what it could create without any help at all to clean up or “skin” the game with graphics and sounds. So, the goal of this lecture is to simply let ChatGPT make something and see what it came up with. In retrospect, I think I gave it too much leeway and without direction ChatGPT doesn’t really know what to do. In any event, the results are a very simple game called “Retro Rift” which was coined by ChatGPT. The game puts you in an asteroid field and you move right and left trying to avoid the asteroids -- that’s it.

In this Bonus Lecture, we take a look at using ChatGPT and integrated Dall-e to create pixel art for our games.

In this Bonus Lecture we take a look at the new Gamepad API supported with Javascript and HTML5. You will learn how to interface with gamepads, detect when they are connected and disconnected as well as add gamepad support to your games.