No he usado Canvas durante mucho tiempo, así que me familiaricé con Canvas nuevamente escribiendo el pequeño juego Tetris. Si tienes una determinada base de Canvas, no es difícil de implementar.
Explicación detallada del principio.Al observar la interfaz final del juego, podemos ver que es necesario implementar las siguientes funciones clave:
Todo el panel es un sistema de coordenadas con la esquina superior izquierda (0,0) como origen, la esquina superior derecha (12,0), la esquina inferior izquierda (0,20) y la esquina inferior derecha (12,20). ). Se puede determinar la posición de las coordenadas de cada punto. Si el cuadrado se ha llenado, podemos considerar cada cuadrado como un elemento de matriz, 0 significa que no, 1 significa que se ha llenado. El panel 12 * 20 utiliza dos capas de matrices, es decir, se implementan 20 matrices con una longitud de 12.
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], ...];
El código para dibujar el panel se puede implementar utilizando la API de lienzo más básica.
//Cuadrícula for(var i=0;i<12;i++){ for(var j=0;j<20;j++){ ctx.fillRect(i*40,j*40,40,40); StrokeRect(i*40,j*40,40,40); if(this.maps[j][i]==1){//El cuadrado se ha llenado con contenido ctx.save(); ctx.lineWidth=4; ctx.fillStyle='hsla(200,100%,50%,.5)'; ctx.strokeStyle='hsla(200,100%,50%,.9)'; j*40,40,40); ctx.strokeRect(i*40+2,j*40+2,38,38); ctx.restore(); } } } //Borde ctx.lineWidth=4; %,.3)'; ctx.moveTo(0,0); ctx.lineTo(0,20*40); ctx.lineTo(12*40,20*40); ctx.lineTo(12*40,0); ctx.stroke();Implementación de bloques.
Los siguientes 7 gráficos se utilizan en el juego.
Combinada con el sistema de coordenadas presentado anteriormente, la matriz [x1, y1, x2, y2, x3, y3, x4, y4] es la representación de datos de las coordenadas de los cuatro puntos en los gráficos anteriores. como sigue:
varArr = [[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 el bloque, simplemente recorre toda la matriz y agrega el vector de desplazamiento. Es muy simple.
clase Forma { constructor(m){ this.m = Object.assign([],m } move(x,y){ // Desplazamiento var m = this.m, l = m.length; |0; para (var i=0;i<l;i=i+2){ m[i]+=x; m[i+1]+=y }
Rotación de bloques Además de moverse hacia la izquierda y hacia la derecha y hacia arriba y hacia abajo, los bloques en Tetris también giran, ¿verdad? Después de pensarlo un poco, sabrás que esto es solo una transformación matricial, es decir, cada vez que la forma gira 90 grados alrededor del punto central. Utilizo el tercer punto de la matriz como punto central de la transformación de gráficos. Por supuesto, este procesamiento no es perfecto.
clase Forma { transform(){//Transformación matricial 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) continuar; var mx = m[i]- x, my = m[i+1] - y, nx = mx*cos - my*sin, ny = my*cos + mx*sin; m[i]=x+nx; m[i+1]=y+ny } devuelve esto }condiciones de contorno
Incluye principalmente los siguientes tres aspectos.
Recorrer la matriz (1) Cuando la coordenada y de cualquier punto es 19, significa que ha llegado al fondo (2) Obtener la información sobre la posición y+1 de la coordenada en los mapas. ha sido llenado. En ambos casos, cuando finaliza el período del bloque en movimiento, simplemente complete las coordenadas del bloque en la matriz correspondiente a los mapas.
Si se ha completado y+1 de la coordenada y la coordenada actual es menor que 1, es decir, ya está en la parte superior de la interfaz, entonces el juego termina.
var isEnd = false,isOver=false,x,y;for(var i=0,sl=esa.forma.m.longitud;i<sl;i=i+2){ x=esa.forma.m[i ]; y=that.shape.m[i+1]; if(y >= 19){ // En la parte inferior estáEnd = true;break } if(that.maps[y+1][x]== 1 ){ // La posición y+1 se ha llenado isEnd = true; if(y <= 1){isOver=true;} // El juego ha terminado }}
Al final del ciclo de movimiento del bloque, se verifica si cada capa está llena y el procesamiento después del cuadrado está lleno. Si todos los elementos de una determinada matriz son 1, significa que la cuadrícula está llena. Luego elimine la matriz y, al mismo tiempo, coloque una matriz con cada elemento de 0 en el encabezado de la lista.
checkPoint(){ var eso = esto, mapas = eso.maps; for(var i=0,l=maps.length;i<l;i++){ if(Math.min.apply(null,maps[i]) == 1){// Indica que la capa está llena that.maps.splice(i,1); that.score+=10; Aumentar la puntuación that.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]);Eventos vinculantes
Lo principal es vincular el evento de pulsación de tecla. Cabe señalar que los eventos de desplazamiento a la izquierda y desplazamiento a la derecha incluyen el juicio de límites.
bindEvent(){ var that = this; document.addEventListener('keydown',function(e){ switch(e.keyCode){ caso 13: //ingrese cancelAnimationFrame(that.timer); that.init().update( ); romper; caso 80: //p eso.pausa = !esa.pausa; caso 40: //abajo eso.d = 0.5; //var izquierda encima = false, mapas = that.maps, forma = 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) forma.move( -1,0); caso; 39: //right var over = false, forma = that.shape, mapas = 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; mover(1,0); romper; caso 32: //espacio que.shape.transform(); break } },false);}Resumir
Aquí se implementan las funciones más básicas de Tetris y no se implementan puntos funcionales como los niveles. Al mismo tiempo, la demostración todavía tiene imperfecciones que deben corregirse.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.