wie man ein Rect rotiert und es immer noch in die richtige Richtung bewegt, basierend auf seiner Rotation

Question

Ich mache ein Spiel in HTML5/JavaScript, und ich möchte den Spieler drehen, und bewegt sich in der richtigen Richtung basierend auf seiner Rotation. Hier ist ein Link zu Ich habe die grundlegende Rotation: HTML5 canvas - rotate object without moving coordinates. hier sind einige meines Code:

<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> 

die Spieler gerade bewegen sich nach oben und unten über das Display, aber ich will es in Richtung seiner Verkleidung bewegen.

Answer 1

Sie müssen den Winkel des Spielers berücksichtigen, wenn Sie die Geschwindigkeit anpassen. Versuchen Sie so etwas wie:

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; 
} 

Die cos() und sin() sind trigonometrischen Funktionen und nehmen einen Winkel in Radiant als Argument. Daher der Umrechnungsfaktor von Math.PI/180.

Hoffentlich macht das den Trick. Ich bin auf einem Tablet und kann nicht leicht von hier aus ...