HTML5 JS-Implementierung der Tetris-Prinzipien und spezifische Schritte im Tutorial von „steps

HTML5 JS-Implementierung der Tetris-Prinzipien und spezifische Schritte im Tutorial von „steps_html5'.

WBOY

Freigeben： 2016-05-16 15:48:31

Original

1793 Leute haben es durchsucht

Grundprinzipien für die Umsetzung dieses Spiels:

Die Spielfläche ist eine begrenzte Fläche. Die Spielfläche dieses Spiels hat 21×25 Rechtecke eine Breite von 10 Einheiten und eine Höhe von 6 Einheiten (die absolute Einheit der Leinwand ist fest, nicht Pixel).

Erstellen Sie die RusBlock-Klasse, um entsprechende Daten und Verhaltensweisen zu enthalten, und erstellen Sie ein zweidimensionales Array aState[21][25], um das markierte Rechteck im Spielbereich aufzuzeichnen.

Tetris besteht aus 7 Teilen. Die Anzahl und Position der von jedem Teil eingenommenen Rechtecke ist unterschiedlich. Erstellen Sie daher eine Teilklasse und dann ein Array zum Speichern der 7 Teile vom Teil eingenommenes Rechteck. Die Anzahl und Position der Rechtecke. Wenn der fallende Teil den Boden erreicht, wird ein neuer Teil generiert und das markierte Rechteck des Teils wird dem Array des Spielbereichs zugewiesen.

Drucken Sie in der Spielschleifenfunktion die fallenden Teile, die festen Teile und die nächsten fallenden Teile aus.

Grundkenntnisse:

HTML5 CSS JS
Dieses Spiel enthält drei Dateien:

RusBlock.html: Einstellungselemente
RusBlock.css: Einstellungsstil
RusBlock.js: Skriptsteuerung

Schritt Eins: Schnittstelleneinstellungen und Materialvorbereitung

RusBlock.html

Code kopieren

Der Code lautet wie folgt:

” preload=“auto“> GameOver-AudioPlayer“ preload=“auto“> =“Score-AudioPlayer“ preload=“auto“> ;div id=“Game-Area“>

;button id=“Button-Game-Start“ onclick=“GameStart()“>Start

„RusBlock.js“>
RosBlock.css

Code kopieren

Der Code lautet wie folgt:

body {
background-color:gray;
text-align:center;
Schriftfamilie: „Times New Roman“;
Hintergrundbild:url(“”);
}
h1#Game-Name {
background-color:white;
Breite:100 %;
Schriftgröße:x-large;
}
h2,#Game-Score {
font-size:x-large;
Hintergrundfarbe:weiß;
}
#Game-Area {
position:absolute;
links:10 %;
Breite:80%;
Höhe:99%;
}
canvas#Game-Canvas {
background-color:white;
Breite:80%;
Höhe:98%;
float:left;
}
#Button-Area ,#Score-Area{
width:10%;
Höhe:100 %;
float:left;
}
#Button-Game-Start ,#Button-Game-End,#Button-Game-Share,#Select-Game-Level{
width:100%;
Höhe:10 %;
Schriftgröße:größer;
border-right-width:3px;
Hintergrundfarbe:weiß;
}
#Select-Game-Level {
width:100%;
Höhe:100 %;
Schriftgröße:x-large;
Rahmenfarbe:grau;
}

第三步:编写js代码

RusBlock.js

Rusblock类包括的成员解析:

数据:

nCurrentComID:当前下落部件的ID

aState[21][25]:存储游戏区域状态的数组urrentCom:当前下落的部件

NextCom:下一部件

ptIndex：当前下落的部件相对游戏区域的索引

函数:

NewNextCom()：产生新的下一部件

NextComToCurrentCom():将下一部件的数据转移到当前下落的部件上.

CanDown():判断当前部件是否还可以下落

CanNew ()? 🎜>
Rotate() :当前部件顺时针旋转

Acceleratet():当前部件向下加速

Disappear():消去一行

CheckFail():判断是否游戏失败

InvalidateRect():刷新当前部件的区域

完成:
下载Demo