Bâtiment Sokoban avec polymère

Ce tutoriel montre la construction du jeu Sokoban classique à l'aide de Polymer, une bibliothèque JavaScript pour créer des composants Web réutilisables. Il exploite le générateur et le bower generator-polymer yeoman pour la publication.

Concepts clés:

• Composants Web polymères: Les éléments HTML personnalisés et réutilisables sont créés pour structurer le jeu Sokoban, promouvant l'organisation du code et la maintenabilité. La liaison des données bidirectionnelle permet des mises à jour d'état de jeu en temps réel.
• Éléments personnalisés: Des éléments comme sprite-el, box-el, et sokoban-el sont définis à l'aide de la balise polymer-element. Les propriétés sont liées à la vue à l'aide d'expressions polymères.
• Logique du jeu: a GameController gère la carte et le modèle de jeu. L'entrée de l'utilisateur est gérée par un KeyboardInputManager. La liaison des données assure des mises à jour de vue automatique.
• bower pour la publication: Après la construction avec generator-polymer, les composants sont publiés via Bower, ce qui les rend accessibles sur le registre Bower et soumis à customelements.io. Le style CSS est encapsulé dans des éléments personnalisés.

Configuration du polymère:

1. Installez le générateur: npm install generator-polymer -g
2. Créer un nouveau projet polymère: yo polymer (vous pouvez refuser l'ajout de composants standard.)

Cela crée une structure de projet (simplifiée):

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

Démarrer le développement avec grunt serve. index.html (simplifié):

<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>

Création d'éléments personnalisés (exemple: sprite-el):

Utilisez yo polymer:el sprite-el pour générer l'élément. 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>

Cela démontre la liaison des données ({{...}}), les propriétés publiées (spriteUrl, frame, position) et les propriétés calculées (posX, posY).

Logique et composants de jeu (box-el, sokoban-el):

L'élément box-el compose sprite-el et représente les boîtes, les murs, etc. L'élément sokoban-el orchestre le jeu, en utilisant GameController pour la logique, KeyboardInputManager pour l'entrée et la liaison des données pour les mises à jour de la vue. Les modèles itératifs sont utilisés pour rendre plusieurs boîtes. Les événements personnalisés (finished) sont licenciés pour signaler la fin du jeu.

Publication avec Bower:

Après le développement, utilisez Bower pour publier vos éléments personnalisés. Assurez-vous que votre bower.json comprend la balise Web-composant et soumettez-vous à customelements.io.

Exploration plus approfondie:

Le code source complet est disponible sur GitHub (lien supposé être fourni dans l'article d'origine). L'article traite également du style, de l'observation des propriétés et des caractéristiques de polymère plus avancées. La galerie customelements.io fournit des exemples de composants Web existants.

Cette sortie révisée maintient la signification d'origine lors de la reformulation des phrases, de l'utilisation des synonymes et de la restructuration des paragraphes pour améliorer le débit et la lisibilité. L'image reste dans son format et son emplacement d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!