Tilt Control for JavaScript Games [Understanding AI

Tilt Control for JavaScript Games [Understanding AI - Lesson 12 / 15]

Рет қаралды 2,483

Күн бұрын

PLAYLIST: • Self-driving Car :: Ph...
Remember those early mobile games where you could steer by tilting the phone? In this video, I'll guide you through using the device orientation sensor to capture tilt movements. It's a fantastic technique that opens up a world of possibilities for game control.
Let's explore the potential of this feature not just for games, but for other applications too. I'll share my friend's creation, "Jazzman vs. Metalheadz," which showcases the versatility of tilt controls.
The applications extend beyond gaming - think about measuring tree heights or distances to distant objects. If you're interested, I have tutorials on those topics as well. Towards the end of the video, I'll demonstrate how to integrate tilt controls into our racing game, tying it back to the "Understanding AI" course.
So, let me steer you in the right direction for implementing device orientation in your projects. And by the way, did I mention we'll be doing some nononooooo again? You won't want to miss it! Like, share, and subscribe for more exciting tutorials on AI, game development, and innovative programming techniques!
💻CODE FOR THE RACING GAME PART💻
github.com/gniziemazity/under...
Follow Along: 7. Camera Part 2
Code After This Lesson: 8. Phone Input
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
TEST on My Website: radufromfinland.com/projects/...
Self-driving Car Course: • Self-driving Car :: Ph...
Measuring Tree Height Tutorial: • JavaScript Triangulati...
Measuring Distance Tutorial: • Using Triangulation In...
Jazzman vs. Metalheadz: play.google.com/store/apps/de...
#RacingGame #RacingGameJavaScript #OrientationSensorJavaScript #JavaScriptDeviceOrientation #LearnJavaScript
⭐TIMESTAMPS⭐
00:00 Introduction
01:29 Basic Project Setup
08:15 Using Device Orientation
15:47 Using Gravity
20:25 Integrating with the Racing Game

Пікірлер: 59

@zhanmaster6733 13 күн бұрын

Thank you very much for this amazing video! You are the Best programming teacher!

@Radu 9 күн бұрын

Thank you :-) Glad you like my teaching!

@javifontalva7752 2 ай бұрын

This just amazing. You always have something to impress me.

@Radu 2 ай бұрын

I do share a lot of tricks in these videos :-)

@aoukrad 2 ай бұрын

Me watching the video: 🤯 Also, me testing the game on my phone: 😵‍💫🥴 😂 Thanks Radu for the informative content!

@Radu 2 ай бұрын

Haha :-) Curious, how did it work on your phone?

@aoukrad 2 ай бұрын

@@Radu the test went well, but there was a bit of a headache-inducing experience when rotating the tilt. Overall though, great experience.

@Radu Ай бұрын

It's possible... Unfortunately this is where the 'slowness' of JavaScript can become apparent.

@adilsonbuset738 2 ай бұрын

Vos cours sont incroyables.

@Radu 2 ай бұрын

Merci beaucoup. Je suis content que tu les aimes! :-)

@danielchaves6265 2 ай бұрын

I started learning some really interesting things after I started following you. In addition to improving my knowledge in mathematics and English. Thanks! 😊😊

@Radu 2 ай бұрын

Really happy to hear :-) Thanks for watching!

@Nova_The_Beyonder 2 ай бұрын

Thankyou Radu for giving A+ Educational content.

@Radu 2 ай бұрын

You're welcome :-)

@2difficult2do 2 ай бұрын

Thaks, Radu, it's really interesting ☝️😼👍

@Radu 2 ай бұрын

Glad you think so :-)

@santiagocalvo 2 ай бұрын

amazing content as always radu!! You are the best!

@Radu 2 ай бұрын

Thank you :-)

@juancamacho479 2 ай бұрын

Hey Radu, a suggestion when you metioned about testing this on your phone, there Is no need to host it online, in VScode if you open the terminal there is a tab for "PORTS" and you can then just use that link it generates when you forward the port to see it on your phone, it is a lot easier than trying to get the pc's network and IP etc :). also, will you ever try doing a game with an engine like Unity? I feel like you can go really into depth explaining to new game devs how the code works with the GameObjects etc. Thank you again for your free content, amazing like always.

@Radu 2 ай бұрын

Really? Cool! I'll have to test that. Do they need to be on the same WiFi or something like that? About Unity, I don't know... I like teaching more fundamental things than getting into the details of a particular engine or framework. But maybe someday!

@juancamacho479 2 ай бұрын

@@Radu i see! :) and when you forward the port from the terminal you can share it with anyone around the world including yourself haha, doesn't have to be in the same network.

@Radu Ай бұрын

