Contoh kode untuk Tetris versi 3D WebGL berdasarkan HTML5

Ringkasan: Tetris 2D dimainkan dengan buruk oleh orang-orang, jadi saya tiba-tiba membuat konsol game 3D untuk memainkan Tetris. . . Ide dasar implementasinya adalah mengimplementasikan mini-game Tetris terlebih dahulu dalam 2D, kemudian menggunakan fungsi pemodelan 3D untuk membuat model arcade 3D, dan terakhir menempelkan mini-game 2D tersebut ke dalam model 3D.

(ps: Bagian ekspansi terakhir mewujudkan kombinasi video dan model 3D)

http://www.hightopo.com/demo/tetris/

Pertama, selesaikan mini-game 2D

Dalam proses pemeriksaan dokumen resmi, saya mengetahui bahwa parameter komponen HT disimpan di objek ht.DataModel(), dan berbagai efek khusus disajikan setelah memuat model data dalam tampilan.

 gameDM = new ht.DataModel(); //Inisialisasi model data g2d = new ht.graph.GraphView(gameDM); //Inisialisasi tampilan 2d g2d.addToDOM();

Mulailah membuat model permainan

Langkah pertama adalah membuat kerangka permainan dan menentukan ruang lingkup permainan. Dalam dokumen tersebut, kita dapat mengetahui bahwa ht.Node adalah kelas dasar graphView untuk merender primitif node. Selain menampilkan gambar, juga dapat mendukung berbagai grafik yang telah ditentukan sebelumnya. Jadi saya akan menggunakan kelas ini untuk membuat 4 persegi panjang dan menggunakannya untuk mengatur cakupan permainan.

 var lineNode = new ht.Node();lineNode.s({ bentuk: persegi, //Bentuk persegi panjang.latar belakang: #D8D8D8, //Mengatur warna latar belakang bentuk.batas.lebar: 1, //Lebar batas 1 bentuk. border .color: #979797 // Warna border}); lineNode.setPosition(x, y); // Atur posisi tampilan elemen, pojok kiri atas adalah 0, 0 Koordinat titik primitif ke posisi tengahnya lineNode.setSize(width, height); // Tetapkan atribut lebar dan tinggi dari primitif gameDM.add(lineNode);

Setelah mengatur x:552, y:111, lebar:704, tinggi:22 kita bisa mendapatkan grafik pertama:

Batas atas sudah ada, sekarang mari kita buat tiga sisi lagi untuk membentuk bingkai:

 x:211, y:562, lebar:22, lebar:880x:893, y:562, lebar:22, lebar:880x:552, y:1013, lebar:704, lebar:22

Hasilnya adalah sebagai berikut:

Perbatasan pada dasarnya sudah selesai. Selama proses penelusuran, saya menemukan bahwa 4 batas dapat diseret. Selanjutnya, sesuaikan metode inisialisasi perbatasan:

 lineNode.s({ bentuk: persegi, //Bentuk persegi panjang.latar belakang: #D8D8D8, //Mengatur warna latar belakang bentuk.border.width: 1, //Lebar batas 1 bentuk.border.color: #979797, //Border warna 2d.editable : false, // Apakah dapat diedit 2d.movable : false, // Apakah dapat dipindahkan 2d.selectable : false // Apakah dapat dipilih });

Untuk menghasilkan kotak, ide saya adalah membuat beberapa kotak, menggabungkannya ke dalam grafik yang kita perlukan, dan menempatkannya pada posisi yang sesuai melalui perhitungan koordinat:

Setelah blok dihasilkan, mulailah operasi rotasi pada grafik. Ada dua solusi. Yang pertama adalah menyimpan koordinat grafik yang dibalik dalam array secara berurutan, dan setiap kali bentuknya diubah, ambil kumpulan koordinat sebelumnya atau berikutnya dalam array untuk melakukan perubahan; koordinat grafis yang dibalik dari grafik secara berurutan. Objek ht.Block() digunakan untuk menggabungkan primitif yang sesuai menjadi satu kesatuan. Saat melakukan deformasi, Anda hanya perlu memilih 90° ke arah yang sesuai. Disini saya memilih cara kedua, kodenya sebagai berikut:

 function createUnit(x, y) { var node = new ht.Node(); node.s({ bentuk: persegi, bentuk.latar belakang: #D8D8D8, bentuk.batas.lebar: 1, bentuk.batas.warna: #979797 }); simpul.setPosition(x, y); simpul.setSize(44, 44); node;}var blok = new ht.Block();block.addChild(createUnit(552, 133));block.addChild(createUnit(552, 89));block.addChild(createUnit(508, 133));block .addChild(createUnit(596, 133));block.setAnchor(0,5, 0.75); //Mengatur posisi tengah kombinasi. Titik ini akan dipasang saat memutar block.setPosition(552, 144);

Blok menetapkan titik pusat Jangkar seperti yang ditunjukkan di bawah ini:

Saat mengatur rotasi, cukup gunakan fungsi setRotation untuk memutar blok: