In today's creative coding tutorial we will learn JavaScript by building games. I will teach you how to make a game with vanilla JS and HTML canvas element all from scratch with no libraries. We will focus on collision detection, keyboard input, frame-rate optimization and sprite animation, but every technique we learn can be used for other web development projects as well, not just for games. The skills and techniques I am about to teach you today will help you build your own unique games faster, but you can also apply them in any other JavaScript project, we are using pure vanilla JavaScript so everything we learn here are transferable skills.

LIKE the video please if you're getting value out of my tutorials and SUBSCRIBE if you want to learn more vanilla JavaScript!

Some of my favorite UDEMY courses:
** Creative coding **
How to Program Games: Tile Classics in JS for HTML5 Canvas https://bit.ly/2ZUfKuG
Next Level CSS Creative Hover & Animation Effects https://bit.ly/3jEkzju
** CSS / Front-end web development **
The Web Developer Bootcamp (Older but still very relevant) https://bit.ly/2ZZJM0d
Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT
** Vanilla JavaScript from beginner to advanced **
JavaScript Basics for Beginners https://bit.ly/32Tn5wq
JavaScript: Understanding the Weird Parts https://bit.ly/2WVe0zn
The Complete JavaScript Course 2020: Build Real Projects! https://bit.ly/3fXGwaZ
Modern JavaScript From The Beginning https://bit.ly/3fWJgWk
Object-oriented Programming in JavaScript https://bit.ly/3f4Otu0

Recommended book: Game Programming Patterns https://amzn.to/2ZlnplB (Amazon)
If you are really interested in game development check out this book. It's written in pseudo-code so it can be used for any programming language, if you are able to follow this video you will be able to use this book. It covers game development concepts that will eventually help you how to create much more complicated games, frogger game we are building today is very basic, but it is a nice project for beginners to practice JavaScript on.

Sprites & background images:
Project files:
All files zip: https://www.frankslaboratory.co.uk/do...
Individual files:
Background https://www.frankslaboratory.co.uk/do...
Background 2 https://www.frankslaboratory.co.uk/do...
Background 3 https://www.frankslaboratory.co.uk/do...
Background 4 https://www.frankslaboratory.co.uk/do...
Frogger spritesheet https://www.frankslaboratory.co.uk/do...
Cars https://www.frankslaboratory.co.uk/do...
Collisions https://www.frankslaboratory.co.uk/do...
Turtles https://www.frankslaboratory.co.uk/do...
Log https://www.frankslaboratory.co.uk/do...

This tutorial is part of a series - COMPLETE PLAYLIST:
   • JavaScript Flappy Bird with Particles...  
Today we are going to take things we have have learned in this series so far - and create a bigger polished game you can show off on your coding portfolio or personal website. It is a remake of classic Konami arcade game released in 1981, it received a popular sequel for PC and PlayStation 1 in 1997 and there are multiple clones for this game concept like go chicken go. Let's build FROGGER! :)

Tools I use:
Adobe Creative Cloud https://bit.ly/3e60cI0 (official Adobe website to buy Creative Suite applications)

Recommended channel: Ania Kubów #JavaScriptGames
   / @aniakubow  

You can message me on TWITTER   / code_laboratory  
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory
#javascript #htmlcanvas #frankslaboratory

Music:
Business / Corporate by Mixaund | https://mixaund.bandcamp.com
Music promoted by https://www.free-stock-music.com

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!