如何使用鍵從html文檔中旋轉和翻譯圖像？（javascript）

圖像隨箭頭移動，並將其視線轉向它的移動位置。我有這段代碼，但是當圖像在360º時，我必須重新啓動它到0º。但是，當發生這種情況，在圖像中奇怪的方式跳到如何使用鍵從html文檔中旋轉和翻譯圖像？（javascript）

<html> 
<head> 
    <title>Keys</title> 
    <script src="script.js"></script> 
</head> 
<body> 
    <img src="http://icon-icons.com/icons2/281/PNG/256/Airport-icon_30354.png" id="img" style="width:100px"> 
</body> 
</html>

的script.js

對於我檢查我是否有增加或減少度旋轉圖像，然後檢查，如果我沒有離開的每個關鍵0º和360º的極限。如果是這樣，根據情況，我通過加或減360來將它轉換爲正確的值（爲此，我將「轉換」暫時取消，以防止圖像旋轉，然後再次添加），然後移動圖片

var cadena=""; 
var x=0; 
var y=0; 
var grados=0; 
sumarGrados=15; 

window.onload=function(e){ 

document.getElementById("img").style.transition="transform 0.5s linear"; 
document.onkeydown=function(ev){ 
    switch(ev.keyCode){ 
    case 39: cadena+="Right "; if(grados<45 || grados>225) sumarGrados=15; else if(grados>45 && grados<=225) sumarGrados=-15; else sumarGrados=0; 
      if(grados+sumarGrados<0) cambio(60,0,grados+360); else if (grados+sumarGrados>=360) cambio(60,0,grados-360); 
      else{x+=60; grados+=sumarGrados; document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";} break; 

    case 40: cadena+="Down "; if(grados<135 || grados>315) sumarGrados=15; else if(grados>135 && grados<=315) sumarGrados=-15; else sumarGrados=0; 
      if(grados+sumarGrados<0) cambio(0,60,grados+360); else if (grados+sumarGrados>=360) cambio(0,60,grados-360); 
      else{y+=60; grados+=sumarGrados; document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";} break; 

    case 38: cadena+="Up "; if(grados<315 && grados>=135) sumarGrados=15; else if(grados>315 || grados<135) sumarGrados=-15; else sumarGrados=0; 
      if(grados+sumarGrados<0) cambio(0,-60,grados+360); else if (grados+sumarGrados>=360) cambio(0,-60,grados-360); 
      else{y-=60; grados+=sumarGrados; document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";} break; 

    case 37: cadena+="Down "; if(grados<225 && grados>=45) sumarGrados=15; else if(grados>225 || grados<45) sumarGrados=-15; else sumarGrados=0; 
      if(grados+sumarGrados<0) cambio(-60,0,grados+360); else if (grados+sumarGrados>=360) cambio(-60,0,grados-360); 
      else{x-=60; grados+=sumarGrados; document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)";} break; 
    } 
    console.log(grados); 
}; 
} 

function cambio(c_x,c_y,cambio){ 
document.getElementById("img").style.transition="transform 0.0s linear"; 
grados=cambio; 
document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)"; 
setTimeout('avanzar('+c_x+','+c_y+',)', 0); 
} 

function avanzar(c_x,c_y){ 
document.getElementById("img").style.transition="transform 0.5s linear"; 
x+=c_x; y+=c_y; grados+=sumarGrados; 
document.getElementById("img").style.transform="translate("+x+"px,"+y+"px) rotate("+grados+"deg)"; 
}

我能做些什麼來解決這個問題？

來源

2017-06-16 Omar Villanueva

應該採取什麼圖像實際上_do_？如果我繼續按右鍵，圖像是否繼續向右滾動？我建立了一個jsfiddle來進行試驗：https://jsfiddle.net/ay6euo07/1/ – Clonkex

問題是，當飛機完全轉彎（360º）時，圖像跳了一會兒。試着讓圖像變成一個圓圈，你會發現會發生什麼。 –

我已經制定出你想要的，並張貼了一個答案:) – Clonkex

啊哈，我終於明白你要做什麼了。您希望飛機圖像逐漸向運動方向旋轉。那麼現在我知道你想要什麼，我可以研究如何實現這一點。這是我會做：

var cadena = ""; 
var x = 0; 
var y = 0; 
var grados = 0; 
sumarGrados = 15; 
var normalisedGrados = 0; 

onload = function() { 
    document.getElementById("img").style.transition = "transform 0.5s linear"; 
    document.onkeydown = function(ev) { 
     normalisedGrados = grados % 360; 
     switch (ev.keyCode) { 
      case 39: 
       cadena += "Right "; 
       if (normalisedGrados < 45 || normalisedGrados > 225) sumarGrados = 15; 
       else if (normalisedGrados > 45 && normalisedGrados <= 225) sumarGrados = -15; 
       else sumarGrados = 0; 
       x += 60; 
       grados += sumarGrados; 
       document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)"; 
       break; 

      case 40: 
       cadena += "Down "; 
       if (normalisedGrados < 135 || normalisedGrados > 315) sumarGrados = 15; 
       else if (normalisedGrados > 135 && normalisedGrados <= 315) sumarGrados = -15; 
       else sumarGrados = 0; 
       y += 60; 
       grados += sumarGrados; 
       document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)"; 
       break; 

      case 38: 
       cadena += "Up "; 
       if (normalisedGrados < 315 && normalisedGrados >= 135) sumarGrados = 15; 
       else if (normalisedGrados > 315 || normalisedGrados < 135) sumarGrados = -15; 
       else sumarGrados = 0; 
       y -= 60; 
       grados += sumarGrados; 
       document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)"; 
       break; 

      case 37: 
       cadena += "Down "; 
       if (normalisedGrados < 225 && normalisedGrados >= 45) sumarGrados = 15; 
       else if (normalisedGrados > 225 || normalisedGrados < 45) sumarGrados = -15; 
       else sumarGrados = 0; 
       x -= 60; 
       grados += sumarGrados; 
       document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)"; 
       break; 
     } 
     console.log(grados); 
    }; 
} 

