03
Май
2020

Вращение башни танка при событии onMouseDown. Код работает некорректно, не могу разобраться в чём причина

function move() { //Центр башни
  var div = document.getElementById('turret'),
    elem = div.getBoundingClientRect(),
    c1 = elem.left,
    c2 = elem.top;
  return {
    c1: c1,
    c2: c2
  };

}

document.onkeypress = function coord() { //Вывод координат центра башни  
  var centerTurret = move();
  document.getElementById('x').value = centerTurret.c1,
    document.getElementById('y').value = centerTurret.c2;
}
document.onmousemove = function(event) { // Вращение башни
  let x = event.x;
  let y = event.y;
  var centerTurret = move(),
    xC = centerTurret.c1,
    yC = centerTurret.c2;
  document.getElementById('x1').value = x;
  document.getElementById('y1').value = y;
  document.querySelector('.myMove').style.transform = 'rotate(' + 57.2958 * arcctg(xC, yC) + 'deg)';

  function arcctg(xC, yC) {
    if (xC > 0 && yC > 0) return Math.PI / 2 - Math.atan(xC / yC);
    if (xC < 0 && yC > 0) return Math.PI / 2 - Math.atan(xC / yC);
    if (xC < 0 && yC < 0) return Math.PI + Math.atan(yC / xC);
    if (xC > 0 && yC < 0) return 3 * Math.PI / 2 + Math.abs(Math.atan(xC / yC));
  }
}
document.onmouseup = function() {
  var audio = new Audio();
  audio.src = '03049.mp3';
  audio.autoplay = true;
}

function action() {
  var act;
  switch (event.code) {
    case "KeyD":
      act = tank.style.left;
      act = Number(act.match(/\d{1,4}/)) + (10) + "px";
      tank.style.left = act;
      tank.style.transform = "rotate(" + 270 + "deg)";
      break
    case "KeyA":
      act = tank.style.left;
      act = Number(act.match(/\d{1,4}/)) - (10) + "px";
      tank.style.left = act;
      tank.style.transform = "rotate(" + 90 + "deg)";
      break
    case "KeyW":
      act = tank.style.top;
      act = Number(act.match(/\d{1,4}/)) - (10) + "px";
      tank.style.top = act;
      tank.style.transform = "rotate(" + 180 + "deg)";
      break
    case "KeyS":
      act = tank.style.top;
      act = Number(act.match(/\d{1,4}/)) + (10) + "px";
      tank.style.top = act;
      tank.style.transform = "rotate(" + 0 + "deg)";
      break
  }
}
body {
  -webkit-user-select: none;
}

#tank {
  position: absolute;
  width: 100px;
  height: 150px;
  background-color: rgb(0, 255, 0);
  display: block;
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid black;
  z-index: 1;
}

#turret {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin-bottom: 70px;
  margin-top: 40px;
  margin-left: 22px;
  margin-right: 40px;
  display: block;
  background-color: rgb(0, 255, 0);
}

#trunk {
  height: 120px;
  width: 10px;
  background-color: rgb(0, 255, 0);
  border: 1px solid black;
  margin-left: 42px;
  margin-top: 91px;
  display: block;
}

#trunk:after {
  content: "";
  position: absolute;
  width: 14px;
  height: 7px;
  background-color: forestgreen;
  border: 1px solid black;
  top: 210px;
  right: 44px;
}

.ctp {
  width: 158px;
  height: 17px;
  background-color: black;
  transform: rotate(90deg);
  z-index: -1;
}

#ctp1 {
  position: absolute;
  content: "";
  top: 66px;
  left: -80px;
}

#ctp2 {
  position: absolute;
  content: "";
  top: 66px;
  left: 20px;
}

#ctp1::after {}

#star {
  margin-top: 18px;
  margin-left: 12px;
  height: 0;
  width: 0;
  position: relative;
  border-right: 14px solid transparent;
  border-bottom: 8px solid #E7337A;
  border-left: 14px solid transparent;
  transform: rotate(35deg);
}

#star:after,
#star:before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
}

#star:before {
  top: -6px;
  left: -10px;
  border-bottom: 9px solid #e7337a;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transform: rotate(-35deg);
}

#star:after {
  top: 1px;
  right: -12px;
  border-right: 14px solid transparent;
  border-bottom: 8px solid #E7337A;
  border-left: 14px solid transparent;
  transform: rotate(-70deg);
}

.myMove {
  display: flex;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Tank</title>
  <link type="text/css" rel="stylesheet" href="style/style1.css" />
</head>

<body onkeydown="action()" style="margin-top:30px;margin-left:20px;">
  <div id="tank">
    <div id="body"></div>
    <div class="myMove">
      <div id="turret">
        <div id="star"></div>
      </div>
      <div id="trunk"></div>
    </div>
    <div class="ctp" id="ctp1"></div>
    <div class="ctp" id="ctp2"></div>
  </div><br />
  <div>
    Координаты мыши: <br /> x = &ensp;<input type="text" id="x1" /> &ensp; y = &ensp;<input type="text" id="y1" /><br /><br /> Координаты башни: <br /><br /> x = &ensp;<input type="text" id="x" placeholder="118" /> &ensp; y = &ensp;<input type="text"
      id="y" placeholder="96" /><br /><br /> Координаты мыши(return): <br /> x = &ensp;<input type="text" id="x3" /> &ensp; y = &ensp;<input type="text" id="y3" />
  </div>
  <script src="script/script1.js">
  </script>
</body>

</html>

Источник: https://ru.stackoverflow.com/questions/1119479/%D0%92%D1%80%D0%B0%D1%89%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%B0%D1%88%D0%BD%D0%B8-%D1%82%D0%B0%D0%BD%D0%BA%D0%B0-%D0%BF%D1%80%D0%B8-%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B8-onmousedown-%D0%9A%D0%BE%D0%B4-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-%D0%BD%D0%B5%D0%BA%D0%BE%D1%80%D1%80%D0%B5%D0%BA%D1%82%D0%BD%D0%BE-%D0%BD%D0%B5-%D0%BC%D0%BE%D0%B3%D1%83

Тебе может это понравится...

Добавить комментарий