gpt4 book ai didi

javascript - 使用 2d html5Canvas 和 ctx.rotate 函数沿其面向的方向移动对象

转载 作者:可可西里 更新时间:2023-11-01 02:37:52 25 4
gpt4 key购买 nike

标题说明了一切,我正在尝试根据物体所在的 Angular 向前移动物体。

这是我的相关代码:

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 个不同 Angular sprite 表。这可行,但是旋转太快了。如果有人能告诉我为什么上述功能无法正常工作,或者我将如何让以下功能变慢:

if(Game.controls.right) {
currentFrame++;
angle+=10;
}

慢我的意思是当左键被按住时,angle+10; currentFrame++; 正在提升到快速,添加更多帧可能需要很长时间。

编辑

添加了一个 Jfiddle 对于我原来的问题, Angular 变量随着旋转而移动,例如,如果物体面向右, Angular 将等于 90,但物体看起来仍然不像是向右移动,虽然相机

最佳答案

尝试改变周围的 cos 和 sin 以及符号:

this.x += this.speed * Math.cos(angle * Math.PI / 180);
this.y += this.speed * Math.sin(angle * Math.PI / 180);

要进行旋转(在问题的编辑部分),您需要基本上减少步骤并提供更多 Sprite 。更多 Sprite 不会变慢,但会使用更多内存并稍微增加初始加载时间。

更新

Ok,有几处你需要更正(上面是其中之一,它们已在 fiddle 中更正)。

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

由于 Angular 将决定负值或正值,您只需根据意图添加或减去,因此对于向上添加两个值,对于向下减去两个值。 Angular 将确保正确签署增量。

在您的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 度的 Angular 。这将为您省去一些麻烦。我通过将 Angular 增加 90 度来补偿绘制功能,但这应该在 sprite 本身中进行调整。

此外,我修改了您的 key 处理程序(有关详细信息,请参见演示)。

关于javascript - 使用 2d html5Canvas 和 ctx.rotate 函数沿其面向的方向移动对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19355026/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com