如何使用键旋转和翻译html文档中的图像？ （JavaScript的）

时间：2017-06-16 05:07:01

标签： javascript html keypress

图像随箭头移动并将其凝视旋转到它移动的位置。 我有这个代码但是当图像处于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，将其转换为正确的值（为此我暂时移除“转换”以防止图像旋转然后再添加）然后移动图像

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

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

2 个答案:

答案 0 :(得分：1)

您可以使用模运算符（％），如下所示：

var result = angle % 360;

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

Modulo只是从常规部门返回提醒。

Wolfram alpha示例：here 

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>

答案 1 :(得分：0)

啊哈，我终于明白你要做什么了。您希望飞机图像逐渐向运动方向旋转。那么现在我知道你想要什么，我可以弄清楚如何实现这一目标。这就是我要做的事情：

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处理＆lt; 0和＆gt; 360旋转就好了。我不确定为什么当你重置它时图像会跳跃，但是通过让旋转继续增加，我们不必在乎。然后为了能够以正确的方式旋转，我添加了normalisedGrados（顺便说一下，使用简单的modulus代替了很多“if”来保留范围0 - 360）。

如果你想玩它，那么小提琴就在这里：https://jsfiddle.net/ay6euo07/3/

相关问题
最新问题