Ok. Thanks :-) I'll check it out someday!

@HuynhLuong227 Ай бұрын

thanks for sharing

@Radu Ай бұрын

My pleasure :-)

@mdsalahuddin46464 2 ай бұрын

Awesome 🔥

@Radu 2 ай бұрын

Thanks 🔥

@mirjalol_shamsiddinov Ай бұрын

do u cover the topics how Js works under the hood etc, i am really struggling but you have so much knowledge

@Radu Ай бұрын

Not really... I don't really teach JavaScript, I just use it to solve different problems. Some lessons about how JavaScript works can be found in my HTML Canvas course (for beginners) and the Math and Code fundamentals playlist.

@devperatetechno8151 2 ай бұрын

very interesting

@Radu 2 ай бұрын

I think so too :-)

@AZHARakaGoat 2 ай бұрын

Nice 🎉❤

@Radu 2 ай бұрын

Thanks :-)

@crsimp9790 2 ай бұрын

Bro, you r cool. Claps for Scandinavia

@Radu 2 ай бұрын

Haha, thanks :-)

@javifontalva7752 2 ай бұрын

Can't you just do translate(-50%, -50%) now instead of using it with transform?

@Radu 2 ай бұрын

I believe so. I teach it like this in case you want to control something else (not necessarily a canvas element).

@ChandrashekarCN 2 ай бұрын

💖💖💖💖

@Radu 2 ай бұрын

:-)

@_MohamedNageh 2 ай бұрын

Hi Radu, I hope you are doing well. I'm still working on the code from the self driving car phase 2. Soon enough I'm expecting to send you a link with the touches I made here and there (hopefully you are gonna like them :-). I'm writing to you because I have a project I'm have to work on in the meantime which is an automatic speech recognition model built from scratch for Arabic language. The thing is I don't know where to start based on some research I did there have to be an NLP model as well as CTC model alongside the main model. I know it's kinda irrelevant to the sequence you are teaching us on and definitely I would understand if you don't have the time for it but if you can help with it (maybe a surprise video in the middle of some week explaining this topic) it would be so appreciated. Best wishes.

@Radu 2 ай бұрын

Wow, really curious to see what you'll do with Phase 2 :-) I don't know what CTC is (just googled it and it's the first time I hear about such a thing). So, I won't teach anything with it anytime soon, for sure. I only teach things I've been using for years so I really understand them and can do my own spin on things :-)

@_MohamedNageh 2 ай бұрын

@@Radu I appreciate your reply and I totally understand. About phase two: oh you will see just wait for it XD

@Radu Ай бұрын

Cool :-) will be waiting!

@tithos Күн бұрын

CTRL+CLICK to create and open new file in VS Code from code definition!!! 🤯

@basepasandhai1906 Ай бұрын

Which VSCode theme is this? Is it a custom theme?

@Radu Ай бұрын

It's Ice Contrast.

@keerthiseelanj1553 2 ай бұрын

Can you upload video related on games based on draggable

@Radu 2 ай бұрын

What do you mean?

@keerthiseelanj1553 2 ай бұрын

@@Radu related to drag and drop

@Radu Ай бұрын

I do have the PuzzleCam game (playlist) on the channel. It's all about Drag and Drop.

@keerthiseelanj1553 Ай бұрын

@@Radu Thanks bro

@MathMatrixBox 2 ай бұрын

It's not working on the phone, the canvas is rotating instead in a fidgy way.

@Radu 2 ай бұрын

The canvas needs to rotate in the opposite direction so you can still see the game right-side up. If it fidgets too much, it's because the sensor on the device is not very precise, or, perhaps the framerate at which your phone browser communicates with the sensor is too low... You can play with the smoothness setting I taught in the video and 'soften' the fidgeting at the cost of lag in rotation. Really... this control would be best implemented in a native way, not in the browser... but I wanted to teach how something like this works in our current codebase so... it is what it is. Btw: I tested on several phones and one of them was like you described.

@MathMatrixBox 2 ай бұрын

@@Radu thank you

@christian-schubert 2 ай бұрын

Let's get this project across the Finnish line. Get it? Because Radu is

@CodeNascher_ 2 ай бұрын

👐 NO! No, no, no 👐

@Radu 2 ай бұрын

Now I wish I used this one :-D

@Radu 2 ай бұрын

:-))

@SanjayKumar-xx8qy Ай бұрын

rock paper scissors game js with webcam

@Radu Ай бұрын

I hinted at a simple way to build this in this video: kzfaq.info/get/bejne/h75yZNylrJ-Zl6c.html Actually, the method from there would do the trick. I might do a project like this someday, maybe as a live-stream. Let's see...