Bauen von Sokoban mit Polymer

Dieses Tutorial zeigt, dass das klassische Sokoban -Spiel mit Polymer, einer JavaScript -Bibliothek zum Erstellen wiederverwendbarer Webkomponenten, erstellt wird. Es nutzt den Generator der generator-polymer yeoman zum Veröffentlichen.

Schlüsselkonzepte:

• Polymer -Webkomponenten: benutzerdefinierte, wiederverwendbare HTML -Elemente werden erstellt, um das Sokoban -Spiel zu strukturieren und die Codeorganisation und die Wartbarkeit zu fördern. Die Zwei-Wege-Datenbindung ermöglicht Updates in Echtzeit-Spielstatus.
• benutzerdefinierte Elemente: Elemente wie sprite-el, box-el und sokoban-el werden mit dem polymer-element -Tag definiert. Eigenschaften werden mit Polymerausdrücken an die Ansicht gebunden.
• Spiellogik: a GameController Verwaltet die Spielkarte und das Modell. Die Benutzereingabe wird von einem KeyboardInputManager behandelt. Die Datenbindung sorgt für automatische Ansichtsaktualisierungen.
• Bower zum Veröffentlichen: Nach dem Erstellen mit generator-polymer werden Komponenten über Bower veröffentlicht, wodurch sie in der Bower -Registrierung zugänglich sind und bei customelements.io eingereicht werden können. Das CSS -Styling ist in benutzerdefinierten Elementen eingekapselt.

Polymer einrichten:

1. Installieren Sie den Generator: npm install generator-polymer -g
2. Erstellen Sie ein neues Polymerprojekt: yo polymer (Sie können das Hinzufügen von Standardkomponenten ablehnen.)

Dies schafft eine Projektstruktur (vereinfacht):

<code>.
|-- Gruntfile.js
|-- app
|   |-- elements
|   |   |-- ... (custom elements)
|   |-- index.html
|   |-- scripts
|   |   |-- app.js
|-- bower.json
`-- package.json</code>

Beginnen Sie die Entwicklung mit grunt serve. index.html (vereinfacht):

<code class="language-html"><link rel="import" href="bower_components/platform/platform.js">
<link rel="import" href="elements/elements.html">
<div class="game-container">
  <soko-ban></soko-ban>
</div>
</code>

Erstellen benutzerdefinierter Elemente (Beispiel: sprite-el):

Verwenden Sie yo polymer:el sprite-el, um das Element zu generieren. sprite-el.html:

<code class="language-html"><link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="sprite-el">
  <template>
    <link rel="stylesheet" href="sprite-el.css">
    <div class="sprite" style="top: {{posY}}px; left: {{posX}}px; height: {{frame.height}}px; width: {{frame.width}}px; background: url({{spriteUrl}}) {{frame.x}}px {{frame.y}}px"></div>
  </template>
  
</polymer-element></code>

Dies zeigt die Datenbindung ({{...}}), veröffentlichte Eigenschaften (spriteUrl, frame, position) und berechnete Eigenschaften (posX, posY).

Spiellogik und Komponenten (box-el, sokoban-el):

Das box-el -Element komponiert sprite-el und repräsentiert Kästchen, Wände usw. Das sokoban-el Element orchestriert das Spiel mit GameController für Logik, KeyboardInputManager für Eingabe und Datenbindung für Ansichtsaktualisierungen. Iterative Vorlagen werden verwendet, um mehrere Boxen zu rendern. Benutzerdefinierte Ereignisse (finished) werden auf die Signalspiel -Fertigstellung abgefeuert.

Veröffentlichung mit Bower:

Verwenden Sie nach der Entwicklung Bower, um Ihre benutzerdefinierten Elemente zu veröffentlichen. Stellen Sie sicher

Weitere Erkundung:

Der vollständige Quellcode ist auf GitHub verfügbar (Link wird im Originalartikel angenommen). In dem Artikel werden auch Styling, Immobilienbeobachtung und fortschrittlichere Polymermerkmale erörtert. Die customelements.io Galerie enthält Beispiele für vorhandene Webkomponenten.

Diese überarbeitete Ausgabe behält die ursprüngliche Bedeutung bei, während die Sätze, die Verwendung von Synonymen und die Umstrukturierungsabsätze für einen verbesserten Fluss und die Lesbarkeit neu gestaltet werden. Das Bild bleibt in seinem ursprünglichen Format und Ort.

Das obige ist der detaillierte Inhalt vonBauen von Sokoban mit Polymer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!