56将棋開発ブログ

5×6マスのミニ将棋、「56将棋」で遊べるものをいろいろ開発してます。

JavaScript将棋盤 ほぼ完成したので公開してみる

おひさしぶりです。ただのあほです。

JavaScriptで将棋盤の将棋のルールの部分がほぼ完成したので公開してみます。


JavaScript将棋盤



2014/03/04/15:41 追記 二歩の判定にバグがあったので修正しました


対応している将棋のルールがこちら。

・駒の動き

・手番

・成/不成の選択

・行きどころのないマスに動いたら自動で成る(歩、桂馬、香車

・駒をとる、打つ

・行きどころのないマスへ打つことの禁止(歩、桂馬、香車

・二歩の禁止

・自殺手、王手放置の禁止(玉がとられる手は指せない)


「ほぼ完成」というのは、以下のルールに対応していないからです。

・詰みの判定

・打ち歩詰め

千日手


勝ち負けの判定だけなら、玉がとられたら負けにすればかんたんですね。


ほかの方がつくったJavaScript将棋盤もみてみたのですが、

http://www.geocities.co.jp/HeartLand-Sumire/4033/show-gi/show-gi.html : 詰みは判定されない

んとか将棋 | 将棋ゲームの時間 : 玉がとられる手を指した時点で勝負を判定

というように、「詰み」の判定はしていないようです。


コンピュータと対戦できるサイトでは、

hozo.biz
こちらが自殺手を指すと玉がとられて負け(詰み判定はなし)
こちらが詰ますときは詰みが判定されて勝ち


将棋サイト「きのあ将棋」 | QinoaSyougi
こちらが自殺手を指すとその時点で負け(詰み判定はなし) 
こちらが詰ます前に投了する。詰み判定もあるはず。


というように、こちらの玉の詰み判定はされず、

コンピュータの玉の詰み判定だけになっています。


おそらくこちらの玉の詰み判定がないのは、

指し手のたびに詰み判定をしなければならないのがめんどうで、

重くなるということだと思います。


このJavaScript将棋盤は、

コンピュータと対局できるものをつくる練習のようなものです。


棋譜を読み込んで棋譜並べをできるようにするとか、

べんりな機能をつけるつもりはありません。

そういったことができるものはすでにありますしね。


というわけで、いまは合法手を生成する関数をつくっています。


JavaScriptで将棋盤の、将棋のルールに関する記事はまだ書き終わっていないので、

自分が書いたきったないコードを直すというもっとも過酷な作業がおわれば、

そのうち書くと思います。

(たぶん)(きっと)(ニコ生将棋とネット将棋の誘惑に勝てれば)


しかし、あほが書いたコードをみてみたいという需要があるのか、

疑問にはなってきた今日このごろです。

ただアドバイスいただけると本当にうれしいですし、

記事にするとじぶんの頭の中でも整理ができるので、

がんばって記事にしたいと思います。


それでは。

JavaScriptで将棋のルール その2 ~ 駒の動き ~

はいどうも、ただのあほです。

今日は、駒の動きをチェックする関数をつくりました。


とにかくできたものを動かしたいというかたは、

こちらのページへどうぞ。

http://www54.atpages.jp/tetsuzuki/


まずは下準備として、駒が動ける方向を、配列にいれておきます。



gist9107351


Directionという配列が、

8方向 + 桂馬の動き4方向 = 12方向

をあらわしていて、それぞれの方向に対応した dan , suji の値がはいっています。


CanGoという配列は、二次元配列もどきになっています。

(正確には配列の各要素に、別の配列を格納しているらしいです)


たとえばCanGo[0][FU]には、

0 の方向(Directionのインデックスと対応している)に、FU(歩)が動けるかどうかをあらわす、

1 or 0 がはいっています。


CanJumpも同様で、その方向に飛べるかどうかを 1 or 0 であらわしています。


このやりかたは、うさぴょんの作者様のページ
将棋プログラムの作り方

をマネしたものです。感謝です。


さて、ようやく駒の動きをチェックする関数ですが、

これはわりと短いコードなので、とりあえず貼ってみます。


gist9107532


いちおうポイントとしては、14行目の、

if(board[moved.dan][moved.suji] != EMPTY)break;

というコードをいれることで、駒を飛びこえないようにしているところでしょうか。


この関数をつかうことで、駒の種類ごとの動きしかできないようになりました。

ただの将棋盤のページにも、変更を反映させたので、

よかったら動かしてみてください。

http://www54.atpages.jp/tetsuzuki/


つぎは、王手をチェックする関数をつくることになると思います。

それでは。

JavaScriptで将棋のルール その1 ~ 駒の位置の内部表現 ~

おひさしぶりになってしまいましたが、どうも、ただのあほです。


さて、とりあえず駒が動かせるだけの将棋盤ができていたわけですが、

今回から、将棋のルールを守った指し手(合法手)

しか指せないような将棋盤をつくっていきたいと思います。


C++のほうでは、とりあえず合法手を生成することができているので、

おんなじやりかたで、JavaScriptでもやっていきたいと思います。


しばらく C++JavaScript をいったりきたりすると思いますがお付き合いください。


まずは、これまで dan , sujiという2つの変数であらわしていたものを、

C++でいう構造体のように、ひとまとめにして扱いたいなということで、

いろいろ調べた結果、こういったコードを書いてみました。


gist9089303


Posという関数に dan , suji というプロパティをもたせて、

引数をそのままプロパティに代入するようにしました。


C++では構造体とかクラスというものがあるのですが、

それは、C++がクラスベースオブジェクト指向言語だからで、

JavaScirptはプロトタイプベースオブジェクト指向言語というものらしいです。


ついに「オブジェクト指向」という、

やたらとかっこいい言葉をつかう日がきてしまいました。

(言葉をつかうだけなら小学生でもできるので、つかいこなせるかどうかが問題です)


そのあたりは、こちらの記事がとても勉強になったのでリンクを貼っておきます。

JavaScriptにおけるオブジェクトの基本的性質:CodeZine

JavaScriptの関数とメソッド:CodeZine

プロトタイプ(prototype)によるJavaScriptのオブジェクト指向:CodeZine


C++からはいった自分にはこちらのページも参考になりました。

JavaScriptでオブジェクト指向しよう1・構造体


というわけで、つぎは、

「あるマスに、ある駒が動けるかどうか」 を調べる関数をつくりたいと思います。


それでは。

将棋プログラムのつくりかた(C++) ~ 手の内部表現 ~

【2015/11/28 追記】
当時、プログラミング超初心者のわたしが勢いで始めたものの、完結させずに放置してしまっています。すみません。
コンピュータ将棋のアルゴリズム HTML版のリンクを貼っておくので、こちらを参考にしてください。

コンピュータ将棋のアルゴリズム




前回から貼っているC++のコードなのですが、

JavaScriptで将棋盤をつくっているときから書いていたので、

現状はこんな感じのところまですすんでいます。


f:id:tetsuzuki1115:20140213072854p:plain


見にくいですが、□ は空白のマス、vがついている駒が後手の駒です。(v歩など)

この局面(先手番)での合法手が、画面下に表示されています。


とりあえず、盤上の駒を動かす手を生成するところまでできました。


昨日まで、あるマスに利きがあるかどうか調べる関数のなかに、

飛び駒(飛車、角、香車)が全方向に動けるという、とんでもないバグがありまして、

それがなかなか発見できませんでした。あほすぎてつかれました。


それでは、現状の進行とずれますが、

「手の内部表現」の部分のコードを貼ってみたいと思います。


gist8966353


駒の位置を、「 Pos 」という構造体、

指し手(打つ手も含む)を、「 Te 」という構造体で表現しています。


このへんのやり方は、ほとんど、

「うさぴょん」の作者様のページ
ページ移転のお知らせ

とおんなじです。


ただ、オーバーロードしている演算子がすこしちがうのと、

「 Pos 」や「 Te 」をリストにしてあつかうための、ポインタが用意してあります。


よくみると、KomaInf(駒番号をいれる型)の変数名(koma)が、

「 Pos 」と「 Te 」でおなじですね。これはまずいです。あとで修正せねば。


あと、なぜか「 Te 」にだけ、

初期値(ぜんぶ0)を代入してくれるコンストラクタが用意されています。

(Posのは忘れてました)


演算子オーバーロードや、コンストラクタの中身はこのようになっています。


gist8966375


なにかまずい部分などありましたら、コメントいただけるとうれしいです。

それでは。


P.S 

JavaScriptで将棋盤のページ
http://www54.atpages.jp/tetsuzuki/
ですが、

広告の位置がかわったことで、駒がぜんぶズレてますね。

駒画像を追加する要素以外を、

ぜんぶabsoluteで指定しているのが原因かなあと思っています。

近いうちに直すと思います。たぶん。



2014/2/14 12:41追記

広告の位置によるズレを直しました。

将棋プログラムのつくりかた(C++)  ~ 駒の内部表現 ~

【2015/11/28 追記】
当時、プログラミング超初心者のわたしが勢いで始めたものの、完結させずに放置してしまっています。すみません。
コンピュータ将棋のアルゴリズム HTML版のリンクを貼っておくので、こちらを参考にしてください。

コンピュータ将棋のアルゴリズム


今回から、C++のコードを貼りながら、

こんな感じでプログラムをつくっています、という記事を書いていきたいと思います。


"Hellow,World"から4ヶ月のただのあほが書いているコードを貼るというのは、

なかなかに恥ずかしいですが、

そういうブログなのでしょうがないですね。


プログラムのかなりの部分は、

将棋プログラム「うさぴょん」の作者様のページ(ページ移転のお知らせ

を参考にさせていただいているので、

ほとんどこのページのコードの解説みたいになるかもしれません。

「わざわざあほの解説なんざ聞きたかねーや!」というかたは、

ブラウザバックしていただけると大変たすかります。


では、さっそく。


gist8906899


駒の内部表現ですが、

歩 ~ 王 を 1 ~ 8 の数字で表します。

成ると +8 、敵の駒は +16 します。

これが最もやさしい表現だと思われます。


もっとスマートな方法を知りたいというかたは、

こちらのページ
http://shogi.yaneu.com/index.php?GPS%BE%AD%B4%FD%A4%CE%A5%BD%A1%BC%A5%B9%A5%EC%A5%D3%A5%E5%A1%BC
へどうぞ。


ほかの方法としては、bitboardというのがあるみたいです。

駒の種類ごと、盤のマスごとに、駒のあるなしをbitであらわす方法のようです。
(なんか日本語下手ですね)

あほが説明するよりも、

こちらのページ
ビットボードを用いた 4x4 オセロ 完全解析
を読んでいただいたほうがいいでしょう。


次回はたぶん、「手の内部表現」になると思います。

それでは。

JavaScriptで将棋盤 とりあえず公開してみる

駒をどこにでも動かせるという、しょぼしょぼ将棋盤ですが、

せっかくつくったので公開してみます。


http://www54.atpages.jp/tetsuzuki/


2014/2/5 0:52 追記

現在の仕様ですが、

・駒を好きなところに動かせてしまう(駒の種類に関係なく)

・手番の概念はある(手番の駒しか動かせない、打てない)

・駒をとることはできる(玉もとれてしまいますが、駒台にはのりません)

・成/不成を選択することができる

となっています。

「将棋盤」とよんでいいのか怪しいところではありますが、

最低限、駒を動かすことはできるので「将棋盤」としています。


2014/2/5 1:00 さらに追記

歩をたくさんとると、駒台からはみだします。

さらにとると、画面からもはみだしてしまいます。

かなり恥ずかしいことになっていますが、そのうち直すと思います。たぶん。



適当にレンタルサーバーを借りてみて、そこにそのまま置いてあるので、

よかったら遊んでみてください。(1分もたずに飽きると思いますが)


FirefoxChromeIEの最新版では動作を確認しましたが、

なにかバグがあったり、動かないということがあれば、

このブログにコメントしていただくか、

お手数ですがプロフィールのメールアドレスに連絡していただけるとありがたいです。


それでは。

はてなブログに棋譜を貼り付ける方法

どうも、ただのあほです。

今日は、はてなブログ棋譜を貼り付ける方法を紹介したいと思います。

なんか方法を紹介するとかまともな記事っぽいですね。


さっそくその方法ですが、とてもかんたんです。

まず、貼り付けたい棋譜を用意します。

棋譜ファイルの形式は、KIF形式、CSA形式ならOKです。

ただのあほは、ふだん棋譜の管理はKifu for Windowsをつかわせていただいています。

柿木の将棋ソフトウェア


それでは、次にこちらのサイトにいってみてください。

棋譜ぺったん -- 将棋の棋譜をWebに貼り付けよう(旧 棋譜ファイル・コンバータ「Hangame 将棋弐 to CSA(KIF to CSA)」


説明がちゃんと書いてあるのであほが説明するまでもないと思いますが、

貼り付けたい棋譜ファイルを、「参照」ボタンから選び、

いろいろなオプションを設定し、

「送信」ボタンをクリックします。


すると、「フラ盤」というアニメーション付棋譜再現プレーヤーが表示されて、

その下に、いろいろなブログに棋譜を貼り付けるための、参考タグが表示されます。


その中から自分がつかっているブログにあったタイプを選べばいいのですが、

はてなブログの場合はタイプ6を選べば貼り付けることができます。


タイプ6のウインドウの中の文字列をコピーして、

はてなブログの「はてな記法モード」で記事を作成し、

コピーしたものをそのままペーストすれば、

さきほどの「フラ盤」を記事上に表示することができます。


ちなみに「はてな記法モード」は、はてなブログの「設定」の、「編集モード」で選択することができます。


この方法で、「フラ盤」を貼り付けるとこんな感じになります。


これはただのあほが将棋倶楽部24の早指し2で指した棋譜でして、

せっかくなのでたまたま勝った棋譜を貼り付けてみました。


Kifu for Windowsで指し手にコメントをつけておけば、このように「フラ盤」にも反映されるので便利です。


これで対局できるプログラムができたときに、プログラムどうしで対局させた棋譜を貼り付けることができますね。

早くそれができるようにがんばっていきたいと思います。


それでは。