Я делаю небольшой клон Тетриса, используя некоторые функции HTML 5, и у меня возникла небольшая дилемма.
Мои тетромино не состоят из блоков - у них есть затенение и тени, которые зависят от вращения, и, таким образом, у каждого есть свое собственное изображение. Это означает, что я не могу использовать обычное «перерисовывать все» каждый раз, когда изменяется состояние игры, потому что это будет означать отслеживание всей истории выпадения фигур и «повторное воспроизведение», когда я хочу очистить линию.
Итак, мои варианты:
1) Создайте два элемента холста, накладываемых друг на друга. На обороте изображено «доска». Один сверху - это холст, на котором я могу легко нарезать и переставлять вещи. Это кажется очень хакерским, поскольку я хотел сохранить все в одном элементе canvas.
2) Создание контекста «рисования» и контекста «буфера». В контексте буфера у меня есть все части, и я могу свободно ими управлять, и когда приходит время рисовать буфер на экране, я получаюImageData, перебираю все пиксели и объединяю их в изображение платы. Затем я записываю это в контекст «рисования» с помощью putImageData. Эта проблема возникает из-за того, что я не могу найти способ взять структуру ImageData и объединить ее с элементом canvas (вы можете сделать это с помощью ImageElements, используя drawImage, но drawImage не будет принимать структуру ImageData).
Ни одно из решений не кажется мне очень элегантным.
Спасибо