Kommentar: Tetris hat 7 Teile, und jeder Teil nimmt eine andere Anzahl und Position des Rechtecks ein. Erstellen Sie also eine Komponentenklasse und erstellen Sie dann ein Array, um 7 Teile zu speichern. Jedes Teil enthält das Array, um die Anzahl und Position des von der Komponente besetzten Rechtecks zu speichern. Das Folgende ist eine detaillierte Einführung
Die Grundprinzipien dieser Spielumsetzung:Der Spielbereich ist ein Bereich mit begrenzter Größe. Der Spielbereich dieses Spiels hat 21 × 25 Rechtecke, jede Rechteckbreite 10 Einheiten und die Höhe 6 Einheiten (die absolute Einheit der Leinwand ist fest, Nicht-Pixel).
Erstellen Sie die Rusblock-Klasse, um die entsprechenden Daten und Verhaltensweisen zu enthalten, und erstellen Sie ein zweidimensionales Array Astate [21] [25], um die markierten Rechtecke im Spielbereich aufzuzeichnen.
Tetris hat 7 Teile, und jeder Teil nimmt eine andere Anzahl und Position des Rechtecks ein. Erstellen Sie also eine Komponentenklasse und erstellen Sie dann ein Array, um 7 Teile zu speichern. Jedes Teil enthält das Array, um die Anzahl und Position des von der Komponente besetzten Rechtecks zu speichern. Wenn der fallende Teil beendet ist, wird ein neuer Teil erzeugt und das markierte Rechteck des Teils wird der Auswahl des Spielbereichs zugeordnet.
In der Spieleschleife werden die fallenden Teile gedruckt, die bereits festgelegten Teile und die fallenden Teile gedruckt.
Grundkenntnisse:
HTML5 CSS JS
Dieses Spiel enthält drei Dateien:
Rusblock.html: Elemente einstellen
Rusblock.css: Set Style
Rusblock.js: Skriptsteuerung
Schritt 1: Schnittstelleneinstellungen und Materialvorbereitung
Rusblock.html
<! DocType html>
<html>
<kopf>
<title> Rusblock </title>
<link rel = stylesheet type = text/css href = rusblock.css>
<script type = text/javaScript>
Funktion ShareGame () {
var url =? link = + document.url + & title = rusblock;
window.showmodaldialog ([url]);
}
</script>
</head>
<Body OnKeyUp = Action (Ereignis)>
<Audio Loop = Loop ID = Hintergrund-Audioplayer PRELOAD = AUTO>
<Source Src = Audio/Hintergrund.mp3 "type = audio/mp3"/>
</audio>
<Audio ID = GameOver-AudioPlayer PRELOAD = AUTO>
<Source Src = Audio/GameOver.ogg type = audio/ogg>
</audio>
<Audio ID = Score-AudioPlayer PRELOAD = AUTO>
<Source Src = Audio/Score.mp3 ″ type = audio/mp3 ″/>
</audio>
<div id = game-area>
<div id = button-area>
<h1 id = game-name> rusblock </h1>
<button id = button-game-start onclick = gameStart ()> start </button>
<Button ID = Button-Game-End Onclick = Gameend ()> Ende </button>
<Form ID = Form-Game-Ebene>
<Select ID = Select-Game-Level>
<Optionswert = 500 ″ ausgewählt = ausgewählt> Easy </Option>
<Option Value = 300 ″> Normal </Option>
<Option Value = 200 ″> Hard </Option>
</select>
</form>
<button onclick = Sharegame () id = Button-Game-Share> Teilen Sie Renren </button> frei
</div>
<canvas id = game-canvas> </canvas>
<div id = Score-Area>
<h2> Punktzahl </h2>
<p id = game-score> 0 </p>
</div>
</div>
<script type = text/javaScript src = rusblock.js> </script>
</body>
</html>
Schritt 2: Stil
Rosblock.css
Körper {
Hintergrundfarbe: Grau;
Text-Align: Mitte;
Schriftfamilie: "Times New Roman";
Hintergrundbild: URL ();
}
h1#spielername {
Hintergrundfarbe: weiß;
Breite: 100%;
Schriftgröße: x-large;
}
H2,#Game-Score {
Schriftgröße: x-large;
Hintergrundfarbe: weiß;
}
#GAME-TUREA {
Position: absolut;
Links: 10%;
Breite: 80%;
Höhe: 99%;
}
Canvas#Game-Canvas {
Hintergrundfarbe: weiß;
Breite: 80%;
Höhe: 98%;
float: links;
}
#Button-Gebiet,#Score-Gebiet {
Breite: 10%;
Höhe: 100%;
float: links;
}
#Button-Game-Start,#Button-Game-End,#Button-Game-Share,#Select-Game-Level {
Breite: 100%;
Höhe: 10%;
Schriftgröße: größer;
Grenzrechte Breite: 3px;
Hintergrundfarbe: weiß;
}
#Select-Game-Level {
Breite: 100%;
Höhe: 100%;
Schriftgröße: x-large;
Grenzfarbe: Grau;
}
Schritt 3: JS -Code schreiben
Rusblock.js
Analyse von Mitgliedsvorhersagen von Rusblock Klasse:
Daten:
ncurrentcomid: Die ID der aktuellen Tropfenkomponente
Astate [21] [25]: Ein Array, das den Spielbereichstaat speichert
CurrentCom: Der aktuell fallende Teil
NEXTCOM: Nächster Teil
PTIndex: Der Index des aktuell fallenden Teils in Bezug auf den Spielbereich
Funktion:
NewNextcom (): Neue nächste Komponente generieren
Weitere
Candown (): Bestimmen Sie, ob die aktuelle Komponente noch fallen kann
Cannew (): Bestimmen Sie, ob neue Komponenten generiert werden können
Links (): Die aktuelle Komponente bewegt sich nach links
Right (): Die aktuelle Komponente bewegt sich nach rechts
Rotate (): Die Stromkomponente dreht im Uhrzeigersinn
Acceleratet (): Die aktuelle Komponente beschleunigt nach unten
Verschwinden (): Beseitigen Sie eine Linie
CheckFail (): Bestimmen Sie, ob das Spiel fehlschlägt
Invalysect (): Aktualisieren Sie den Bereich der aktuellen Komponente
Komplett: Download Demo