Backbone.js

Electron+Backbone.jsでボードゲーム〜3目並べ

投稿日:2017年1月29日 更新日:

ボイラープレート

前回までのをまとめた.
github.com/seventhsense/my_electron_boilerplate

構想

ゲーム開始画面 → ゲーム(ターン→チェックを繰り返し) → ゲームオーバー → ゲーム開始画面

  • 盤面の個々のマスにModelをつけて、クリックなどを監視する.
  • ゲームの情報は、backbone.radioを使ってやり取りする.
  • 単純な三目並べをつくる.

盤面の描画

  • 3×3=9個のモデルを作り、盤面の個々のマスに対応させる.これでモデルの値を変えれば、Viewが自動でアップデートされる.
  • また、Viewでクリックイベントを監視するので、その結果をゲームに反映する.

ecoテンプレートはこんな感じ.if文くらいのロジックはテンプレートでやってもいい.

Marionette.ObjectとBackbone.Radio

ゲームの進行は、Viewとは独立したObjectを作り、Backbone.RadioでViewと交信するようにした.
チャンネルは、MyApp.Channels.Gameという名前で最初に作ってある.
これをlistenToすればチャンネルからの指事でイベントを設定できるし、triggerすればチャンネルにイベントを送信できる.

ゲームの主なロジックはcollectionに書くことにした.また、のちにAIから手を選択するときのためにいろいろな計算を作った.
なお、Backbone.Collectionは、データをsetにとどめて、saveなどをしなければurlプロパティは不要だった.
先手に1、後手に-1をいれているので、3つ並ぶと3か−3になるはず.
そして、全列を毎回チェックする必要はなく、置いた石の縦列と横列だけチェックすればよい.
ななめはロジックが面倒そうなので、毎回チェック.
各列の合計に後手なら-1をかけて、最大値を確認して3になってたらゲーム終了.
また、もう石を置くところがなければ引き分けで終了.

AI

ざつにAIを作った.
2コマ連続のリーチがかかっていたら、まず勝ちに行く.
勝ちチェックと同じ要領で、列の合計が2になってたらリーチなので、残りの空いたマスに石を置きに行く.
underscoreでfilterして、firstの値をとった.
つぎに、相手にリーチがかかっていたら妨害する.
そのほかはランダム.

Done!

そこそこ遊べる.計画的に2重リーチをかけれるようにしたい.
マスの価値としては真ん中が4パターン、角が3パターン、そのほかが2パターンの勝ちパターンにつながっているので、真ん中の価値が一番高そうだけど、真ん中を取ればいいのかというとそうでもなさそう.

packaging

electron-packagerをつかう.

ソースコード

github.com/seventhsense/electron_sanmoku

-Backbone.js
-,

執筆者:

関連記事

Backbone.jsからjQuery UIのDialogを使う例

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

Underscore.jsのリファレンスなどのリンクメモ

By: Anne-Lise Heinrichs – CC BY 2.0 Underscore.jsは便利な関数ライブラリ. Backbone.jsが依存している.一部でアンスコと呼ばれてい …

Backbone-formsをさわってみた

github.com/powmedia/backbone-forms backbone-formsの特徴 簡単なスキーマでフォームを生成 バリデーション ネストしたフォーム 使えるそしてカスタマイズ可 …

no image

Rails3.2でJasmineをつかってBackbone.jsのCollectionをテストしてみる

  前回 Rails3.2でJasmineをつかってBackbone.jsのModelをテストしてみる   Developing Backbone.js Applications …