Uploaded May 2021 | Updated September 2026, 1 week ago

---

Master game animations using just plain vanilla JavaScript and HTML5 canvas. I will take you through the code step by step and we will build 4 creative coding projects together. Come practice vanilla JavaScript game animations for beginners with me. We will learn how to generate groups of computer controlled animated characters and we will make them move in 4 different ways, from random jumpy movement to path following. In this tutorial we will gain deep understanding of game development with JavaScript and take one more step towards front end web development mastery. Have fun! :)

FULL SERIES PLAYLIST: (3 games and 6 small projects to learn 2D GAMEDEV) youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2

⭐️TABLE OF CONTENT ⭐️
00:00 Project previews, game ideas
02:41 How to set up HTML and CSS for canvas project
03:47 How to set up HTML5 canvas project with JavaScript
05:17 How to animate single object on canvas
07:30 Create many animated objects with ES6 classes
17:20 How to draw images on HTML canvas
19:55 How to animate sprite sheets with vanilla JavaScript
25:46 Movement 1: random chaotic jumps
27:54 Movement 2: sine waves with Math.sin method
34:15 Movement 3: how to animate paths using trigonometry
44:54 Movement 4: moving towards randomised target
48:58 Challenge and outro

🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 1: Sprite animation youtu.be/CY0HE277IBM
🐶 Project 2: Parallax backgrounds youtu.be/Mg7ibYWhjPI
🐶 Project 3: *** this video ***
🐶 Project 4: Rectangle collision youtu.be/r0sy-Cr6WHY
🐶 Project 5: Circle collision youtu.be/rtBCVe3j_24
🐶 Project 6: Triggered event based animations youtu.be/Eg_zUEy_lDE
🐶 Project 7: Raven game youtu.be/gCa0z4B-CRo
🐶 Project 8: Enemy types youtu.be/aEDADLtLEbk
🐶 Project 9: State Management youtu.be/jKe44NeFzwE
🐶 Project 10: Easy Side-Scroller Game youtu.be/7JtLHJbm0kA

🔥 Some of my favourite AUDIO BOOKS for self taught web developers (productivity, discipline, mindset) 🔥
You can get 1 audio book for free every 12 months if you sign up to free AUDIBLE trial
☕ Atomic Habits amzn.to/3fnrOeu
☕ So Good They Can't Ignore You amzn.to/3p51RVp
☕ Deep Work amzn.to/3yMsLWH
These are not available as audio books, but are still worth a read:
☕ The Tools amzn.to/3fOPSXX
☕ Flow amzn.to/34pB1Oj

🔥 I really like these GAMEDEV and GAME ART courses on Udemy 🔥
☕ How to Program Games: Tile Classics in JS for HTML5 Canvas bit.ly/2ZUfKuG
☕ Learn Professional 2D Game Graphic Design in Photoshop bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game bit.ly/3nUrTKm

Get Adobe creative suite apps (Photoshop, Illustrator etc.) bit.ly/3e60cI0

❤ Related Links ❤
Art by bevouliin.com
Project images:
Enemy 1: frankslaboratory.co.uk/downloads/enemy1.png
Enemy 2: frankslaboratory.co.uk/downloads/enemy2.png
Enemy 3: frankslaboratory.co.uk/downloads/enemy3.png
Enemy 4: frankslaboratory.co.uk/downloads/enemy4.png
All enemies zip: frankslaboratory.co.uk/downloads/enemies.zip
Backup links:
Bat ibb.co/RD6HscK
Bat 2 ibb.co/x7ST9SH
Ghost ibb.co/wc0k85j
Razor ibb.co/cCp3LW3
(*** you can use these game assets for learning purposes. For commercial projects you can purchase them directly from the artists. To see the full selection of available GAME DEVELOPMENT ART ASSETS, please visit bevouliin.com ***)


🎮 More HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu

If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-

If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh

Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory

Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, Dub Hub - Jimmy Fontanez_Media Right Productions
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