Building Sokoban with Polymer

This tutorial demonstrates building the classic Sokoban game using Polymer, a JavaScript library for creating reusable web components. It leverages the generator-polymer Yeoman generator and Bower for publishing.

Key Concepts:

• Polymer Web Components: Custom, reusable HTML elements are created to structure the Sokoban game, promoting code organization and maintainability. Two-way data binding enables real-time game state updates.
• Custom Elements: Elements like sprite-el, box-el, and sokoban-el are defined using the polymer-element tag. Properties are bound to the view using Polymer expressions.
• Game Logic: A GameController manages the game map and model. User input is handled by a KeyboardInputManager. Data binding ensures automatic view updates.
• Bower for Publishing: After building with generator-polymer, components are published via Bower, making them accessible on the Bower registry and submittable to customelements.io. CSS styling is encapsulated within custom elements.

Setting up Polymer:

1. Install the generator: npm install generator-polymer -g
2. Create a new Polymer project: yo polymer (You can decline adding standard components.)

This creates a project structure (simplified):

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

Start development with grunt serve. index.html (simplified):

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

Creating Custom Elements (Example: sprite-el):

Use yo polymer:el sprite-el to generate the element. sprite-el.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>

This demonstrates data binding ({{...}}), published properties (spriteUrl, frame, position), and computed properties (posX, posY).

Game Logic and Components (box-el, sokoban-el):

The box-el element composes sprite-el and represents boxes, walls, etc. The sokoban-el element orchestrates the game, using GameController for logic, KeyboardInputManager for input, and data binding for view updates. Iterative templates are used to render multiple boxes. Custom events (finished) are fired to signal game completion.

Publishing with Bower:

After development, use Bower to publish your custom elements. Ensure your bower.json includes the web-component tag and submit to customelements.io.

Further Exploration:

The full source code is available on GitHub (link assumed to be provided in the original article). The article also discusses styling, property observation, and more advanced Polymer features. The customelements.io gallery provides examples of existing web components.

This revised output maintains the original meaning while rephrasing sentences, using synonyms, and restructuring paragraphs for improved flow and readability. The image remains in its original format and location.

The above is the detailed content of Building Sokoban with Polymer. For more information, please follow other related articles on the PHP Chinese website!