How To Code Creatures For JavaScript Games

Video games should be exciting, full of challenges and unexpected surprises. These techniques will allow you to introduce monster variety to your JavaScript games and give each of your enemy critters different visuals, movement and behaviours. Today we will build a fun beginner friendly animation project with HTML5, CSS3, plain vanilla JavaScript and HTML canvas element. This course is for beginner front end web developers and creative coders interested in game development and game design. ⭐️Course Contents ⭐️ 00:00 Course intro 01:00 Project setup HTML, CSS, canvas 03:00 Code structure overview 06:24 DOMContentLoaded and Load events 07:21 timing with timestamps & deltatime 10:41 Main enemy class 11:45 How to add enemies to our game 14:52 Converting global variables into class properties 17:20 Periodic events 20:55 Using filter array method to remove old objects 23:05 Creating a sub class with extends keyword 24:32 Constructor on child classes 27:37 JavaScript ID syntax experiment 29:06 How to draw images on HTML canvas 33:40 Array sort method 36:12 Ghost class 37:23 Random enemy types 39:57 Extending class methods on child classes 45:36 Spider class 49:57 Sprite animation with drawImage method Learn JavaScript and front end web development by building games with me. Today we we will talk about: sub classing in JavaScript, how to use 'extends' and 'super' keywords to create monster variety in your JavaScript games how to keep your game code organised using encapsulation and good object oriented practices how to use timestamps and delta time to make sure our game runs at the same speed on different machines how to use drawImage built in HTML canvas method to animate sprite sheets and I will share many other small tips and trick as we go along Have fun! :) 🔥 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 🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) https://skillshare.eqcm.net/c/2793559... ❤ Related Links ❤ Art by https://bevouliin.com/ check out his website for more game art assets :) Download project sprite sheets: 🐛 worm: https://frankslaboratory.co.uk/downlo... 👻 ghost: https://frankslaboratory.co.uk/downlo... 🕷 spider: https://frankslaboratory.co.uk/downlo... Backup links: Ghost https://ibb.co/GpFfH9d Spider https://ibb.co/Ld4fQRd Worm https://ibb.co/GH3Tks8 🎮 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 JavaScript   🐶 Project 4: Rectangle collision    • Collision Detection Between Rectangles in ...   🐶 Project 5: Circle collision    • Collision Detection Between Circles in Jav...   🐶 Project 6: Triggered event based animations    • Audio Visual Effects in JavaScript Games   🐶 Project 7: Raven game    • JavaScript Shooter Game Tutorial   🐶 Project 8: ** this video ** 🐶 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 for Beg...   If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:    • Creative Coding with Vanilla JavaScript an...   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