Contoh bagaimana Canvas mengimplementasikan Tetris

Saya sudah lama tidak menggunakan kanvas, jadi saya mengenal kanvas lagi dengan menulis permainan kecil Tetris. Jika Anda memiliki dasar kanvas tertentu, tidak sulit untuk menerapkannya.

Melihat antarmuka akhir game, kita dapat melihat bahwa fungsi-fungsi utama berikut perlu diterapkan:

• Papan permainan, yaitu kotak berukuran 12 * 20, dan apakah informasi kotak tersebut terisi;
• Memindahkan balok, balok perlu menyadari fungsi pergerakan dan deformasi.

Keseluruhan panel merupakan sistem koordinat dengan sudut kiri atas (0,0) sebagai titik asal, sudut kanan atas (12,0), sudut kiri bawah (0,20), dan sudut kanan bawah (12,20 ). Posisi koordinat setiap titik dapat ditentukan. Apakah kotaknya sudah terisi, kita bisa menganggap setiap kotak sebagai elemen array, 0 berarti tidak, 1 berarti sudah terisi. Panel 12 * 20 menggunakan dua lapisan array, yaitu 20 array dengan panjang 12 diimplementasikan.

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

Kode untuk menggambar panel dapat diimplementasikan menggunakan API kanvas paling dasar.

 //Kisi untuk(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){//Kotak telah diisi dengan konten 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(); } } } //Perbatasan ctx.lineWidth=4; %,.3)'; ctx.moveTo(0,0); ctx.lineTo(12*40,20*40); ctx.lineTo(12*40,0);

7 grafik berikut digunakan dalam permainan

Dikombinasikan dengan sistem koordinat yang diperkenalkan di atas, array [x1, y1, x2, y2, x3, y3, x4, y4] merupakan representasi data dari koordinat empat titik pada grafik di atas sebagai berikut:

 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]];

Untuk memindahkan blok, cukup lintasi seluruh array dan tambahkan vektor perpindahan. Ini sangat sederhana.

 bentuk kelas { konstruktor(m){ this.m = Object.assign([],m); } move(x,y){ // Perpindahan var m = this.m, l = m.length; |0; untuk (var i=0;i<l;i=i+2){ m[i]+=x; m[i+1]+=y; } kembalikan ini;

Rotasi balok. Selain bergerak ke kiri, ke kanan, dan ke atas, balok di Tetris juga ikut berputar ya? Setelah dipikir-pikir sebentar, Anda akan mengetahui bahwa ini hanyalah transformasi matriks, yaitu setiap kali bentuknya diputar 90 derajat mengelilingi titik pusat. Saya menggunakan titik ketiga dalam array sebagai titik pusat transformasi grafis. Tentu saja pemrosesan ini tidak sempurna.

 kelas Bentuk { transform(){//Transformasi matriks dua dimensi var m =ini.m, l = m.panjang, 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); untuk (var i=0;i<l;i=i+2) { jika(i == c) lanjutkan; var mx = m[i]- x, saya = m[i+1] - y, nx = mx*cos - saya*dosa, ny = saya*cos + mx*sin; m[i]=x+nx; m[i+1]=y+ny;

Ini terutama mencakup tiga aspek berikut

• Posisi blok tidak boleh melebihi penilaian antarmuka;
• Penghakiman ketika balok mencapai dasar atau penempatannya selesai;
• Permainan berakhir penghakiman.

Lintasi larik tersebut (1) Jika koordinat y suatu titik adalah 19, berarti titik tersebut telah mencapai dasar; (2) Dapatkan informasi tentang posisi koordinat y+1 pada peta itu telah terisi. Dalam kedua kasus tersebut, ketika periode blok bergerak berakhir, cukup isi koordinat blok ke dalam larik yang sesuai dengan peta.

Jika koordinat y+1 sudah terisi dan koordinat saat ini kurang dari 1, yaitu sudah berada di bagian atas antarmuka, maka permainan selesai.

 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 ]; 1 ){ // Posisi y+1 telah terisi isEnd = true; if(y <= 1){isOver=true;} // Permainan selesai istirahat }}

Pada akhir siklus pergerakan blok, diperiksa apakah setiap lapisan sudah penuh, dan pemrosesan setelah kotak sudah penuh. Jika semua elemen array tertentu adalah 1, itu berarti gridnya penuh. Kemudian hapus array tersebut, dan pada saat yang sama dorong array dengan setiap elemen 0 ke bagian atas daftar.

 checkPoint(){ var itu = ini, peta = itu.peta; for(var i=0,l=peta.panjang;i<l;i++){ if(Matematika.min.berlaku(null,peta[i]) == 1){// Menunjukkan bahwa lapisan sudah penuh that.maps.splice(i,1); Tingkatkan skor that.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]);

Hal utama adalah mengikat peristiwa keydown. Perlu dicatat bahwa peristiwa pergeseran kiri dan pergeseran kanan mencakup penilaian batas.

 bindEvent(){ var that = this; document.addEventListener('keydown',function(e){ switch(e.keyCode){ kasus 13: //masukkan cancelAnimationFrame(that.timer); that.init().update( ); istirahat; kasus 80: //p that.pause = !that.pause; kasus 40: //down that.d = 0.5; //kiri var di atas = salah, peta = itu.peta, bentuk = itu.bentuk, m = bentuk.m; for(var i=0,l=m.length;i<l;i=i+2){ if(m[i]<=0 || peta[m[i+1]][m[i]-1] == 1){ over = true;break; } } if(!over) shape.move( -1,0); kasus; 39: //kanan var atas = salah, bentuk = itu.bentuk, peta = itu.peta, m = bentuk.m; for(var i=0,l=m.panjang;i<l;i=i+2 ){ if(m[i]>=11 || peta[m[i+1]][m[i]+1] == 1){ over = true;break; } } if(!over) bentuk. pindah(1,0); kasus 32: //spasi that.shape.transform(); break; } },false);}

Fungsi Tetris yang paling dasar diterapkan di sini, dan poin fungsional seperti level tidak diterapkan. Pada saat yang sama, demo masih memiliki kekurangan yang perlu diperbaiki.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.