Блокировка движения объекта на границе

Question

Я пытаюсь создать веб-приложение, которое имитирует управление джойстиком. Мне удалось сгенерировать 2 круга на клике. (один неподвижен как граница, а другой следит за моим курсором мыши как джойстик). Прямо сейчас я пытаюсь выяснить, как ограничить движение джойстика внутри сгенерированной границы. Любая помощь будет оценена.

<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

Ну, это своего рода вопрос программирования игры, и, увидев только этот фрагмент выше, я бы сказал, что у вас есть работа, но, возможно, это поможет ...

Чтобы создать границу, и простым способом было бы иметь невидимый объект, и вы, вероятно, захотите сделать это вне обработчика событий

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;

В вашем коде обработки событий вы можете поместить значения x и y в один объект

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

Теперь давайте настроим вспомогательную функцию и снова поместим ее вне вашего обработчика событий

//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;
}

Теперь мы вызываем вспомогательную функцию из вашего обработчика событий

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
}

Опять же, этот вопрос больше касается игры или программирования пользовательского интерфейса, и вам, вероятно, скажут, что лучше задать такие вопросы где-то вроде https://gamedev.stackexchange.com/

Но, надеюсь, это поможет ... если вам нужна помощь в размещении графики, это другой вопрос. Вы просто ограничиваете отрисовку джойстика до некоторой границы ... рисование выполняется разными способами, поэтому я оставлю это на ваше усмотрение, но, например, вы можете ограничить его, уменьшив его до относительно точки.

   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;
   }

   //or this could be done by radius or a bunch of other ways

Дайте мне знать, если это помогло, или я где-то напутал, и я случайно перепутал с вами сопли

Answer 2

При щелчке мыши xs и ys принимаются как исходные точки.

        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

Возможно, самое быстрое решение - разделить х на число. Хитро, но должно сработать.

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

а зачем вам этот l oop? Это предотвратит это решение.