NPC variety in JavaScript Games (tutorial)
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/1085653/4650
❤ 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/downloads/enemy_worm.png
👻 ghost: https://frankslaboratory.co.uk/downloads/enemy_ghost.png
🕷 spider: https://frankslaboratory.co.uk/downloads/enemy_spider.png
Game Development with JavaScript, basics for beginners:
Tutorial 1: Sprite animation https://youtu.be/CY0HE277IBM
Tutorial 2: Parallax backgrounds https://youtu.be/Mg7ibYWhjPI
Tutorial 3: Character animations and movement https://youtu.be/pyhb8Y9qKUI
Tutorial 4: Collision detection between Rectangles https://youtu.be/r0sy-Cr6WHY
Tutorial 5: Collision detection between Circles https://youtu.be/rtBCVe3j_24
Tutorial 6: Triggered event based animations https://youtu.be/Eg_zUEy_lDE
Tutorial 7: Raven game https://youtu.be/gCa0z4B-CRo
Get Adobe creative suite apps (Photoshop, Illustrator etc.) https://bit.ly/3e60cI0
🎮 More HTML5 canvas and JavaScript game tutorials:
https://www.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:
https://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:
https://www.youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
Let's be friends
👍 You can message me on TWITTER https://twitter.com/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
Видео NPC variety in JavaScript Games (tutorial) канала Franks laboratory
⭐️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/1085653/4650
❤ 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/downloads/enemy_worm.png
👻 ghost: https://frankslaboratory.co.uk/downloads/enemy_ghost.png
🕷 spider: https://frankslaboratory.co.uk/downloads/enemy_spider.png
Game Development with JavaScript, basics for beginners:
Tutorial 1: Sprite animation https://youtu.be/CY0HE277IBM
Tutorial 2: Parallax backgrounds https://youtu.be/Mg7ibYWhjPI
Tutorial 3: Character animations and movement https://youtu.be/pyhb8Y9qKUI
Tutorial 4: Collision detection between Rectangles https://youtu.be/r0sy-Cr6WHY
Tutorial 5: Collision detection between Circles https://youtu.be/rtBCVe3j_24
Tutorial 6: Triggered event based animations https://youtu.be/Eg_zUEy_lDE
Tutorial 7: Raven game https://youtu.be/gCa0z4B-CRo
Get Adobe creative suite apps (Photoshop, Illustrator etc.) https://bit.ly/3e60cI0
🎮 More HTML5 canvas and JavaScript game tutorials:
https://www.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:
https://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:
https://www.youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
Let's be friends
👍 You can message me on TWITTER https://twitter.com/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
Видео NPC variety in JavaScript Games (tutorial) канала Franks laboratory
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
I Tried Making a 3D MMORPG Game in JavaScriptGPU design with Javascript - SingaporeJSPixels to TextI Tried Making a 3D RPG Game in JavaScriptParallax in JavaScript GamesSprite Animation HTML Canvas - Turn Sprite Sheet into AnimationJr. Developers | Stuck In Tutorial Hell #grindreelSprite Animation with pure CSS | How to animate any sprite sheet using just CSS3 and HTML propertiesI made a Tactics RPG in 48 Hours (!?)JavaScript Tutorial - Game DevelopmentHTML5 Canvas Tutorial: Rotation, Stars & PolygonsSprite sheet animation tutorial with HTML and CSSJavaScript Loops Made EasyMatrix Rain Experiments in JavaScript (tutorial)State Management in GamesJavaScript Game Tutorial - 2D Tower DefenseBuilding a JavaScript RPG game + Releasing on Steam (Danger Crew presentation)Making a Competitive Game with JavaScript - Gamedev.js Game Jam DevlogJavaScript 2D Game Tutorial