function cambio(c_x, c_y, cambio) { 
    document.getElementById("img").style.transition = "transform 0.0s linear"; 
    grados = cambio; 
    document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)"; 
    setTimeout('avanzar(' + c_x + ',' + c_y + ',)', 0); 
} 

function avanzar(c_x, c_y) { 
    document.getElementById("img").style.transition = "transform 0.5s linear"; 
    x += c_x; 
    y += c_y; 
    grados += sumarGrados; 
    document.getElementById("img").style.transform = "translate(" + x + "px," + y + "px) rotate(" + grados + "deg)"; 
}

我不知道我的工作是什麼語言，（有點貌似意大利對我來說，不知道），但出了什麼變量做。所以，當它超出這些限制時，不要將grados重置爲0或360，而是讓它隨意增加或減少。 HTML處理< 0和> 360旋轉就好了。我不確定爲什麼當你重置它時圖像會跳躍，但通過讓輪轉持續增加，我們不必關心。然後爲了能夠仍然以正確的方式旋轉，我添加了normalisedGrados（順便說一下，它使用簡單的modulus而不是大量的「if」來保持範圍0-360）。

如果你想有一個發揮它，小提琴是在這裏：https://jsfiddle.net/ay6euo07/3/

來源

2017-06-17 00:36:34 Clonkex

順便說一下，這種語言是西班牙語xd。非常感謝你，我只有一個問題，是不是一個問題讓變量「grados」沒有限制（0-360）？，如果飛機需要轉彎很多，這可能會變成非常大的數字 –

@OmarVillanueva啊當然，它是西班牙語，我應該已經意識到。關於你的問題，不，不是。我的意思是技術上來說，它最終會達到這個數字的最大值，但實際上這絕對不會發生。一個普通的32位整數的最大大小是'2,147,483,647'。這意味着您必須將平面在一個方向上旋轉360°約5,965,232次。這是5.9億次。你會在那裏呆上幾個星期。另外，我認爲當它達到最大值時，數字會簡單地迴繞，並且你會在角度上略微跳躍：P – Clonkex

好的非常感謝 –

如何使用鍵從html文檔中旋轉和翻譯圖像？ （javascript）

回答

相關問題

如何使用鍵從html文檔中旋轉和翻譯圖像？（javascript）