Блог

Я новичок в javascript, пытаюсь создать космическую игру на javascript, в которой вы перемещаете космический корабль, чтобы избежать астероидов.

Вот ссылка для предварительного просмотра. Он должен работать на настольном или мобильном устройстве: http://dylanmadigan.net/_digital-work/game-2/5-tilt/index.html

Я хочу, чтобы корабль слегка наклонялся влево или вправо при движении. Что лучше наклонять корабль с помощью листа спрайтов или фактически поворачивать графику в javascript?

В настоящее время я делаю это с помощью листа спрайтов. Анимация корабля состоит из двух кадров (чтобы заставить пламя ракеты-носителя мерцать). У меня есть два фрейма, посвященных каждой прямой, левой и правой, на одном листе спрайтов. просмотр таблицы спрайтов игрока здесь, похоже, это приводит к мерцанию, когда спрайт перемещается влево и вправо. И время от времени он просто исчезает. Я не уверен, почему.

Лист спрайтов предварительно загружен, и я подумал, что это предотвратит мерцание. Так и было, пока я не решил добавить еще 4 фрейма для наклонного космического корабля.

Было бы лучше, если бы я использовал javascript для поворота графики вместо листа спрайтов? Я просто подумал, что лист спрайтов будет проще.

Не имеет значения, как вы поворачиваете корабль, с помощью нарисованного спрайта или повернутого на холсте. Каждый метод имеет свои преимущества и недостатки.

Вращение спрайта вокруг его центра

Для рендеринга спрайта, который масштабируется, поворачивается вокруг своего центра и имеет альфа-затухание (потому что …? почему бы и нет)

 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
}
 

Когда закончите рисовать спрайты, вам нужно будет сбросить преобразование и альфа

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

Вы можете просто иметь один спрайт корабля и сделать двигатели отдельным спрайтом (просто удалите корабль и сохраните тот же размер, чтобы упростить позиционирование) Затем вы можете управлять свечением двигателя независимо от корабля, используя альфа-сигнал для его затухания и исчезновения. Вы также можете установить ctx.globalCompositeOperation = "lighter" или "screen" , чтобы получить лучшее свечение двигателя. Сбросьте режим comp "source-over" для нормального рендеринга.

Вам также следует изучить возможность использования requestAnimationFrame и одного игрового цикла, а не использовать все установленные таймауты.