Блог

Я делаю небольшой клон Tetris, используя некоторые функции HTML 5, и я столкнулся с небольшой дилеммой.

Мои тетромино не состоят из блоков — у них есть затенение и тени, которые зависят от поворота, и, следовательно, каждый является своим собственным изображением. Это означает, что я не могу использовать обычное «перерисовывать все» каждый раз при изменении состояния игры, потому что это означало бы отслеживать всю историю выпадения фрагментов и «воспроизводить» ее всякий раз, когда я хочу очистить строку.

Итак, мои варианты:

1) Создайте два элемента холста, наложенных друг на друга. Изображение на обратной стороне — это изображение «доски». Тот, что сверху, — это холст pieces, где я могу легко нарезать и переставлять объекты. Хотя это кажется очень хакерским, поскольку я хотел сохранить все в одном элементе canvas.

2) Создайте контекст «рисования» и контекст «буфера». В контексте буфера у меня есть все фрагменты, и я могу свободно ими манипулировать, а когда приходит время выводить буфер на экран, я получаю ImageData, перебираю все пиксели и объединяю их в изображение доски. Затем я записываю это в контекст «рисования» с помощью putImageData. Эта проблема возникает из-за того, что я не могу найти способ взять структуру ImageData и поместить ее в элемент canvas (вы можете сделать это с помощью ImageElements, используя drawImage, но drawImage не будет принимать структуру ImageData).

Ни одно из решений не кажется мне очень элегантным.

Спасибо

В наслоении холстов нет ничего «хакерского».

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

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