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でリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …

三目並べゲームのAI〜原始モンテカルロ法

By: Luca Galli – CC BY 2.0 目次1 ゲーム用のAI2 シャローコピー3 AI4 勝率 ゲーム用のAI 三目並べのAIを考えてみた. 有効手をリストアップして、おの …

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

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

Rails3.2とBackbone.jsでサーバーサイドのフィルタリング

By: Haldane Martin – CC BY 2.0   テーブルに表示されているデータをサーチバーに入力した語で絞り込みたい こういうテーブルフィルタリングを実現する仕 …

Backbone.jsでViewのrender前後にコールバック処理を追加する

By: Michael Gil – CC BY 2.0 afterRender() callback in Backbone.js Views [crayon-5a11acf833e591 …