← Demos

Tetris

Pontos { pontos }
Recorde { recorde }
Linhas { linhas }
Nivel { nivel }
Guardada (C)

Tetris

Encaixe as pecas, limpe as linhas e sobreviva a aceleracao.

← → mover   descer ↑ / X girar   Z girar ao contrario Espaco queda seca   C guardar P pausar   R reiniciar

Recorde atual: { recorde }.

Pausado

As pecas esperam.

Fim de jogo

{ pontos } pontos, { linhas } linhas, nivel { nivel }.

Novo recorde!

Voce fez { tetrises } { tetrises === 1 ? 'tetris' : 'tetrises' }.

Proximas
Tetrises { tetrises }
Ultima jogada { ultimaJogada }
Sequencia x{ sequencia }

movem ou X gira Z gira ao contrario desce Espaco queda seca C guarda P pausa No celular, deslize sobre o tabuleiro ou use os botoes.

O que esta demo mostra. As pecas guardada e da fila nao sao canvas: sao grades de <span> geradas por v-for aninhado, com a cor entrando por :style. O tabuleiro e canvas porque ali sao duzentas celulas por quadro, com peca fantasma e animacao de limpeza. Entre os dois mundos existe um contrato simples: a grade do jogo mora em um array comum fora do estado reativo, e so o que a interface exibe vira propriedade do componente. O saco de sete pecas, o recorde e o som saem de V.storage e V.sound.