Question

嘿伙计们，我正在努力制作一个简单的点＆amp;点击游戏，在背景中将是一些不错的景观，将被左右箭头移动（同样像滑块工作），我希望对象只在下部div（#boxMap）内移动，我试图构建contructor到main对象，但与帮助我的朋友一起，我们在下面写道。问题是这个对象仍然没有移动应该如何，想法是当游戏开始时，当我点击右箭头时，对象出现在左边，如果我点击左箭头对象出现在div的左侧。当我单击鼠标时，对象应移动到我单击的位置。我有点绝望，因为我有想法如何让它以后工作，但我完全无法管理对象的这种定位和移动。我找到了一些关于移动对象的优秀教程，并尝试将语句设置为仅在div内移动而不会超出边缘，不幸的是现在它仅在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;
}

使用offSet在容器内定位对象

0 个答案: