3

私は個人的なプロジェクトとしてボードゲーム ハブを作成しており、AngularJS についてさらに学び、発見することができます。

私は一般的な実装を試みたので、正方形のグリッドと一般的なコントローラーを示す一般的なパーシャルがあり、実際のゲーム ロジックはすべてサービスに含まれています。実装したボードゲームごとに、そのようなサービスを 1 つ作成しました (現在は 2 つ)。一般的な方法で解決できないのは、グリッド内のセルです。ゲームによっては、そのコンテンツが文字、数字、画像、または (非常に複雑な) HTML である場合もあります。各セルの HTML をアセンブルするサービスを呼び出す getter 関数を使用することもできますが、これは実際には Angular らしくありません。そこで、セルの種類ごとにディレクティブを定義することを考えました。ページに条件付きでディレクティブを配置するにはどうすればよいですか (コントローラーで決定されたゲームの種類に基づいて)。

このハックっぽいものを必要としない、より洗練された解決策を思いつくことができれば、それを聞いてうれしいです.

4

1 に答える 1

3

これにはかなり良い解決策があると思います。現在所有している 2 つのゲームのそれぞれについて、UI の HTML モックアップを作成します。セル、スタイル、画像などをまとめます。完璧である必要はありませんが、構築されているように見えるようにする必要があります。

次に、それらの HTML を統合して、カバーの下で可能な限り類似するようにします。その共通性により、フロント エンドに必要な要素が示されるはずです。たとえば、チェスのような非常に退屈な古いゲーム (King of Tokyo や Carcassonne のような興味深いものではなく :) を行った場合、div として適切に機能する個々の正方形があることがわかります。

<table>
  <tr ng-repeat="row in board">
    <td ng-repeat="square in row">
      <div ng-class="square.class()"><img ng-src="square.img()"/></div>
    </td>
  </tr>
</table>

各正方形は、そのスタイリング用のクラスと、正方形にさまざまなチェスの駒を表示するためにそこに表示できる透明な PNG ファイルの両方を提供します。それはアイデアです。しかし、必要なインタラクションやアニメーション、または作成しようとしているユーザー エクスペリエンスにとって重要な何かが欠けているため、ゲームでは完全に失敗する可能性があります。

最終的には、API がどのように見えるべきかを考えるのではなく、UI からさかのぼって作業する必要があります。Tom Dale が Ember Data について語っている言葉を引用します。

于 2013-05-30T15:18:07.483 に答える