指定されたonkeydownでオブジェクトを45度回転する

Question

私はしばらくゲームプロジェクトに取り組んできましたが、特定のコントロールで悩まされました。私はこれに対処するためにいくつかのメカニックを少し変更することに決めました。私はマウスの動きでオブジェクトを回転させるコードを書いていましたが、今はキー押しでオブジェクトを回転させる必要があります。

右矢印キーを押すと時計回りに45度、左矢印キーを押すと時計回りに45度回転します。私はすべての書いて入力キーの呼び出しを持っている私はちょうど新しいコードに私の古いコードを変換する必要があります。

これは私の既存のコード

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

私はコメントの最後の行を述べるように、これは、私が変更したいコードであるが、これを読み込み、誰を助けるためにその下の3ボックススタイルのための誇大広告APIですその行が何であるかを理解する。

Answer 1

私はハイフ文書のマークアップについてはわかりませんが、私はこれをまとめています。意味のある部分を抽出することができますか？プロジェクトで使用するためのキーコードですか？

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>