时间戳

首页 > 解决方案 > 使用offSet在容器内定位对象

javascript - 使用offSet在容器内定位对象

问题描述

嘿伙计们，我正在尝试制作简单的点击游戏，在背景中会有一些漂亮的风景，这些风景将由左右箭头移动（与滑块一样），我希望对象仅在较低的 div 内移动（ #boxMap），我尝试为主要对象构建构造函数，但与帮助我的朋友一起，我们以下面的方式编写了它。问题是这个对象仍然没有移动它应该是什么，想法是当游戏开始时，当我点击右箭头时，对象出现在左侧，如果我点击左箭头对象出现在 div 的左侧. 当我单击鼠标时，对象应该移动到我单击的位置。我有点绝望，因为我有想法如何让它以后工作，但我完全无法管理对象的这种定位和移动。

所以我在boxMap中创建了带有.hero类的新对象，并使用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;
}

标签： javascriptjquerypositionoffset

解决方案

推荐阅读