Grid-based Games (JavaScript tutorial)

Classic early arcade games were creative and simple enough to make a good beginner level coding project. Today we take a proven game concept and build your own version, using modern web technologies. Let's make grid-based games with JavaScript, from scratch. Have fun!

🎨 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 🍄

IT ALL STARTED IN 1976 as a two player ARCADE videogame called Blockade. It inspired other arcade games like Surround and Dominos (1977).
The first home computer version called Worm followed in 1978. Mattel released Snafu in 1982. The same year Snake Byte was published for Atari computers and Nibbler, a single player arcade game.
Tron arcade and it's light cycles are a player versus AI variant of the snake game concept.
In 1991 there was Nibbles for MS-DOS and Rattler race was released the next year, where the snakes eat apples.
In 1997 it was chosen as a pre-set game for Nokia cell phones followed by Snake 2 in the year 2000.
Since then there were countless small flash games, with many different takes on the gameplay and graphics. Let's make our own version and add our own little contribution to the video game history.
Challenge: can you add shadow to the snake? It might be more difficult than it seems because the body is made out of individual segments.

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

[forgottenaquarium]

This is the best way to learn game dev. Coding the classic games. Thank you sir for this. 🥰

[gflaap]

Awesome Frank! I cant get enough of your creative videos

[mahmouddiab]

Very cool you are the best plain javascript game developer on youtube, i may suggest you another classic games to make such as bouncy ball or pacman

[abdulrahmansmamman]

Hi Mr Frank I am abdul from Nigeria, I am front end developer, I code JavaScript and I am so happy with your project on this channel, indeed you are exceptional, you are a freaking genius

[TinyMaths]

Thank you; a lot of info here. I built my own 'crude' version of snake about a year ago, but using a grid; where the snake elements moved from one grid element to another; it's time to revisit the game for a revamp, and apply what I've learned here.

[timothyshoup]

Fantastic tutorial Frank, I always learn so much from your videos! Thank you!

[portzdev]

So amazing! Congrats for the best way to teach everyone! ^^ I'm your fan! u r the best in JS bro! 🚀

[rrahll]

Frank always makes the best tutorials!

[MarioGonzalezTejada]

Hola "profe" no hablo inglés, pero es increíble como explica todos los pasos para hacer este juego clásico desde cero, gracias, saludos desde Perú 👋

[javifontalva]

Another wonderful video!! Keep it up!!!

[MrtnX]

1000 view, yay!!!!
I've learned so much today. Thanks a lot for the history recap. My first experience with the snake game was with a Nokia. I had no idea about all the predecessors.

[danielmelo]

Another great video, I hope we get some mode 7 game in the pipe 😅

[RafaelSales]

Thank you a lot for the excelent video, .I would love tutorials showing how to create the art for the game + the game

[PopLll-loot]

You are the best man
You can make rpg game 🥰

[sokhaitrey]

If possible, I would like you to make a video about math related to game development and implement it with real practice. I really don't know much about math. Thank you!

[tarcisiooliveira]

Hello, how is there any way to prevent users from modifying the code, as javascript code runs on the client side, users can cheat