jQuery UI

jQuery UIの将棋でつくったまとめ~jQuery UI draggable droppable

投稿日:2012年11月23日 更新日:

 

盤上の駒の動き

draggableの設定

ソースを読み込んで

指定のjQueryオブジェクトでdraggble()をつかう

draggableの要素はなるべく<body>直下に置いた方がいいみたい.
親要素の中だけで動かしている分にはいいんだけど、座標の指定などが狂って予想外の動きをしたりする.

draggableのオプション

jqueryui.com/draggable/

stacktrace.jp/jquery/ui/interaction/draggable.html

動く範囲を指定する containment: セレクタ

決められた単位で動かす grid: [x, y]

指定した要素に吸い付くようにする snap:  セレクタ

snapmodeは要素の内側だけか外側だけかautoかを選ぶ

サンプル

mysterious-depths-3658.herokuapp.com/test1.html

盤上の駒の座標を取得する

draggableはdrag開始のときとdrag中とdrag終了時にイベント発生といろいろな情報を返してくれる

その中にdraggable要素の座標があるのでそれを取得して盤とマスの大きさから再計算している

これは後で出てくるdroppableを使えばよかったかもしれない

とにかくdrag中のdragしている要素のidの取得と座標の取得は次のようなかんじ

*ここからCoffeeScriptで

サンプル

mysterious-depths-3658.herokuapp.com/test2.html

上のサンプル用のcoffeescript

このサンプルをみると、移動は61pxずつとわかる

なので、逆にこちらから2*2に移動させたい場合は、1 * 61 + 8 = 69pxなので

と指示すればよいとわかる

手番(ターン)の変更

draggableは一旦設定した後は好きなタイミングで有効・無効にできるなので

最初駒クラスにdraggableを設定してすぐ全部無効にした

そして、先手クラスをまず有効にして

先手の手番が終わったら、先手を無効にしてから今度は後手クラスを有効にしている

こうして交互に手番をすすめるわけだが、これはゲームとしてはあまり応用が効かないかもしれない

同じPC盤上で交互にプレーすることは滅多にないから

サンプル

mysterious-depths-3658.herokuapp.com/test3.html

サンプル用のcoffeescriptは

 

盤外からの駒の動き

駒を取られたら盤外に駒を移動するんだけど、これは普通のjQueryのappendToとかでOK

ここから盤内に駒を置く方法をどうするかで一番つまった

結論としては、いったん前に設定したdraggableは破棄して、新しく盤外駒用のdraggableを再設定した

 

そして、盤に戻したあとは、またjQueryのappendToでdom要素も盤上の駒と同じ要素内に戻してから、draggableを再設定している

 

droppable

今度はgridやcontainmentを設定するわけにはいかないので、droppableで場所を特定した

dropした途端に盤上用のdraggableを設定している

失敗したらもとの位置に戻る

stackoverflow.com/questions/3088485/how-to-revert-position-of-a-jquery-ui-draggable-based-on-condition

draggableのrevertオプションを’invalid’の指定をすればdropに失敗したら元の場所にアニメーションで帰ってくる

サンプル

mysterious-depths-3658.herokuapp.com/test4.html

いままでのをまとめたサンプル

mysterious-depths-3658.herokuapp.com/test5.html

将棋のルールの分析

前につくっておいたメモをもとにclass BanとKomaを作ってBanとKomaの情報をうまく整理して計算するDataManagerクラスをつくった

DataManagerはtebanの状態(先手か後手)も保存するようにした.

そして、DataManagerインスタンスにデータの現状を問い合わせながらMainクラスでゲームを進行する

Mainクラスのループは上に書いたとおり、「手番に従ってdraggableをenable」→「droppableアクションをうけて計算・処理」→「手番を変更してdraggableを変更」というループになっている

[基本的なこと]
9*9の升目
手駒

[ゲーム中に流動的なこと]
プロパティ
どの座標にどの駒がいるか 駒id

[基本的なこと]
種類 王(玉)飛車 角 金 銀 桂 香 歩
成ることができるか canNari? true false
動き movable

[ゲーム中に流動的なこと]
(プロパティ)
どのプレイヤーのものか プレイヤーid
成っているか isNari? true false
現在の場所 あるいは手駒か

(メソッド)
現在場所を盤に申告する
動ける場所 where_to_move? =効果範囲

