Player-vs-AI Games (JavaScript tutorial)

This is a deep dive into grid-based games. Local multiplayer 4-player battle arena, game menus, game over screen, animated sprites, simple AI to control the opponents and much more! Let's remake classic games and put your own spin on it. Have fun!

Tip: this game can be played as 1 player versus AI, 2 players versus AI or even AI versus AI. Set all 4 players as AI-controlled and watch what happens.

🎨 Toolkit 🎨
We will use vanilla JavaScript, no frameworks and no libraries because we want to understand every line of code. (JavaScript, HTML canvas, object oriented programming, HTML5, CSS3)

🍄 Download Project Art assets 🍄

🍄 Tutorial Contents 🍄
00:00:00 Battle snakes in vanilla JavaScript
00:00:27 Project setup
00:04:26 Fully responsive canvas
00:12:01 Drawing animated shapes
00:16:26 Playable characters
00:20:30 Game grid
00:24:04 Fully responsive grid
00:28:00 Animation timing
00:36:04 Player 1: Keyboard arrows
00:46:19 Player 2: Keyboard WSAD
00:49:33 Player 3: Computer AI
00:58:03 Food
01:04:19 Drawing text on canvas
01:06:57 Multi segmented bodies
01:10:30 Movement rules
01:13:11 Game UI: buttons
01:15:00 Game UI: score board
01:20:48 Game UI: player options
01:24:55 Tileable backgrounds
01:31:02 Playable area
01:32:57 Start and restart screens
01:40:40 Tweaks and fixes
01:44:13 Connecting the menus
01:52:00 Fullscreen mode
01:54:12 Debug mode
01:56:48 Images and debug shapes
02:00:28 Character sprite sheets
02:26:21 Animated food
02:31:28 Food seeking AI
02:34:39 Win and lose messages
02:39:28 Mouth animations
02:43:38 Non edible food
02:47:41 Game UI: creature choice
02:54:56 Easy and difficult AI
03:05:07 Game timers
03:07:40 Performance friendly particles
03:27:30 Sound design

Source code

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)

Get Skillshare FREE for 1 month:

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[MrtnX]

Omg, I love this. Thank you Frank!!
When you read AI you think on big models, but it is always a joy to know that we build custom AIs for the projects.
I'm very happy as well that you are implementing more user menus and UI in the projects.

[worldbest]

i actually memorized all script from Franklab. it helped me to refactor other youtuber's game code into my own way(frank's style). Your contents is really freaking great and teach me way to how to catch fish! I really appreciate!

[AlAmin-unzx]

You are awesome Frank. We love you. Thank you for the tutorial.

[novaprice]

Dude you are really an awesome teacher.

[Radu]

Amazing how you are able to teach such polished projects. I don't have the patience... Are you doing these for your actual work or just to teach on YouTube?

[karlkoch]

Yet another amazing learning experience, big fan of Franks Laboratory! Go Void Wolf! Thanks Frank!

[braveitor]

Great tutorial. Lots of great stuff there. Even the game seems fun. Thank you.

[ericfourmaux]

Very good tutorials, as usual! Love your chanel! :) I'd love to see a platform game tutorial with scrolling! :) Great work Frank! Thank You!

[atandatosinpeter]

I made it! One concern, though, is that, I have to set eventInterval in game class to 120 to work smoothly on devices of 2GB RAM which makes the snakes' movement faster than I want. Is there a way to fix this?

[fredl]

Thanks a lot for your tutorial.
I have a technical question, is the canvas suitable for games in terms of performance?

[javifontalva]

I would like to watch a tutorial about how to create these beautiful images.

[kiranpatel]

Hey frank.. I actually wanna share some of my codes with u so how can i?... Btw amazing video 👌👌👌

[javifontalva]

When can we see a platform game in javascript? Just an idea.

[MeinDeutschkurs]

Why responsiveness, if touch is completely ignored? Yes, different screen sizes on Desktops. My stats show that 85% use mobile devices nowadays. I think touch controls are a must. And a pain to implement properly.

[silentworldsound]

wow, this video is very helpfull for learning js, can you please make bubble shoter game in js?

[crispendragon]

thanks! You are the best. More videos like this please!!! <3