Audio Visual Effects in JavaScript Games
Visual and audio feedback is a secret ingredient that will make your JavaScript games feel good and give them that extra layer of polish. It's little touches and attention to detail that your clients or potential hiring managers really appreciate. Let's dive deep and make sure we really understand how to attach VFX and audio to game triggers and user generated events using just plain vanilla JavaScript. Hope you get a lot of value from this! :)
⭐️TABLE OF CONTENT ⭐️
00:00 Audio visual effects in JavaScript games - examples
00:55 HTML and CSS setup
01:53 How draw on HTML canvas with vanilla JavaScript
02:51 Creating reusable JavaScript class
08:27 Mouse click event
10:28 getBoundingClientRectangle method explained
14:55 Animation loop
18:10 Removing objects with splice method
20:21 Rotating images on canvas
23:04 How to add audio to HTML canvas project
🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) https://skillshare.eqcm.net/c/2793559...
❤ Related Links ❤
Download project sprite sheet: http://frankslaboratory.co.uk/downloa...
Backup link: https://ibb.co/y65zJfw
Art by https://bevouliin.com/
HTML canvas rotation EXPLAINED for beginners: • Video
You can practice techniques we learned to day in these vanilla JavaScript game tutorials:
Vanilla JavaScript Tower Defense PART 1 • JavaScript Game Tutorial - 2D Tower D...
Vanilla JavaScript Tower Defense PART 2 • JavaScript Game Tutorial - 2D Tower D...
🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 1: Sprite animation • Sprite Animation in JavaScript
🐶 Project 2: Parallax backgrounds • Parallax in JavaScript Games
🐶 Project 3: NPC movement • How To Code Flying Creatures with Jav...
🐶 Project 4: Rectangle collision • Collision Detection Between Rectangle...
🐶 Project 5: Circle collision • Collision Detection Between Circles i...
🐶 Project 6: ** this video **
🐶 Project 7: Raven game • JavaScript Shooter Game Tutorial
🐶 Project 8: Enemy types • How To Code Creatures For JavaScript ...
🐶 Project 9: State Management • State Management in Games
🐶 Project 10: Easy Side-Scroller Game • JavaScript Side Scroller Game Tutorial
🔥 I really like these GAMEDEV and GAME ART courses on Udemy 🔥
☕ How to Program Games: Tile Classics in JS for HTML5 Canvas https://bit.ly/2ZUfKuG
☕ Learn Professional 2D Game Graphic Design in Photoshop https://bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course https://bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game https://bit.ly/3nUrTKm
Get Adobe creative suite apps (Photoshop, Illustrator etc.) https://bit.ly/3e60cI0
🎮 More HTML5 canvas and JavaScript game tutorials:
• Game Development with Vanilla JavaScript
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:
• Front End Web Development Projects fo...
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
• Creative Coding with Vanilla JavaScri...
Let's be friends
👍 You can message me on TWITTER / code_laboratory
👍 Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney
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