Есть код:
<script>
var deg = 0;
var rot = function(e){
if (e.keyCode == 37) {// если клавиша "влево"
deg -= 5;
deg %= 360;
document.getElementById('Player').style.MozTransform = 'rotate(' + deg + 'deg' + ')';
document.getElementById('Player').style.OTransform = 'rotate(' + deg + 'deg' + ')';
document.getElementById('Player').style.WebkitTransform = 'rotate(' + deg + 'deg' + ')';
};
if (e.keyCode == 38) {// если клавиша "вверх"
document.getElementById("Player").style.top = parseInt(document.getElementById("Player").style.top, 10) - (10 * Math.cos(deg / 180 * Math.PI)) + 'px';
document.getElementById('Player').style.left = parseInt(document.getElementById('Player').style.left, 10) + (10 * Math.sin(deg / 180 * Math.PI)) + "px";
}
if (e.keyCode == 39) {// если клавиша "вправо"
deg += 5;
document.getElementById('Player').style.MozTransform = 'rotate(' + deg + 'deg' + ')';
document.getElementById('Player').style.OTransform = 'rotate(' + deg + 'deg' + ')';
document.getElementById('Player').style.WebkitTransform = 'rotate(' + deg + 'deg' + ')';
}
if (e.keyCode == 40) {// если клавиша "вниз"
document.getElementById("Player").style.top = parseInt(document.getElementById("Player").style.top, 10) + (10 * Math.cos(deg / 180 * Math.PI)) + 'px';
document.getElementById('Player').style.left = parseInt(document.getElementById('Player').style.left, 10) - (10 * Math.sin(deg / 180 * Math.PI)) + "px";
}
}
window.onload = function() {
document.addEventListener("keydown", rot, false);
}
</script>
<div ID = "Player" style = "-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg); position: absolute; left: 100px; top: 100px; border: 1px solid black">
^
</div>
В принципе, все работает, но почему на "Вверх" и "Вниз" в left другой чем в top знак (+/-)?
И как отслеживать и кноаку "вверх", и кнопку "влево" одновременно?