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

執筆者:

関連記事

no image

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

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

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …

気になるBackbone.jsのプラグインとTips

  By: Francisco Gonzalez 随時更新中 目次1 気になるBackbone.jsのプラグイン2 チュートリアル3 Tips4 気になるjQueryのプラグイン 気になるB …

Backbone.jsとjQuery Mobileを一緒に使うためのリンクメモ

  By: Rick Turoczy jQuery Mobileの公式から jQuery Mobile, Backbone.js and Require.js 一例だけどエレガントなのはjQ …