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

執筆者:

関連記事

Rails3.2とBackbone.jsでサーバーサイドのソーティング

By: Haldane Martin – CC BY 2.0   Rails3.2とBackbone.jsでサーバーサイドのフィルタリング 次はソートを実装したい 目次1 サーバ …

Todolistをmarionette化

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

Backbone.js0.9.10以降のクライアントサイドでのvalidate

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …

Backbone.jsでモデルとフォームを関連づける〜backbone_datalink.js

By: See-ming Lee – CC BY 2.0     こんなコードでフォームからjQueryでいちいち指定しているのを [crayon-58b5aa30a4 …