Youtor
JavaScript Shooter Game Tutorial
YOUR LINK HERE:
http://youtube.com/watch?v=gCa0z4B-CRo
In this introduction tutorial course we will cover important game development techniques using vanilla JavaScript and HTML5 canvas. Build a complete point and shoot game while learning the fundamentals of game development. • ⭐️Course Contents ⭐️ • 00:00 JavaScript game development crash course overview and game examples • 01:14 HTML and CSS setup • 02:12 Simple HTML canvas setup with vanilla JavaScript • 02:33 Creating a reusable JavaScript class • 04:43 Animation loop • 06:24 How to use timestamps and delta time • 14:02 How to use ES6 spread operator • 16:44 How to use array filter method • 19:30 Sprite animation with draw image method • 24:02 How to time sprite animation with delta time • 27:56 How to animate bouncing movement • 28:47 How to draw score in JavaScript game • 30:00 getImageData HTML5 canvas method explained • 34:26 Secondary collision canvas setup • 35:15 Collision detection by color in 2D game • 43:06 Triggered event based audio visual effects • 50:18 How to handle game over • 52:38 How to add particle effects • Learn JavaScript and front end web development by building games with me. Today we we will talk about: • how to achieve pixel perfect collision detection using colors with getImageData() HTML canvas method • how to use timestamps and delta time to make sure our game runs at the same speed on different machines • we will learn about arrays and I will show you how to remove old game objects using built it array filter method and how to use array sort method to create correct draw order in a 2D game • we will talk about modern ES6 JavaScript syntax and we will learn how to make our animation code cleaner and less repetitive with spread opearator • and I will share many other small tips and trick as we go along • Have fun! :) • 🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) https://skillshare.eqcm.net/c/2793559... • 🔥 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 • ❤ Related Links ❤ • Visual Web Development by Radu, complete course 2021: • Visual Web Dev. Course (2021) • Download project sprite sheets: • raven: http://frankslaboratory.co.uk/downloa... • dust cloud: http://frankslaboratory.co.uk/downloa... • Backup links: • Dust cloud: https://ibb.co/y65zJfw • Raven: https://ibb.co/ChzBzcm • Art by https://bevouliin.com/ check out his website for more game art assets :) • 🎮 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: Triggered event based animations • Audio Visual Effects in JavaScript Games • 🐶 Project 7: ** this video ** • 🐶 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 • 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) 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
#############################
