用聚合物建造索科班

>本教程演示了使用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中文网其他相关文章！