Question

我是javascript的初学者，试图制作一个javascript太空游戏，你可以移动太空飞船以避开小行星。

这是预览链接。它应该适用于桌面或移动设备： http://dylanmadigan.net/_digital-work/game-2/5-tilt/index.html

我希望船在移动时稍微向左或向右倾斜。用精灵表倾斜船只或用javascript实际旋转图形是不是更好？

我目前正在使用精灵表执行此操作。船舶动画是两帧（使助推器火焰闪烁）。我在一张精灵表上有两个专用于每个笔直，左和右的框架。 view player sprite sheet here 当精灵向左和向右移动时，这似乎会导致闪烁。每隔一段时间它就会消失。我不确定为什么。

精灵表被预加载，我认为这样可以防止闪烁。它确实如此，直到我决定为倾斜的太空船增加4个框架。

如果我使用javascript旋转图形而不是精灵表会更好吗？我只是觉得精灵表更容易。

Answer 1

如何通过绘制的精灵旋转船只或在画布中旋转无关紧要。每种方法都有其优点和缺点。

围绕中心旋转精灵

渲染一个缩放的精灵，并围绕其中心旋转，并具有alpha淡化（因为......？为什么不）？

function drawSprite(ctx,img,x,y,scale,rot,alpha){
    ctx.setTransform(scale,0,0,scale,x,y); // Position and scale
    ctx.rotate(rot); // rotate
    ctx.globalAlpha = alpha;  // set alpha
    ctx.drawImage(img,-img.width/2,-img.height/2); // draw sprite offset half its size
}

完成绘制精灵后，您需要重置变换和alpha

ctx.setTransform(1,0,0,1,0,0); // sets default transform
ctx.globalAlpha = 1.0; // resets alpha

你可以拥有一个船只精灵并使发动机成为一个单独的精灵（只需移除船只并保持相同的尺寸以便定位）然后你可以使用alpha淡入和控制发动机的发光独立于船只出。您还可以设置ctx.globalCompositeOperation = "lighter"或"screen"以获得更好的引擎亮度。将comp模式重置为"source-over"以进行正常渲染。

您还应该考虑使用requestAnimationFrame和单个游戏循环而不是使用所有setTimeouts。

Javascript帆布游戏 - 移动时倾斜太空飞船

1 个答案: