矩形を回転させる方法とその回転に基づいて正しい方向に移動する方法

Question

私はHTML5/JavaScriptでゲームを作っています。プレーヤーを回転させ、その回転に基づいて正しい方向に移動します。ここに私は基本的な回転を得たへのリンクです：HTML5 canvas - rotate object without moving coordinates。ここに私のコードの一部です：

<canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas> 
<script> 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var keys = []; 

window.addEventListener("keydown", function(e){ 
keys[e.keyCode] = true; 
}, false); 
window.addEventListener("keyup", function(e){ 
delete keys[e.keyCode]; 
}, false); 

var player = { 
x: 10, 
y: 10, 
width: 15, 
height: 15, 
color: 'blue', 
speed: 3, 
rotate: 0, 
rotateSpeed: 2 
}; 

function game(){ 
update(); 
render(); 
} 

function update(){ 
if(keys[87] || keys[38]) player.y -= player.speed; 
if(keys[83] || keys[40]) player.y += player.speed; 
if(keys[65] || keys[37]) player.rotate += player.rotateSpeed; 
if(keys[68] || keys[39]) player.rotate -= player.rotateSpeed; 
} 

function render(){ 
ctx.clearRect(0,0,WIDTH,HEIGHT); 
ctx.save(); 
ctx.translate(player.x+player.width/2, player.y+player.height/2); 
ctx.rotate(player.rotate*Math.PI/180); 
renderObject(-player.width/2, -player.height/2, player.width, player.height, player.color); 
ctx.restore(); 
} 

function renderObject(x,y,width,height,color){ 
ctx.fillStyle = color; 
ctx.fillRect(x,y,width,height); 
} 

setInterval(function(){ 
game(); 
}, 25); 
</script> 

プレイヤーはただ画面を上下に移動し、私はそれが方向にその対面を移動したいです。

Answer 1

速度を調整する際に、プレーヤーの角度を考慮する必要があります。

function update() { 
    if(keys[87] || keys[38]) { 
     player.y -= Math.cos(player.rotate*Math.PI/180) * player.speed; 
     player.x -= Math.sin(player.rotate*Math.PI/180) * player.speed; 
    } 
    if(keys[83] || keys[40]) { 
     player.y += Math.cos(player.rotate*Math.PI/180) * player.speed; 
     player.x += Math.sin(player.rotate*Math.PI/180) * player.speed; 
    } 

    if(keys[65] || keys[37]) player.rotate += player.rotateSpeed; 
    if(keys[68] || keys[39]) player.rotate -= player.rotateSpeed; 
} 

cos（）とsin（）はtrig関数で、引数としてラジアン単位の角度をとります。したがって、Math.PI/180の換算係数。

うまくいけば、それはトリックです。私はタブレットに載っていて、ここから簡単にテストすることはできません...