Exemplo de como o canvas implementa o Tetris

Faz muito tempo que não uso o canvas, então me familiarizei com o canvas novamente escrevendo o pequeno jogo Tetris. Se você tiver uma certa base de canvas, não será difícil de implementar.

Olhando para a interface final do jogo, podemos ver que as seguintes funções principais precisam ser implementadas:

• O tabuleiro do jogo, que é um quadrado 12 * 20, e se as informações do quadrado estão preenchidas;
• Blocos móveis, os blocos precisam realizar as funções de movimento e deformação.

Todo o painel é um sistema de coordenadas com o canto superior esquerdo (0,0) como origem, o canto superior direito (12,0), o canto inferior esquerdo (0,20) e o canto inferior direito (12,20 ). A posição das coordenadas de cada ponto pode ser determinada. Quer o quadrado tenha sido preenchido, podemos pensar em cada quadrado como um elemento da matriz, 0 significa que não, 1 significa que foi preenchido. O painel 12 * 20 usa duas camadas de arrays, ou seja, 20 arrays com comprimento de 12 são implementados.

 var mapas = [[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0 ,1,0], ...];

O código para desenhar o painel pode ser implementado usando a API canvas mais básica.

 //Grade for(var i=0;i<12;i++){ for(var j=0;j<20;j++){ ctx.fillRect(i*40,j*40,40,40); acidente vascular cerebralRect(i*40,j*40,40,40); if(this.maps[j][i]==1){//O quadrado foi preenchido com conteúdo ctx.save(); ctx.lineWidth=4; j*40,40,40); ctx.strokeRect(i*40+2,j*40+2,38,38); ctx.restore(); %,.3)';ctx.moveTo(0,0); ctx.lineTo(12*40,20*40);

Os 7 gráficos a seguir são usados ​​no jogo

Combinado com o sistema de coordenadas apresentado acima, a matriz [x1, y1, x2, y2, x3, y3, x4, y4] é a representação de dados das coordenadas dos quatro pontos nos gráficos acima. do seguinte modo:

 var Arr = [[4,0,4,1,5,1,6,1],[4,1,5,1,6,1,6,0],[4,0,5,0,5,1, 6,1],[4,1,5,0, 5,1,6,0],[5,0,4,1,5,1,6,1],[4,0,5,0,6,0,7,0],[5,0, 6,0,5,1,6,1]];

Para mover o bloco, basta percorrer todo o array e adicionar o vetor de deslocamento. É muito simples.

 class Shape { construtor(m){ this.m = Object.assign([],m } move(x,y){ // Deslocamento var m = this.m, l = m.length; |0; para (var i=0;i<l;i=i+2){ m[i]+=x;

Rotação dos blocos Além de mover para a esquerda e para a direita e para cima e para baixo, os blocos do Tetris também giram, certo? Depois de pensar um pouco, você saberá que se trata apenas de uma transformação de matriz, ou seja, cada vez que a forma é girada 90 graus em torno do ponto central. Eu uso o terceiro ponto da matriz como ponto central da transformação gráfica. É claro que esse processamento não é perfeito.

 class Shape { transform(){//Transformação de matriz bidimensional var m =this.m, l = m.length, c = Math.ceil(l/2), x = m[c], y = m[c+ 1], cos = Math.cos(Math.PI/180 * 90), sin = Math.sin(Math.PI/180 * 90) para (var i=0;i<l;i=i+2) { if(i == c) continue; var mx = m[i]- x, my = m[i+1] - y, nx = mx*cos - meu*sin, ny = meu*cos + mx*sin; m[i]=x+nx; m[i+1]=y+ny } retorne isto }

Inclui principalmente os seguintes três aspectos

• A posição do bloco não pode exceder o julgamento da interface;
• Julgamento quando o bloco atinge o fundo ou a colocação é concluída;
• Jogo sobre julgamento.

Percorra o array (1) Quando a coordenada y de qualquer ponto for 19, significa que atingiu o fundo (2) Obtenha a informação sobre a posição y+1 da coordenada nos mapas. foi preenchido. Em ambos os casos, quando o período do bloco móvel terminar, basta preencher as coordenadas do bloco no array correspondente aos mapas.

Se o y+1 da coordenada foi preenchido e a coordenada atual for menor que 1, ou seja, já está no topo da interface, então o jogo acabou.

 var isEnd = false,isOver=false,x,y;for(var i=0,sl=that.shape.m.length;i<sl;i=i+2){ x=that.shape.m[i ]; y=that.shape.m[i+1]; if(y >= 19){ // Na parte inferior isEnd = true;break } if(that.maps[y+1][x]== 1){ // A posição y+1 foi preenchida isEnd = true; if(y <= 1){isOver=true;} // O jogo acabou break }}

Ao final do ciclo de movimentação do bloco, é verificado se cada camada está preenchida e o processamento após o preenchimento do quadrado. Se todos os elementos de um determinado array forem 1, significa que a grade está cheia. Em seguida, exclua o array e, ao mesmo tempo, coloque um array com cada elemento 0 no topo da lista.

 checkPoint(){ var that = this, maps = that.maps; for(var i=0,l=maps.length;i<l;i++){ if(Math.min.apply(null,maps[i]) == 1){// Indica que a camada está cheia that.maps.splice(i,1); Aumente a pontuação that.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]);

O principal é vincular o evento keydown. Deve-se notar que os eventos de deslocamento para a esquerda e deslocamento para a direita incluem julgamento de limite.

 bindEvent(){ var that = this; document.addEventListener('keydown',function(e){ switch(e.keyCode){ case 13: //enter cancelAnimationFrame(that.timer); that.init().update( ); break; case 80: //p that.pause = !that.pause; //var esquerdo sobre = false, mapas = that.maps, shape = that.shape, m = shape.m; for(var i=0,l=m.length;i<l;i=i+2){ if(m[i]<=0 || mapas[m[i+1]][m[i]-1] == 1){ over = true;break } } if(!over) shape.move( -1,0); 39: //right var over = false, shape = that.shape, maps = that.maps, m = shape.m for(var i=0,l=m.length;i<l;i=i+2; ){ if(m[i]>=11 || mapas[m[i+1]][m[i]+1] == 1){ over = true;break; } if(!over) forma. mover(1,0); case 32: //espaço that.shape.transform();

As funções mais básicas do Tetris são implementadas aqui, e pontos funcionais como níveis não são implementados. Ao mesmo tempo, a demo ainda apresenta imperfeições que precisam ser corrigidas.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.