Controlling our central character have chosen to use a non screen joystick. Dragging the desktop character walk forwards, dragging it down. Ultimately she's going to walk backwards. Dragging to the left, she'll turn left, dragging to the right. She'll turn right. And the joysticks song, we'll call the little dots in the middle of the song.

And we'll return to the center whenever we release the mouse or the touch. So how do we use that? sticking with the folder v1 game dot j s, you'll see that part of our Loader for the main character, we create a joystick and assign it to the game as a property of the game. It's new joystick. It takes an options object that's got an unmoved callback. In this case instances gameplay control.

And we also pass in the game as a property. So let's have a look at our joystick class definition. So we pass in an options object. And the first thing we do is create a circle. So that's document create element. And it's a div and we signed some CSS text to it, it's going to be absolute position.

35 Pixels off the bottom with these 80 pixels, the highest 80 pixels. The background is semi transparent gray. This got a border this solid and medium thickness, and the border ratio is 50%. So it's going to end up a circle. Left is 50%. And we also translate it x minus 50%.

That is 50% of its own width. So that policy in the middle, left to right. And then we create a thumb, which is another div element. And we signed the CSS text to that, to position it, so that it's in the center of this background circle. And we append the, the thumb to the circle, and we append the circle to the document body. And then our DOM element.

That's the thing that we're going to move around with touch of mouse movements is going to be the sum We define the maximum radius. In this instance, we're setting it to 40 pixels. And we also say the radius squared, which is maximum radius times maximum radius. It's just a useful thing. later on. We assign or move to and to this as a property and the game as a property.

And then we define where the origin is, which is the offset left and the offset top of our thumb. Assuming our DOM elements been defined, which has, then we define a touchstart event or a mouse down event, depending on whether or not we're a touch device, and that's just going to be joystick tap. So if we have a look at joystick tap, then you can see that it gets the mouse position adds an event listener for move, and up all touch end, same thing with your twitch device or not. So in the move, all we're trying to do is get hold of a forward, we're going to move the sum. And but we're also going to get forward to be a value between one at the top and minus one at the bottom and turn to the value between minus one on the left and one on the right.

And then assuming we've got an on move callback, we call that using game so it's going to be a method of game. And that's going to call play control in the game class, passing in the Properties forward in turn, and we we delete The event listeners if the mouse is lifted, or touch ns, and we return our DOM element back to its origin, as the purpose of saving the origin as a property of this class. So let's have a look at the on move event. You have what we have assigned as our move event. Player control, forward and turn. So that's going to be a value between between minus one and one and turn is going to be valued between minus one and one.

If forwards greater than zero, then we're going to get an action of walk. If not, we're going to get an action of look around. We'll adapt this later so she can actually walk backwards but at the moment, we're just saying that cooked chicken only walk forwards and then we create A property of the player, which is move, who's going to fall was in turn value. And we can use that, in our animate events. See how we're using we're finding out whether a move exists, which happens if the call which in turn have been defined, and then you follow is greater than zero, then we translated along the Zed by a Delta amount. So that's the time since this animate function was last cold.

And we will take the player in the y based on our turn value, and again, we're multiplying that by the Delta time. So that if we, if we reduce our site time to 30 frames per second, or 10 frames a second, she'll still turn the same amount. The purpose of always using the Delta time value is Just for different devices that might be playing a different frame speeds. So that's the, the onscreen joystick