Pelaksanaan HTML5 JS prinsip Tetris dan kemahiran tutorial step_html5 khusus
WBOY
Lepaskan: 2016-05-16 15:48:31
asal
1760 orang telah melayarinya
Prinsip asas untuk pelaksanaan permainan ini:
Kawasan permainan ialah kawasan dengan saiz terhad lebar 10 unit dan ketinggian 6 unit (unit mutlak kanvas adalah tetap, bukan piksel).
Buat kelas RusBlock untuk mengandungi data dan gelagat yang sepadan, dan buat tatasusunan dua dimensi aState[21][25] untuk merekodkan segi empat tepat yang ditanda dalam kawasan permainan.
Tetris mempunyai 7 bahagian Nombor dan kedudukan segi empat tepat yang diduduki oleh setiap bahagian adalah berbeza, jadi buat kelas bahagian, dan kemudian buat tatasusunan untuk menyimpan 7 bahagian. Setiap bahagian mengandungi tatasusunan untuk menyimpan segi empat tepat yang diduduki oleh bahagian tersebut. Apabila bahagian yang jatuh mencapai bahagian bawah, bahagian baharu akan dihasilkan, dan segi empat tepat bahagian yang ditanda akan diberikan kepada tatasusunan kawasan permainan.
Dalam fungsi gelung permainan, cetak bahagian jatuh, bahagian tetap dan bahagian jatuh seterusnya.
Pengetahuan asas:
HTML5 CSS JS Permainan ini termasuk tiga fail:
RusBlock.html: Elemen tetapan RusBlock.css: Gaya tetapan RusBlock.js: Kawalan skrip
Langkah Satu: Tetapan Antara Muka dan Penyediaan Bahan
RusBlock.html
Salin kod
Kodnya adalah seperti berikut:
RosBlock.css
Salin kod
Kodnya adalah seperti berikut:
badan { warna latar:kelabu; text-align:center; fon keluarga:'Times New Roman'; background-image:url(“”); } h1#Nama-Permainan { warna latar:putih; lebar:100%; saiz fon:x-besar; } h2,#Skor Permainan { saiz fon:x-besar; warna latar belakang:putih; } #Kawasan-Permainan { kedudukan:mutlak; kiri:10%; lebar:80%; tinggi:99%; } kanvas#Game-Canvas { warna latar:putih; lebar:80%; tinggi:98%; apung:kiri; } #Kawasan-Butang ,#Kawasan-Skor{ lebar:10%; tinggi:100%; apung:kiri; } #Button-Permainan-Mula ,#Button-Permainan-Tamat,#Butang-Perkongsian-Permainan,#Pilih-Peringkat-Permainan{ lebar:100%; tinggi:10%; saiz fon:lebih besar; sempadan-kanan-lebar:3px; warna latar belakang:putih; } #Pilih-Peringkat-Permainan { lebar:100%; tinggi:100%; saiz fon:x-besar; warna sempadan:kelabu; }
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn