JavaScript 2D Game Tutorial

Who says learning JavaScript cannot be fun. Let's take another step towards Front End Web Development mastery and practice fundamental programming principles and techniques in this vanilla JavaScript 2D game tutorial.

Some people skip my generative art and HTML canvas animation videos and just focus on game tutorials, but I want to show you that all canvas techniques I teach can improve your games, if you get creative with it.

Relevant links:
Sprite sheets and game art: https://www.gamedeveloperstudio.com/

This tutorial is part of a series, for more game development with pure vanilla JavaScript check out this playlist https://www.youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu

The main reason that people don't succeed in becoming a self-taught Front End Web Developer is because they loose motivation. My tutorials focus on teaching you everything you need to know about HTML, CSS, JavaScript and HTML5 canvas element, while at the same time building fun, visual and memorable projects.

In today's vanilla JavaScript 2D game tutorial I will show you how to add sound to your games, how to make player character follow the mouse whenever we click somewhere, how to handle simple collision detection that triggers sprite animation and how to rotate our fish sprite correctly to face the direction the player is moving. We will also cover repeating backgrounds, how to handle score and couple of other things. First we will build a solid good quality game skeleton that can be used for more than just this particular fish game. Then we will start adding graphics with sprites, particle effects and make the game look polished and clean.

I made a tutorial on how to rotate elements with vanilla JavaScript on HTML canvas for beginners recently (https://youtu.be/TBXjWsR7XDA). Today we will use the same technique to rotate player character around, and we will build on it and take it to the next level by making it face mouse and move towards it.

You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

If you started with vanilla JavaScript and HTML canvas recently you might want to try some of the tutorials from beginner friendly projects playlist first: https://www.youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-

To become a professional Front End Web Developer, you need to practice and work on your skills, these are some of my favourite well structured courses that cover everything you need to know:
JavaScript Beginner Bootcamp (2020) https://bit.ly/3aqFFhc
20 Web Projects With Vanilla JavaScript https://bit.ly/3anlCQR
Learn SVG Animation - With HTML, CSS & JavaScript https://bit.ly/2PRGwOr
HTML, CSS, JavaScript - Build 6 Creative Projects https://bit.ly/33YIBjT
Object-oriented Programming in JavaScript https://bit.ly/3f4Otu0
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
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
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

#javascript #htmlcanvas #frankslaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, World Map - Jason Farnham

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!

Видео JavaScript 2D Game Tutorial канала Franks laboratory