ポリマーでソコバンを構築します

このチュートリアルは、再利用可能なWebコンポーネントを作成するためのJavaScriptライブラリであるPolymerを使用して、古典的なソコバンゲームの構築を示しています。

yeomanジェネレーターとbowerを出版用に活用します。generator-polymer

重要な概念：

• ポリマーWebコンポーネント：カスタム、再利用可能なHTML要素が作成され、ソコバンゲームを構成し、コード組織と保守性を促進します。 双方向のデータバインディングにより、リアルタイムのゲーム状態の更新が可能になります
カスタム要素：
• 、、などの要素は、sprite-elタグを使用して定義されています。 プロパティは、ポリマー式を使用してビューにバインドされています box-elsokoban-elゲームロジック：polymer-elementa
ゲームマップとモデルを管理します。 ユーザー入力はa
• で処理されます。 データバインディングにより、自動ビューの更新が保証されます パブリッシングのBower：GameControllerKeyboardInputManagerで構築した後、コンポーネントはBowerを介して公開され、Bowerレジストリでアクセスできるようになり、
に提出できます。 CSSスタイリングは、カスタム要素内でカプセル化されています
• ポリマーのセットアップ：generator-polymercustomelements.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 serve）：index.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、およびビューアップデートのためにデータバインディングを使用してゲームを調整します。 反復テンプレートは、複数のボックスをレンダリングするために使用されます。 カスタムイベント（）は、ゲームの完了を信号するために起動されます

Bowerでの出版：box-el sprite-el sokoban-el開発後、Bowerを使用してカスタム要素を公開します。 GameControllerがWebコンポーネントのタグを含めてKeyboardInputManager。

さらなる調査：

完全なソースコードはGitHubで利用できます（元の記事で提供されると想定されるリンク）。 この記事では、スタイリング、プロパティ観測、およびより高度なポリマー機能についても説明しています。 customelements.ioギャラリーには、既存のWebコンポーネントの例があります

この改訂された出力は、同義語を使用して文章をrephrasingしながら、フローと読みやすさを改善するための再構築段落を使用しながら、元の意味を維持します。 画像は元の形式と場所のままです

以上がポリマーでソコバンを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。