Komentar: Tetris memiliki 7 bagian, dan setiap bagian menempati jumlah dan posisi persegi panjang yang berbeda, jadi buat kelas komponen, dan kemudian buat array untuk menyimpan 7 bagian. Setiap bagian berisi array untuk menyimpan jumlah dan posisi persegi panjang yang ditempati oleh komponen. Berikut ini adalah pengantar terperinci
Prinsip -prinsip dasar implementasi game ini:Area permainan adalah area ukuran terbatas. Area permainan dari game ini memiliki 21 × 25 persegi panjang, setiap lebar persegi panjang adalah 10 unit, dan tingginya 6 unit (unit absolut kanvas diperbaiki, non-pixel).
Buat kelas RUSBlock untuk berisi data dan perilaku yang sesuai, dan buat array dua dimensi Astate [21] [25] untuk merekam persegi panjang yang ditandai di area game.
Tetris memiliki 7 bagian, dan masing -masing bagian menempati jumlah dan posisi yang berbeda dari persegi panjang, jadi buat kelas komponen, dan kemudian buat array untuk menyimpan 7 bagian. Setiap bagian berisi array untuk menyimpan jumlah dan posisi persegi panjang yang ditempati oleh komponen. Ketika bagian jatuh berakhir, bagian baru akan dihasilkan, dan persegi panjang yang ditandai dari bagian akan ditugaskan ke array area permainan.
Dalam fungsi loop game, bagian yang jatuh dicetak, bagian yang sudah tetap, dan bagian yang jatuh dicetak.
Pengetahuan Dasar:
HTML5 CSS JS
Game ini mencakup tiga file:
Rusblock.html: pengaturan elemen
Rusblock.css: set gaya
Rusblock.js: Kontrol skrip
Langkah 1: Pengaturan antarmuka dan persiapan material
Rusblock.html
<! Doctype html>
<Html>
<head>
<title> rusblock </iteme>
<tautan rel = stylesheet type = text/css href = rusblock.css>
<type skrip = teks/javascript>
fungsi sharegame () {
var url =? link = + document.url + & title = rusblock;
window.showmodaldialog ([url]);
}
</script>
</head>
<body onkeyup = action (event)>
<audio loop = loop id = latar belakang-audioplayer preload = auto>
<Sumber SRC = Audio/Background.mp3 ″ Type = Audio/MP3 ″/>
</audio>
<audio id = Gameover-audioplayer preload = auto>
<Sumber SRC = Audio/GameOver.ogg Type = Audio/Ogg>
</audio>
<audio id = skor-audioplayer preload = auto>
<Sumber SRC = Audio/Score.mp3 ″ Type = Audio/MP3 ″/>
</audio>
<Div ID = Game-Area>
<Div ID = tombol-area>
<H1 ID = Game-Name> rusblock </h1>
<tombol id = tombol-game-start onClick = gamestArt ()> MULAI </button>
<tombol ID = tombol-game-end OnClick = GameEnd ()> end </button>
<Form ID = Form-Game-Level>
<Pilih ID = Select-Game-Level>
<Nilai opsi = 500 ″ dipilih = dipilih> mudah </tipt>
<Nilai opsi = 300 ″> Normal </tipt>
<Nilai opsi = 200 ″> keras </tion>
</pilih>
</form>
<Tombol OnClick = ShareGame () ID = tombol-game-share> Bagikan ke Renren </button>
</div>
<Canvas ID = Game-Canvas> </canvas>
<Div ID = skor-area>
<H2> skor </h2>
<P ID = Game-Score> 0 </p>
</div>
</div>
<type skrip = teks/javascript src = rusblock.js> </script>
</body>
</html>
Langkah 2: Gaya
Rosblock.css
tubuh {
Latar Belakang: Gray;
Teks-Align: tengah;
Font-Family: 'Times New Roman';
latar belakang-gambar: url ();
}
h1#game-name {
Latar Belakang: Putih;
Lebar: 100%;
Ukuran font: X-Large;
}
H2,#Game-Score {
Ukuran font: X-Large;
Latar Belakang: Putih;
}
#Game-Area {
Posisi: Absolute;
Kiri: 10%;
Lebar: 80%;
Tinggi: 99%;
}
Canvas#Game-Canvas {
Latar Belakang: Putih;
Lebar: 80%;
Tinggi: 98%;
float: kiri;
}
#Button-Area,#SCORE-AREA {
Lebar: 10%;
Tinggi: 100%;
float: kiri;
}
#Tombol-game-start,#tombol-game-end,#tombol-game-share,#Select-Game-level {
Lebar: 100%;
Tinggi: 10%;
Ukuran font: lebih besar;
Batas-kanan-lebar: 3px;
Latar Belakang: Putih;
}
#Select-Game-level {
Lebar: 100%;
Tinggi: 100%;
Ukuran font: X-Large;
Color perbatasan: abu-abu;
}
Langkah 3: Tulis kode JS
Rusblock.js
Parsing anggota disertakan oleh kelas rusblock:
data:
ncurrentcomid: ID komponen drop saat ini
Astate [21] [25]: Array yang menyimpan negara bagian permainan
CurrentCom: bagian yang saat ini jatuh
Nextcom: Bagian selanjutnya
Ptindex: Indeks bagian yang saat ini jatuh relatif terhadap area permainan
fungsi:
NewNextCom (): menghasilkan komponen baru berikutnya
Nextcomtocurrentcom (): Transfer data dari komponen berikutnya ke komponen yang saat ini jatuh
Candown (): Tentukan apakah komponen saat ini masih bisa jatuh
Cannew (): Tentukan apakah komponen baru dapat dihasilkan
Left (): Komponen saat ini bergerak ke kiri
Right (): Komponen saat ini bergerak ke kanan
Rotate (): Komponen saat ini berputar searah jarum jam
ACCELERATET (): Komponen saat ini berakselerasi ke bawah
Menghilang (): menghilangkan garis
Checkfail (): Tentukan apakah permainan gagal
Invalidaterect (): Segarkan area komponen saat ini
Lengkap: Unduh demo