用聚合物建造索科班

>本教程演示了使用Polymer（用於創建可重複使用的Web組件的JavaScript庫）構建經典的Sokoban遊戲。 它利用 yeoman發電機和鮑爾出版。 > generator-polymer

密鑰概念：

聚合物Web組件：
• 自定義，可重複使用的HTML元素是為了構建索科班遊戲，促進代碼組織和可維護性的。 雙向數據綁定啟用實時遊戲狀態更新。
自定義元素：
• > ，和sprite-el>的元素是使用box-el>標記定義的。 屬性使用聚合物表達式綁定到視圖。 sokoban-el polymer-element
遊戲邏輯： a
• >管理遊戲地圖和模型。 用戶輸入由A 處理。 數據綁定確保自動查看更新。 GameControllerKeyboardInputManager>出版的鮑爾：
使用
• 構建後，通過鮑爾（Bower）發布組件，使其可以在Bower註冊表上訪問，並可以提交給>。 CSS樣式被封裝在自定義元素中。 generator-polymer customelements.io
設置聚合物：

安裝發電機：

1. 創建一個新的聚合物項目：npm install generator-polymer -g（您可以拒絕添加標準組件。）
2. yo polymer這將創建一個項目結構（簡化）：>

開始開發。

（簡化）：

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

grunt serveindex.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>
<🎜>

> >使用sprite-el生成元素。 ：

yo polymer:el sprite-el這演示了數據綁定（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>

，

）和計算屬性（{{...}}，spriteUrl，frame）。 positionposX遊戲邏輯和組件（posY，

）

元素組成box-el>，代錶框，牆等。 sokoban-el>元素在logic中使用來協調遊戲，用於輸入，以及用於查看更新的數據綁定。 迭代模板用於渲染多個盒子。 自定義事件（

）被解僱以發出信號。

> box-elsprite-el>與鮑爾發布： sokoban-el GameController開發後，使用Bower發布您的自定義元素。 確保您的KeyboardInputManager包含Web-Component標籤並提交到finished>。

>

進一步的探索：

>完整的源代碼可在GitHub上獲得（假定在原始文章中提供的鏈接）。 本文還討論了樣式，屬性觀察和更高級的聚合物功能。 畫廊提供了現有的Web組件的示例。

customelements.io此修訂後的輸出在使用同義詞和重組段落的同時保持原始含義，以提高流量和可讀性。 該圖像保持其原始格式和位置。

>

以上是用聚合物建造索科班的詳細內容。更多資訊請關注PHP中文網其他相關文章！