标题类型说明了一切,我试图根据它所处的角度向前移动一个物体。
以下是我的相关代码:
xView = this.x-this.width/2;
yView = this.y-this.height/2;
playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, xView, yView, this.width, this.height);
playerCtx.save();
playerCtx.clearRect(0, 0, game.width, game.height);
playerCtx.translate(xView, yView);
playerCtx.rotate(angle *Math.PI/180);
playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, -xView, -yView, this.width, this.height);
playerCtx.restore();
}
if(Game.controls.left) {
angle-=1;
if(Game.controls.up){
this.x += this.speed * Math.cos(angle * Math.PI / 180);
this.y -= this.speed * Math.sin(angle * Math.PI / 180);
}
对象不会与var angle
对应。
修改
我无法弄清楚为什么我的代码没有工作,所以我改为使用包含36个不同角度的精灵表。这有效,但旋转速度太快。如果有人能告诉我为什么上面的工作不正常,或者我将如何使下面的功能变慢:
if(Game.controls.right) {
currentFrame++;
angle+=10;
}
慢一点我的意思是当按住左键时,angle+10; currentFrame++;
会提升到快,而添加更多帧可能需要太长时间。
修改
为原始问题添加了 Jfiddle ,角度变量随着旋转移动,例如,如果对象朝向右,角度将等于90,但对象仍然没有看起来它向右移动,虽然相机确实如此。
答案 0 :(得分:12)
尝试改变cos和罪恶以及符号:
this.x += this.speed * Math.cos(angle * Math.PI / 180);
this.y += this.speed * Math.sin(angle * Math.PI / 180);
要进行旋转(在问题的编辑部分中),您需要基本上减少步骤以及提供更多精灵。更多精灵不会慢,但会占用更多内存并增加初始加载时间。
<强>更新强>
好的,你需要纠正一些事情(以上是其中之一,并且它们在小提琴中得到纠正)。
<强> Modified fiddle 强>
其他事情在:
在update()
方法中:
// Add both here as angle with correctly use neg/pos
if (Game.controls.up) {
this.x += this.speed * Math.cos(angle * Math.PI / 180);
this.y += this.speed * Math.sin(angle * Math.PI / 180);
}
/// Sub both here as angle with correctly use neg/pos
if (Game.controls.down) {
this.x -= this.speed * Math.cos(angle * Math.PI / 180);
this.y -= this.speed * Math.sin(angle * Math.PI / 180);
}
由于角度将确定负值或正值,您只需根据意图进行加或减,因此对于向上添加两个值,向下减去两个值。角度将确保增量正确签名。
在draw
函数中有以下几点:
Player.prototype.draw = function (context, xView, yView) {
// Add the half width instead of subtract it
xView = this.x + this.width / 2;
yView = this.y + this.height / 2;
// not needed as you clear the canvas in the next step
//playerCtx.drawImage(imgSprite, 0, 0, ....
playerCtx.save();
playerCtx.clearRect(0, 0, game.width, game.height);
// make sure pivot is moved to center before rotation
playerCtx.translate(xView, yView);
// rotate, you should make new sprite where direction
// points to the right. I'm add 90 here to compensate
playerCtx.rotate((angle + 90) * Math.PI / 180);
// translate back before drawing the sprite as we draw
// from the corner and not the center of the image
playerCtx.translate(-xView, -yView);
playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height);
playerCtx.restore();
}
现在你会看到事情有效。
您的图像应始终指向右侧。这是因为它始终是0度的角度。这样可以省去一些麻烦。我通过向角度添加90度来补偿这是绘制函数,但这应该在精灵本身中进行调整。
此外,我修改了您的密钥处理程序(有关详细信息,请参阅演示)。