Je n'ai pas utilisé Canvas depuis longtemps, alors je me suis familiarisé avec Canvas en écrivant le petit jeu Tetris. Si vous avez une certaine base de Canvas, ce n'est pas difficile à mettre en œuvre.
Explication détaillée du principeEn regardant l'interface finale du jeu, nous pouvons voir que les fonctions clés suivantes doivent être implémentées :
L'ensemble du panneau est un système de coordonnées avec le coin supérieur gauche (0,0) comme origine, le coin supérieur droit (12,0), le coin inférieur gauche (0,20) et le coin inférieur droit (12,20). ). La position des coordonnées de chaque point peut être déterminée. Que le carré ait été rempli, nous pouvons considérer chaque carré comme un élément du tableau, 0 signifie non, 1 signifie qu'il a été rempli. Le panneau 12 * 20 utilise deux couches de tableaux, c'est-à-dire que 20 tableaux d'une longueur de 12 sont implémentés.
var cartes = [[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0 ,1,0], ...];
Le code permettant de dessiner le panneau peut être implémenté à l'aide de l'API Canvas la plus basique.
//Grille pour(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){//Le carré a été rempli de contenu 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(); } } } //Bordure 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.restore(); Implémentation de blocsLes 7 graphiques suivants sont utilisés dans le jeu
Combiné avec le système de coordonnées présenté ci-dessus, le tableau [x1, y1, x2, y2, x3, y3, x4, y4] est la représentation des données des coordonnées des quatre points dans les graphiques ci-dessus. Les coordonnées des sept graphiques sont. comme suit:
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]];
Pour déplacer le bloc, parcourez simplement tout le tableau et ajoutez le vecteur de déplacement. C'est très simple.
class Shape { constructor(m){ this.m = Object.assign([],m); move(x,y){ // Déplacement var m = this.m, l = m.length; |0; for (var i=0;i<l;i=i+2){ m[i]+=x; m[i+1]+=y } renvoie ceci ;Rotation des blocs. En plus de se déplacer à gauche et à droite et de haut en bas, les blocs de Tetris tournent également, n'est-ce pas ? Après une petite réflexion, vous saurez qu'il ne s'agit que d'une transformation matricielle, c'est-à-dire à chaque fois que la forme pivote de 90 degrés autour du point central. J'utilise le troisième point du tableau comme point central de la transformation graphique. Bien entendu, ce traitement n'est pas parfait.
class Shape { transform(){//Transformation matricielle bidimensionnelle 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) pour (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 - mon*sin, ny = mon*cos + mx*sin ; m[i]=x+nx; m[i+1]=y+ny; renvoie ceci ; conditions aux limitesIl comprend principalement les trois aspects suivants
Parcourez le tableau (1) Lorsque la coordonnée y d'un point est 19, cela signifie qu'il a atteint le bas ; (2) Obtenez les informations sur la position y+1 de la coordonnée dans les cartes. Si elle est 1, cela signifie. il a été rempli. Dans les deux cas, lorsque la période du bloc en mouvement se termine, il suffit de remplir les coordonnées du bloc dans le tableau correspondant aux cartes.
Si le y+1 de la coordonnée a été rempli et que la coordonnée actuelle est inférieure à 1, c'est-à-dire qu'elle est déjà en haut de l'interface, alors le jeu est terminé.
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){ // En bas isEnd = true;break; 1 ){ // La position y+1 a été remplie isEnd = true; if(y <= 1){isOver=true;} // Le jeu est terminé }}À la fin du cycle de mouvement des blocs, il est vérifié si chaque couche est pleine et le traitement après le carré est plein. Si tous les éléments d'un certain tableau valent 1, cela signifie que la grille est pleine. Supprimez ensuite le tableau et placez en même temps un tableau avec chaque élément de 0 en tête de la liste.
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){// Indique que la couche est pleine that.maps.splice(i,1); that.score+=10; Augmentez le score that.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]); Événements contraignantsL'essentiel est de lier l'événement keydown. Il convient de noter que les événements de décalage à gauche et à droite incluent le jugement des limites.
bindEvent(){ var that = this; document.addEventListener('keydown',function(e){ switch(e.keyCode){ cas 13 : //entrez CancelAnimationFrame(that.timer); that.init().update( ); cas 80 : //p that.pause = !that.pause ; cas 40 : //down that.d = 0.5 ; //var gauche dessus = false, maps = that.maps, shape = that.shape, m = shape.m for(var i=0,l=m.length;i<l;i=i+2){ if(m[i]<=0 || maps[m[i+1]][m[i]-1] == 1){ over = true;break; } } if(!over) shape.move( -1,0); cassure; 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 || maps[m[i+1]][m[i]+1] == 1){ over = true;break } } if(!over) forme. déplacer(1,0); pause; cas 32 : //espace that.shape.transform(); break; } },false);} RésumerLes fonctions les plus basiques de Tetris sont implémentées ici, et des points fonctionnels tels que les niveaux ne sont pas implémentés. En même temps, la démo présente encore des imperfections qui doivent être corrigées.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.