Перемещение объектов на холсте

Question

Я пытаюсь создать игру на холсте, чтобы улучшить свой набор навыков. Идея состоит в том, что на экране есть два объекта, контролируемых игроком. Я инициализирую игру игроками, а затем начинаю игровой цикл, который прослушивает вход игрока.

На данный момент я могу нарисовать игроков на холсте (просто прямоугольники на этом этапе). Однако у меня возникают проблемы с , перемещая эти объекты на каждом «тике» игрового цикла. На данный момент прямоугольник просто нарисован поверх прямоугольника в предыдущем кадре; Я хочу очистить холст и повторно нарисовать «игроков» в каждом тике.

Как бы я это сделал? И это лучший способ, или есть лучший подход?

Я бы опубликовал образец кода, но мой файл JavaScript довольно многословный, и я надеюсь, что описания выше достаточно.

Answer 1

Если внешний вид игроков не меняется от кадра к кадру, я бы использовал три отдельных элемента: canvas: один для фона и по одному для каждого игрока. Тогда вам не нужно ничего перерисовывать, просто измените значения CSS left и top для каждого холста игрока.

Если внешний вид игроков делает, измените, тогда вам нужно будет их перерисовать. Но вы все равно можете использовать отдельный файл canvas для каждого из них. Таким образом, вам не нужно перерисовывать фон. Вы можете просто рисовать и позиционировать каждого игрока.

Конечно, если фон изменяется или перемещается, вам все равно придется его перерисовать. В этом случае вы можете просто использовать один холст или экспериментировать с отдельными холстами. Что касается конкретного вопроса о том, как очистить фон (или любой холст) до перерисовки, вот a couple of ways to clear a canvas.

В любом случае, используйте requestAnimationFrame() в браузерах, которые его поддерживают, а не setTimeout() или setInterval(). Если вы ищете requestAnimationFrame polyfill, вы найдете много примеров того, как это сделать и по-прежнему поддерживать старые браузеры. Вот хороший requestAnimationFrame polyfill.

Answer 2

Вот хороший учебник с базовым игровым циклом. Он создает фон, монстры и игрока.

http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

// The main game loop 
    var main = function() { 
     var now = Date.now(); 
     var delta = now - then; 

     update(delta/1000); 
     render(); 

     then = now; 
    }; 

Вы обновить свои позиции объекта в обновлении, а затем вызвать визуализации.

Answer 3

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

Да, вы должны перерисовать все на одном холсте, даже объекты, которые не преобразуются из одного кадра в другой. Очистка холста прост, используйте context.clearRect(0, 0, canvas.width, canvas.height) или сделайте fillRect, чтобы нарисовать фон каким-либо цветом или нарисуйте изображение на всем холсте, чтобы иметь статический фон, все, что покрывает весь холст.

Итак, вы обновляете объекты, очищаете полотно, затем перерисовываете все. Поскольку у вас всего 2 исправления, и единственное, что меняется, это их положение, это будет очень легко реализовать.

Когда вы начинаете делать более сложные вещи, которые вы, возможно, захотите пойти на более объектно-ориентированный ПОДХОД, я имею в виду каждый объект в сцене должен «знать, как рисовать себя», как:

var player1 = new PlayerRect(position); 
player1.draw(context); 

Таким образом, вы бы обновить его положение в цикле делать что-то вроде этого:

player.position.x += 10; 

в случае, если вы в конечном итоге с сотнями объектов, все, что вам нужно сделать, это список, в котором можно добавить/удалить эти объекты и цикл, вызывающие их метод draw.

Я имею в виду, так я это делаю.