Make a Mobile Game with JavaScript

Making mobile friendly games with vanilla JavaScript can be easy, if you understand how to use touch events to calculate direction and distance of swipes. As a bonus I will show you how to use brand new JavaScript full-screen feature. It's quick and easy.

PART 1: https://youtu.be/7JtLHJbm0kA

⭐️Tutorial Contents ⭐️
00:00 Final project preview
00:19 Simulate mobile devices with Device Mode
02:19 Restart game function
04:46 touchstart, touchmove and touchend events
07:14 How to use touch events to calculate swipe direction
12:45 How to use JavaScript Fullscreen API
16:53 How to resize and reposition hitboxes

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

🔥 I really like these courses on Udemy 🔥
☕ The Web Developer Bootcamp (Colt Steele, 2022 update) https://bit.ly/2ZZJM0d
☕ JavaScript Basics for Beginners https://bit.ly/32Tn5wq
☕ Object-oriented Programming in JavaScript https://bit.ly/3f4Otu0
☕ The Complete JavaScript Course 2022: From Zero to Expert! https://bit.ly/3fXGwaZ
☕ JavaScript - The Complete Guide 2022 (Beginner + Advanced) https://bit.ly/37Hlxqq
☕ JavaScript: The Advanced Concepts (2022) https://bit.ly/2Uk6Wyk
☕ JavaScript: Understanding the Weird Parts https://bit.ly/2WVe0zn
☕ Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
☕ 20 Web Projects With Vanilla JavaScript https://bit.ly/3anlCQR
GAMEDEV and GAME ART:
☕ 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
My FREE courses on UDEMY:
☕ HTML Canvas Crash Course https://bit.ly/3y8yAgz
☕ Sprite Animation Deep Dive https://bit.ly/2Q9BG2K

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

❤ Related Links ❤
Art by https://bevouliin.com/ check out their website for more game art assets!
Download project sprite sheets:
🐕 Player: http://frankslaboratory.co.uk/downloads/93/player.png
🌳 Background: http://frankslaboratory.co.uk/downloads/93/background_single.png
🦇 Enemy: http://frankslaboratory.co.uk/downloads/93/enemy_1.png
Backup links:
Background https://ibb.co/jrpX7BY
Enemy https://ibb.co/FxFC9mF
Player https://ibb.co/z51dQS0

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

Видео Make a Mobile Game with JavaScript канала Franks laboratory