Rotieren eines Objekts um 45 Grad auf spezifischem onkeydown

Question

Ich habe an einem Spielprojekt für eine Weile gearbeitet und einen Haken mit einer bestimmten Kontrolle getroffen. Ich habe beschlossen, einige der Mechaniken ein wenig zu ändern, um damit umzugehen. Ich hatte ein Stück Code geschrieben, um ein Objekt mit meiner Mausbewegung drehen zu lassen, aber jetzt muss ich mein Objekt mit einem Tastendruck drehen lassen.

Ich möchte es 45 Grad im Uhrzeigersinn drehen, wenn ich die rechte Pfeiltaste und 45 Grad gegen den Uhrzeigersinn auf der linken Pfeiltaste drücken. Ich habe den Eingabetaste-Aufruf alle geschrieben Ich muss nur meinen alten Code in den neuen Code übersetzen.

Dies ist meine vorhandenen Code

window.onmouseclick = function(event) { 
var box = hypeDocument.getElementById('bolt') 
cx = event.pageX; // Mouse X 
cy = event.pageY; // Mouse Y 
bx = parseInt(hypeDocument.getElementById('group').style.left); 
by = parseInt(hypeDocument.getElementById('group').style.top); 
tx = hypeDocument.getElementProperty(box, 'left') + 
(hypeDocument.getElementProperty(box, 'width')/2) + bx; 
ty = hypeDocument.getElementProperty(box, 'top') + 
(hypeDocument.getElementProperty(box, 'height')/2) + by; 


angle = Math.atan2((cy-ty),(cx-tx)) * (180/Math.PI) ; // AHHHH MATH! 
hypeDocument.setElementProperty(box, 'rotateZ', angle) 
} 


hypeDocument.setElementProperty(box, 'rotateZ', angle) // hype api code for 

box.style.webkitTransform = "rotate(" + angle + "deg)"; 
box.style.mozTransform = "rotate(" + angle + "deg)"; 
box.style.transform = "rotate(" + angle + "deg)"; 

Dies ist der Code, den ich ändern wollen, wie ich es im Kommentar angeben, die letzte Zeile ist Hype api für die 3-Box Stile darunter jemand zu helfen, der dies liest Versteh was diese Linie ist.

Answer 1

Ich bin nicht sicher über die Hypedokument Markup, aber ich habe das für Sie zusammen. Können Sie die sinnvollen Teile für die Schlüsselcodes extrahieren, damit es mit Ihrem Projekt funktioniert?

window.addEventListener('keyup',function(e) { 
 
    var keyCode = e.keyCode, 
 
     dir = '', 
 
     box = document.getElementById('box'); 
 
    if (keyCode == 39) { 
 
    dir = 'left'; 
 
    } else if (keyCode == 37) { 
 
    dir = 'right'; 
 
    } 
 
    box.setAttribute('data-dir',''); 
 
    setTimeout(function() { 
 
    box.setAttribute('data-dir',dir); 
 
    }) 
 
})

#box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    transform: rotate(0); 
 
} 
 

 
[data-dir="left"] { 
 
    animation: left .5s forwards; 
 
} 
 

 
[data-dir="right"] { 
 
    animation: right .5s forwards; 
 
} 
 

 
@keyframes left { 
 
    from { 
 
    transform: rotate(0); 
 
    } 
 
    to { 
 
    transform: rotate(90deg); 
 
    } 
 
} 
 

 
@keyframes right { 
 
    to { 
 
    transform: rotate(-90deg); 
 
    } 
 
}

<div id="box"></div>