如何使用键旋转和平移 html 文档中的图像？ (javascript)

Question

图像随着箭头移动，并将目光转向移动的地方。我有这段代码，但是当图像处于 360º 时，我必须将它重新启动到 0º。但是当发生这种情况时，图像以奇怪的方式跳跃

<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 将其转换为正确的值（为此我删除 "transition" 片刻以防止图像旋转然后我再次添加它）然后移动图片

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)";
}

我该怎么做才能解决这个问题？

Answer 1

啊哈，我终于明白你想做什么了。您希望飞机图像逐渐朝运动方向旋转。好吧，现在我知道你想要什么，我可以想出如何实现它。这就是我要做的：

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 范围内）。

如果你想玩一玩，fiddle 就在这里：https://jsfiddle.net/ay6euo07/3/

Answer 2

您可以使用模运算符 (%)，如下所示：

var result = angle % 360;

Modulo 将保留 0 到 360 之间的任何数字（假设 360 是极限）；

模只是returns来自常规除法的提醒。

Wolfram alpha 示例：https://www.wolframalpha.com/input/?i=x+modulo(360)

var tag = document.getElementById("demo");

var angle = 90; // degree
var limit = 360;
var result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);

tag.insertAdjacentHTML('beforeEnd', "<br>");
angle = 360;
limit = 360;
result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);

tag.insertAdjacentHTML('beforeEnd', "<br>");
angle = 360+180;
limit = 360;
result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);

tag.insertAdjacentHTML('beforeEnd', "<br>");
angle = 6556443656;
limit = 360;
result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);
tag.insertAdjacentHTML('beforeEnd', "<br>");
tag.insertAdjacentHTML('beforeEnd', "<br>");

tag.insertAdjacentText('beforeEnd', "WARNING! This can be a catch:");
tag.insertAdjacentHTML('beforeEnd', "<br>");
angle = -90;
limit = 360;
result = `When angle = ${angle}, the result is ${angle % limit}`;
tag.insertAdjacentText('beforeEnd', result);

<div id="demo"></div>

如何使用键旋转和平移 html 文档中的图像？ (javascript)

How can I rotate and translate an image from a html document using keys? (javascript)

html

javascript

keypress