ゲーム進行

交互にプレイヤー手番を行う
ルール判定してルールに従った処理
詰みになったら終了

プレイヤー手番

(プロパティ)
先手か後手か Sente Gote
コンピューターかどうか

(メソッド)
盤上の駒を動かす 駒の現在場所を更新
手駒から駒を置く 駒の現在場所を更新

ルール判定

駒を取る
成る
王手かどうか
王の逃げ道がなくなったら負け(詰み)
二歩
動けないところに駒を置けない
動けない場合は成らなければならない

初期化

駒の数 40個
駒の種類
id 1 王
id 2 飛車
id 3 角
id 4~5 金
id 6~7 銀
id 8~9 桂
id 10~11 香
id 12~20 歩
id 21 王
id 22 飛車
id 23 角
id 24~25 金
id 26~27 銀
id 28~29 桂
id 30~31 香
id 32~40 歩
駒の所有プレイヤー Sente Gote
駒の初期の場所

ゲームの計算処理など

駒の動きのデータをどう保持するかと、具体的な場面で駒が動ける先を計算する方法はいろいろあると思うけど、配列のループと単純なベクトルの行列計算でやることにした

駒の動きのデータはつぎのようなハッシュで保持することにした

{成ってない場合の動き:[

[[1,1],[2,2]],

[[-1,-1],[-2,-2]],

],

成っている場合の動き:[

]}

ハッシュの値は三重の配列になっていて、一番中の配列はベクトル、それを同じ方向で数だけ異なるベクトルを集めた配列、それを集めた配列となっている.

駒が動ける場所の計算は簡単でこれを全部ループでまわして、駒の基本座標にベクトルを加算した先の座標に駒があるかどうかを調べて、駒があったらループストップ(味方の駒ならその駒はいけない、敵の駒ならそこまではすすめる)、盤の外に出たらループストップ

今どきのパソコンはこれくらいの処理でも一瞬でできるから、駒をドラッグすれば駒の行き先が盤上に瞬時に表示される(にしても、drag中おなじ計算させてるのは無駄だから計算は1回だけにしたいところ)

まだやってないところの計算処理(予定)

  • 置いたところに駒があるかのチェック DataManagerに聞けばわかる.駒がある場合はもう一回手駒にする処理
  • 王手がかかっているかのチェック DataManagerに所有する駒のリストを出させ、全駒について移動可能な場所を上の方法で出させる.その9*9の二次元配列の論理積が駒の影響範囲.駒の影響範囲に相手の王がいれば王手.王は影響範囲には移動できなくしたい.
  • 二歩かどうかのチェック 置いた駒の種類が歩でDataManagerに同y軸に同所有者の歩があるかどうかをチェック
  • 千日手のチェック 面倒そう.まず棋譜記録機能をつけたい. 棋譜を記録するようにした
  • 打ち歩詰めチェック 詰み確認機能を先に。。。
  • 初期位置をcsvにしたのはいろいろな局面からスタートさせたいからコンストラクタにcsvを引数にしたい

このUIの方向性(アイデア)

  • リアルタイム対戦
  • 優秀なコンピューターCPUとの対戦
  • 棋譜のエディタ・ビュアー

 最強 東大将棋4 完全版

最強 東大将棋4 完全版

価格¥1,980

カテゴリー ゲーム > テーブルゲーム

Supported by リンクシェア

-jQuery UI
-, ,

執筆者:

関連記事

no image

jQuery uiで作った将棋をHerokuにアップ

mysterious-depths-3658.herokuapp.com/ ここのひな形を利用させてもらいました docs.komagata.org/4571 使い方は、 [crayon-58b5a8 …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD(後編)~fullcalendar-rails

目次1  前回2 UPDATE1~バグの訂正3 UPDATE2 ~ ドラッグとリサイズでデータ更新4 DELETE~イベントの削除5 バグがあった → 解決しました!6  herokuにサンプルアップ …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

no image

Rails3.2でajaxなフォルダツリーを導入する3~dynatree-rails & jQuery UI dialog

  前回 Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails &nbsp …

jQuery UI Buttonsetの選択状態を変えたり、色を変えたり

  目次1 jQuery UI Buttonsの設定(Radioボタン)2 チェック状態を変えるには3 ボタンの色を変えるには4 チェックした要素のvalueを取得するには jQuery U …