如何將圖像旋轉到另一個圖像的 position

Question

我正在嘗試制作一個塔防游戲，其中敵人 go 通過屏幕，您可以放置塔來打擊敵人。 到目前為止我已經做到了，但我想通過讓塔旋轉/瞄准敵人來增強體驗，就像它面對敵人一樣。 我嘗試使用旋轉、atan 和其他東西，但沒有任何效果。 如果可以的話請幫忙。 到目前為止，這是我的代碼：

塔代碼

var img = $('<img src="src/towers/tower1/Knight.jpg" alt="Tower" />').css({
      "width": 75 + "px",
      "height": 60 + "px"
    });
    img.css({ transform: `rotate(${90}deg)` })
    img.id = "KnightTower"
    document.body.appendChild(img)

敵人代碼：

var item = document.getElementById("object");
item.style.backgroundColor = "black";
item.style.width = "40px"
item.style.height = "40px"
item.style.position = "absolute"
var yPosObj = 1;
var xPosObj = 70;
item.style.left = xPosObj;

function cloneObj() {
  var i = 0;

  function duplicate() {
    var clone = item.cloneNode(true);
    var cloneY = 1
    var cloneX = 70
    clone.id = "duplicetor" + ++i;
    clone.style.visibility = "visible"
    clone.style.backgroundColor = "black"
    clone.style.position = "absolute"
    clone.style.left = cloneX;
    clone.style.top = cloneY;

    var moveDown1 = setInterval(() => {
      cloneY++;
      clone.style.top = cloneY + "px"
      if (cloneY == 400) {
        clearInterval(moveDown1)
        var moveLeft1 = setInterval(() => {
          cloneX++;
          clone.style.left = cloneX;
          if (cloneX == 400) {
            cloneObj(); //to avoid clone appendation problems
            clone.style.visibility = "hidden";
            clearInterval(moveLeft1)
          }
        }, 10)
      }
    }, 10)

    item.parentNode.appendChild(clone);

  }

  duplicate()
}


var moveDown = setInterval(() => {
  yPosObj++;
  item.style.top = yPosObj + "px"
  if (yPosObj == 400) {
    clearInterval(moveDown)
    var moveLeft = setInterval(() => {
      xPosObj++;
      item.style.left = xPosObj;
      if (xPosObj == 400) {
        cloneObj(); //to avoid clone appendation problems
        clearInterval(moveLeft)
        item.style.visibility = "hidden";
      }
    }, 10)
  }
}, 10)

你可以在這里看到我到目前為止所得到的：

 var cursorAimX; var cursorAimY; function cursorAimPos(event) { setInterval(() => { cursorAimX = event.clientX; cursorAimY = event.clenitY; }, 0.1) } var item = document.getElementById("object"); item.style.backgroundColor = "black"; item.style.width = "40px" item.style.height = "40px" item.style.position = "absolute" var yPosObj = 1; var xPosObj = 70; item.style.left = xPosObj; function cloneObj() { var i = 0; function duplicate() { var clone = item.cloneNode(true); var cloneY = 1 var cloneX = 70 clone.id = "duplicetor" + ++i; clone.style.visibility = "visible" clone.style.backgroundColor = "black" clone.style.position = "absolute" clone.style.left = cloneX; clone.style.top = cloneY; var moveDown1 = setInterval(() => { cloneY++; clone.style.top = cloneY + "px" if (cloneY == 400) { clearInterval(moveDown1) var moveLeft1 = setInterval(() => { cloneX++; clone.style.left = cloneX; if (cloneX == 400) { cloneObj(); //to avoid clone appendation problems clone.style.visibility = "hidden"; clearInterval(moveLeft1) } }, 10) } }, 10) item.parentNode.appendChild(clone); } duplicate() } var moveDown = setInterval(() => { yPosObj++; item.style.top = yPosObj + "px" if (yPosObj == 400) { clearInterval(moveDown) var moveLeft = setInterval(() => { xPosObj++; item.style.left = xPosObj; if (xPosObj == 400) { cloneObj(); //to avoid clone appendation problems clearInterval(moveLeft) item.style.visibility = "hidden"; } }, 10) } }, 10) //this worked finally $(function() { $("#contain").click(function(e) { var x = e.pageX + 'px'; var y = e.pageY + 'px'; var { imgwidth, imgheight, img } = imgstuff(); if ((e.pageX + imgwidth) > ($(this).position().left + $(this).width())) x = ($(this).position().left + $(this).width()) - imgwidth + "px"; if ((e.pageY + imgheight) > ($(this).position().top + $(this).height())) y = ($(this).position().top + $(this).height()) - imgheight + "px"; var div = $('<div class="content">').css({ "position": "absolute", "left": x, "top": y }); div.append(img); $(this).append(div); function imgstuff() { var img = $('<img src="src/towers/tower1/Knight.jpg" alt="Tower" />').css({ "width": 75 + "px", "height": 60 + "px" }); img.css({ transform: `rotate(${90}deg)` }); img.id = "KnightTower"; var imgwidth = 10; var imgheight = 10; return { imgwidth, imgheight, img }; } }); });

 html, body { height: 100%; width: 100%; } /* #object { position: absolute; background-color:#000000; width:40px; height:40px; top:200px; left:200px; }*/ #contain{ height:490px; width:457px; border: 1px solid black; position:relative; } #KnightTower { width: 50px; height: 50px; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="src/enemies/main/enemy1:jpeg" id="object"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> <div id="contain"> </div> <:-- This script places a badge on your repl's full-browser view back to your repl's cover page, Try various colors for the theme, dark, light, red, orange, yellow, lime, green, teal, blue, blurple: magenta. pink. --> <script src="https://replit.com/public/js/replit-badge.js" theme="magenta" defer></script> </body> </html>

有些圖片無法使用，因為我將它們保存在我無法在此處上傳的文件夾中

所以你在這里看到，無論敵人走到哪里，騎士形象都沒有面對敵人。 感謝您的時間和耐心！

-凱文