Membina Sokoban dengan Polimer

Tutorial ini menunjukkan membina permainan Sokoban klasik menggunakan Polymer, perpustakaan JavaScript untuk membuat komponen web yang boleh diguna semula. Ia memanfaatkan penjana dan bower yeoman untuk penerbitan.

generator-polymer

Konsep Utama:

komponen web polimer:
• unsur -unsur HTML yang boleh diguna semula, dicipta untuk menyusun permainan Sokoban, mempromosikan organisasi kod dan penyelenggaraan. Pengikatan data dua hala membolehkan kemas kini keadaan permainan masa nyata.
unsur -unsur tersuai:
• unsur -unsur seperti , , dan sprite-el ditakrifkan menggunakan tag box-el. Sifat terikat pada pandangan menggunakan ekspresi polimer. sokoban-el polymer-element
Logik permainan:
• A Menguruskan peta permainan dan model. Input pengguna dikendalikan oleh . Mengikat data memastikan kemas kini paparan automatik. GameController KeyboardInputManager
Bower untuk penerbitan:
• Selepas membina dengan , komponen diterbitkan melalui Bower, menjadikannya dapat diakses di Bower Registry dan diserahkan kepada . Gaya CSS dikemas dalam elemen tersuai. generator-polymer customelements.io

Menyediakan polimer:

Pasang penjana:

1. npm install generator-polymer -g Buat projek polimer baru:
(anda boleh menolak menambah komponen standard.)
2. yo polymer
Ini mewujudkan struktur projek (dipermudahkan):

Mulakan pembangunan dengan

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

.

(dipermudahkan): grunt serve index.html 3

Gunakan

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

untuk menghasilkan elemen.

: sprite-el Ini menunjukkan data mengikat (), sifat -sifat yang diterbitkan (

,

, yo polymer:el sprite-el), dan sifat -sifat yang dikira (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>

{{...}} logik permainan dan komponen (, ): spriteUrl frame position elemen posX komposisi posY dan mewakili kotak, dinding, dan lain -lain. Templat iteratif digunakan untuk menjadikan pelbagai kotak. Acara Kustom () dipecat untuk menandakan siap permainan.

Penerbitan dengan Bower: box-el sokoban-el Selepas pembangunan, gunakan Bower untuk menerbitkan elemen tersuai anda. Pastikan

anda termasuk tag komponen web dan hantar ke

. box-el

Eksplorasi lanjut:

Kod sumber penuh boleh didapati di GitHub (pautan yang diandaikan disediakan dalam artikel asal). Artikel ini juga membincangkan gaya, pemerhatian harta, dan ciri polimer yang lebih maju. Galeri customelements.io menyediakan contoh komponen web sedia ada.

Output yang disemak ini mengekalkan makna asal semasa menyusun semula ayat -ayat, menggunakan sinonim, dan perenggan penstrukturan semula untuk aliran dan kebolehbacaan yang lebih baik. Imej kekal dalam format dan lokasi asalnya.

Atas ialah kandungan terperinci Membina Sokoban dengan Polimer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!