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

Question

I am a beginner with javascript, trying to make a javascript space game where you move a spaceship to avoid asteroids.

Here's a preview link. It should work on desktop or mobile: http://dylanmadigan.net/_digital-work/game-2/5-tilt/index.html

I want the ship to tilt slightly to the left or right when moving. Is it better to tilt the ship with sprite sheet,or to actually rotate the graphic in javascript?

I am currently doing this with a sprite sheet. The ship animation is two frames (to make booster flames flicker). I have two frames dedicated to each straight, left, and right, on a single sprite sheet. view player sprite sheet here This appears to result in flickering when the sprite moves left and right. And every once in a while it will just disappear. I'm not sure why.

The sprite sheet is preloaded, and I thought that would prevent flickering. It did, until I decided to add the 4 more frames for the tilted spaceship.

Would it be better if I used javascript to rotate the graphic instead of a sprite sheet? I just thought the sprite sheet would be easier.

Answer 1

It does not matter how you rotate the ship, via a drawn sprite or rotated in the canvas. Each method has its advantages and disadvantages.

Rotating a sprite about its center

To render a sprite that is scaled,and rotated about its center, and has a alpha fade (because...? why not)

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
}

When done drawing sprites you will need to reset the transform and alpha

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

You can just have one ship sprite and make the engines a separate sprite (just remove the ship and keep the same size to make positioning easy) Then you can control the engine glow independently of the ship using the alpha to fade in and out. You can also set the ctx.globalCompositeOperation = "lighter" or "screen" to get a better engine glow. Reset the comp mode to "source-over" for normal rendering.

You should also look into using requestAnimationFrame and a single game loop rather than use all the setTimeouts.