позиционирование объекта внутри контейнера с помощью offSet - PullRequest
Новая
       31

позиционирование объекта внутри контейнера с помощью offSet

0 голосов
/ 05 июня 2018

Привет, ребята, я пытаюсь сделать простую игру «укажи и щелкни», на заднем плане будет какой-то красивый пейзаж, который будет перемещаться стрелками слева и справа (так же, как работает слайдер), я хочу, чтобы объект двигался только внутриНиже div (#boxMap), я пытался построить конструктор для основного объекта, но вместе с другом, который мне помогает, мы написали это следующим образом.Проблема в том, что этот объект все еще не двигается, как должно быть, идея состоит в том, что, когда игра начинается, и когда я нажимаю стрелку вправо, объект появляется слева, если я нажимаю стрелку влево, объект появляется слева от div,Когда я щелкаю мышью, объект должен перемещаться в положение, которое я щелкнул.Я немного отчаялся, потому что у меня есть идеи, как заставить его работать позже, но я совершенно не могу управлять этим позиционированием и перемещением объекта.Я нашел хороший учебник yt о движущихся объектах и ​​попытался заставить операторы перемещаться только внутри div, не выходя за пределы края, к сожалению, теперь он перемещается только по нижнему краю div.

Так что я создал новый объект сclass .hero внутри boxMap и установить его начальную позицию с помощью свойств css, затем с помощью функции getClickPosition я пытаюсь управлять его движением, я также пытаюсь установить, что если объект щелкается за пределами рамки div, он устанавливает свою позицию на определенное значение.К сожалению, теперь он движется только через нижний край, правая сторона не выходит за край, левая сторона это делает.

Надеюсь, я смог более или менее объяснить, чего я пытаюсь достичь и что у меня уже естьсделанный.Любая идея, как установить положение и простое движение гораздо проще?Буду благодарен за любые советы 

HTML

<body>
<div id="emptySpace">
    <span class="left"></span>
    <span class="right"></span>
</div>

<div id="boxMap">

</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: antiquewhite;
  #emptySpace {
    width: 100%;
    height: 70vh;
    background-color: azure;
    position: relative;
    .left {
      position: absolute;
      left: 10px;
      top: 40vh;
      border-top: 40px solid transparent;
      border-bottom: 40px solid transparent;
      border-right:40px solid blue;
      //display: none;
    }
    .right {
      position: absolute;
      right: 10px;
      top: 40vh;
      border-top: 40px solid transparent;
      border-bottom: 40px solid transparent;
      border-left: 40px solid green;
      //display: none;
    }
  }
  #boxMap {
    width: 100%;
    height: 30vh;
    border: 1px solid black;
    background-color: #d8fffa;
    position: relative;
    .hero {
      position: absolute;
      width: 50px;
      height: 50px;
      display: inline-block;
      border: 1px solid black;
      border-radius: 50%;
      background-color: blue;
      transform: translate3d(0px, -45px, 0);
      transition: 2s linear;
    }
  }
}



Javascript

function Game() {
    this.hero = new Hero();
   this.counter = 0;
    var self = this;
    this.boxMap = document.querySelector("#boxMap");
    // Placing hero on the map
    this.showHero = function () {
        var heroElement = document.createElement('div');
        heroElement.classList.add('hero');
        console.log(self, self.boxMap);
        self.boxMap.appendChild(heroElement);
        $(heroElement).css({top: 130, left: 30})
    }

}


var game = new Game();
game.showHero();


var heroMovement = document.querySelector(".hero");
var boxMap = document.querySelector("#boxMap");

boxMap.addEventListener("click", getClickPosition, false);


// Set position on hero and set movement
function getClickPosition(e) {
   var xPosition = e.clientX;
    var maxWidth = 1350;
    var minWidth = -20;
    if (xPosition < minWidth) {
        xPosition = minWidth;
    } else if (xPosition > maxWidth) {
        xPosition = maxWidth
    } else {
        var xPosition = e.clientX - (heroMovement.offsetWidth + 3);
    }

    var yPosition = e.clientY;
    var maxHeight = 60;
    var minHeight = -130;
    if (yPosition < minHeight) {
        yPosition = minHeight;
    } else if (yPosition > maxHeight) {
        yPosition = maxHeight
    } else {
        var yPosition = e.clientY - (heroMovement.offsetHeight + 558);
    }

   console.log(xPosition, yPosition);
    var translate3dValue = "translate3d(" + xPosition + "px" + "," + yPosition + "px, 0)";
    console.log(translate3dValue);
    heroMovement.style.transform = translate3dValue;
}
...