Blocking the movement of an object in a boundary

Question

I am trying to make an web application that would simulate a joystick control. I have managed to generate 2 circles on click. (one stationary as a boundary and another following my mouse cursor as a joystick). Right now I am trying to figure out how to restrict the joystick movement inside the generated boundary. Any help would be appreciated.

<div class="eye"> </div>
    <div class="ball">

    </div>
</div>
<script>
    var balls = document.getElementsByClassName("ball");
    document.onmousemove = function () {
        var x = event.clientX + "px";
        var y = event.clientY + "px";
        // event.clientX => gets the horizontal coordinate of the mouse
        // event.clientY => gets the vertical coordinate of the mouse
        // window.innerWidth => gets the browser width
        // window.innerHeight => gets the browser height

        for (var i = 0; i < 20; i++) {
            balls[i].style.left = x;
            balls[i].style.top = y;
            balls[i].style.transform = "translate(x , y)"
        }

Answer 1

Maybe quickest solution is to divide x to a number. Tricky but should work.

balls[i].style.left = x /10;
balls[i].style.top = y/10;

and why do you need that loop? It will prevent this solution.

Answer 2

At a mouse click xs and ys are taken as datum points.

        if (x < xs - barrierDist) {
        x = xs - barrierDist;}
    else if (x > xs + barrierDist) {
        x = xs + barrierDist;}
    else {
        x = x;}
    /*      barrier for y movement*/
    if (y < ys - barrierDist) {
        y = ys - barrierDist;}
    else if (y > ys + barrierDist) {
        y = ys + barrierDist;}
    else {
        y = y;}

Answer 3

Well, it's kind of a game programming question, and only seeing that snippet above, I'd say you have some work to do, but maybe this will help...

To create a boundary, an easy method would be to have an invisible object, and you'd probably want to make this outside of the event handler

var boundary = {};
boundary.x = 100; //the top left, x,y position of the bounding box
boundary.y = 100;
boundary.width = 400; //you don't really need to keep these unless you create an invisible button
boundary.height = 400; //which is an area that you'd use to see if the mouse is on it
boundary.maxX = boundary.x+boundary.width;
boundary.maxY = boundary.y+boundary.height;

In your event handling code you can put the x and y value into one object

pt = {}; //pt means point
pt.x = event.clientX;
pt.y = event.clientY;

Now, let's set up the helper function, and, again, you'd put this outside your event handler

//this is basically a type of collision detection, pt to box collision
function isPtWithinBoundary (pt,b){
   //x,y are the coordinates of the mouse point, and b is the boundary object
   if(pt.x<b.x || pt.x>b.maxX || pt.y<b.y || pt.y>b.maxY){
      //the pt is outside the boundary
      return False;
   }
   //the pt is inside or on the boundary
   return True;
}

Now we call the helper function from your event handler

if (isPtWithinBoundary(pt,boundary)){
   //do what needs to be done if it's in the boundaries
}else{
   //do what needs to be done if it isn't
}

Again, this question is more about game or UI programming, and you'll probably get told that it's better to ask questions like these somewhere like https://gamedev.stackexchange.com/

But, hopefully it helps... if you need help placing the graphics too, that's another question. You just restrict the drawing of the joystick to the boundary in some way... drawing it is done in various ways, so I'll leave that up to you, but, as an example, you could restrict it by reducing it to be relative to the point.

If your graphic was something like a round ball-head for a joystick:

   joystick.x=pt.x-joystick.width/2; //you could store the repeated division by 2 to optimize
   joystick.y=pt.y-joystick.height/2;
   //remember that b represents the boundary object
   if (joystick.x<b.x){
      joystick.x=b.x;
   }else if (joystick.x+joystick.width>b.maxX){
       joystick.x=b.maxX-joystick.width;
   }
   if (joystick.y<b.y){
        joystick.y=b.y;
   }else if (joystick.y+joystick.height>b.maxY){
        joystick.y=b.maxY-joystick.height;
   }

   //This was done using the basic idea of box collision
   //but you could do this by radius or a bunch of other ways

Hopefully this helped.