The image moves with the arrows and rotates its gaze to where it is moving. I have this code but when the image is at 360º, I have to restart it to 0º. But when that occurs, the image jumps in strange way
<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
For each key I check if I have to increase or decrease degrees to rotate the image, then check if I did not leave the limits of 0º and 360º. If so, I transform it to a correct value by adding or subtracting 360 depending on the case (for this I am removing the "transition" for a few moments to prevent the image from rotating and then I add it again) and then move the image
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)";
}
What could I do to fix this?
Aha, I finally understand what you're trying to do. You want the aeroplane image to progressively rotate towards the movement direction. Well now that I know what you want, I can work out how to achieve that. This is what I would do:
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)";
}
I don't know what language that is (kinda looks like Italian to me, not sure) but I worked out what the variables do. So instead of resetting grados to 0 or 360 whenever it goes outside those limits, I'm letting it go up or down as much as it wants. HTML handles <0 and >360 rotations just fine. I'm not sure why the image jumped when you reset it, but by letting the rotations continue increasing we don't have to care. And then to be able to still have it rotate the right way, I've added normalisedGrados (which, by the way, uses a simple modulus instead of lots of "if"s to stay in the range 0 - 360).
If you want to have a play with it, the fiddle is here: https://jsfiddle.net/ay6euo07/3/