Uploaded March 2024 | Updated September 2026, 1 week ago

---

Extended version, bonus art assets, source code: udemy.com/course/make-grid-based-games-with-javascript/?referralCode=B9C9B27679B03F6F21FB

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.

Classic snake game with graphics: youtu.be/TBGEt_-rFSs

🎨 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 🍄
Grass tile: frankslaboratory.co.uk/downloads/138/grass_night.png
Background top tile: frankslaboratory.co.uk/downloads/138/forest_margin_repeat.png
Game over screen: frankslaboratory.co.uk/downloads/138/gameOver_forest.png
Background top tile larger: frankslaboratory.co.uk/downloads/138/forest_margin_repeat_1600x600.png
Magic berry: frankslaboratory.co.uk/downloads/138/magic_berry1.png
Snake corgi: frankslaboratory.co.uk/downloads/138/snake_corgi.png
Magic mushroom: frankslaboratory.co.uk/downloads/138/mushroom_sprite.png
Animated foods sprite sheet: frankslaboratory.co.uk/downloads/138/food.png
Void wolf: frankslaboratory.co.uk/downloads/138/void_wolf.png
Sticky saberhound: frankslaboratory.co.uk/downloads/138/sticky_saberhound.png
Spectral schnoodle: frankslaboratory.co.uk/downloads/138/spectral_schnoodle.png

Bite 1: frankslaboratory.co.uk/downloads/138/bite1.mp3
Bite 2: frankslaboratory.co.uk/downloads/138/bite2.mp3
Bite 3: frankslaboratory.co.uk/downloads/138/bite3.mp3
Bite 4: frankslaboratory.co.uk/downloads/138/bite4.mp3
Bite 5: frankslaboratory.co.uk/downloads/138/bite5.mp3
Bad food: frankslaboratory.co.uk/downloads/138/bad_food.mp3
Button: frankslaboratory.co.uk/downloads/138/button.mp3
Start: frankslaboratory.co.uk/downloads/138/start.mp3
Restart: frankslaboratory.co.uk/downloads/138/restart.mp3
Win: frankslaboratory.co.uk/downloads/138/win.mp3

All resources zip: frankslaboratory.co.uk/downloads/138/all_resources.zip

🍄 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
Checkpoint 1 (00:28:00) download zip: frankslaboratory.co.uk/downloads/138/source_code_1.zip
Checkpoint 2: (00:58:03) download zip frankslaboratory.co.uk/downloads/138/source_code_2.zip

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)
udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7

udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01

Get Skillshare FREE for 1 month:
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on

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