JavaScriptで将棋のルール その２ ～ 駒の動き ～
はいどうも、ただのあほです。
今日は、駒の動きをチェックする関数をつくりました。
とにかくできたものを動かしたいというかたは、
こちらのページへどうぞ。
http://www54.atpages.jp/tetsuzuki/
まずは下準備として、駒が動ける方向を、配列にいれておきます。
Directionという配列が、
８方向 ＋ 桂馬の動き４方向 ＝ １２方向
をあらわしていて、それぞれの方向に対応した dan , suji の値がはいっています。
CanGoという配列は、二次元配列もどきになっています。
（正確には配列の各要素に、別の配列を格納しているらしいです）
たとえばCanGo[0][FU]には、
0 の方向（Directionのインデックスと対応している）に、FU（歩）が動けるかどうかをあらわす、
1 or 0 がはいっています。
CanJumpも同様で、その方向に飛べるかどうかを 1 or 0 であらわしています。
このやりかたは、うさぴょんの作者様のページ
将棋プログラムの作り方
をマネしたものです。感謝です。
さて、ようやく駒の動きをチェックする関数ですが、
これはわりと短いコードなので、とりあえず貼ってみます。
いちおうポイントとしては、１４行目の、
if(board[moved.dan][moved.suji] != EMPTY)break;
というコードをいれることで、駒を飛びこえないようにしているところでしょうか。
この関数をつかうことで、駒の種類ごとの動きしかできないようになりました。
ただの将棋盤のページにも、変更を反映させたので、
よかったら動かしてみてください。
http://www54.atpages.jp/tetsuzuki/
つぎは、王手をチェックする関数をつくることになると思います。
それでは。
JavaScriptで将棋のルール その１ ～ 駒の位置の内部表現 ～
おひさしぶりになってしまいましたが、どうも、ただのあほです。
さて、とりあえず駒が動かせるだけの将棋盤ができていたわけですが、
今回から、将棋のルールを守った指し手（合法手）
しか指せないような将棋盤をつくっていきたいと思います。
C++のほうでは、とりあえず合法手を生成することができているので、
おんなじやりかたで、JavaScriptでもやっていきたいと思います。
しばらく C++ と JavaScript をいったりきたりすると思いますがお付き合いください。
まずは、これまで dan , sujiという２つの変数であらわしていたものを、
C++でいう構造体のように、ひとまとめにして扱いたいなということで、
いろいろ調べた結果、こういったコードを書いてみました。
Posという関数に dan , suji というプロパティをもたせて、
引数をそのままプロパティに代入するようにしました。
C++では構造体とかクラスというものがあるのですが、
それは、C++がクラスベースオブジェクト指向言語だからで、
JavaScirptはプロトタイプベースオブジェクト指向言語というものらしいです。
ついに「オブジェクト指向」という、
やたらとかっこいい言葉をつかう日がきてしまいました。
（言葉をつかうだけなら小学生でもできるので、つかいこなせるかどうかが問題です）
そのあたりは、こちらの記事がとても勉強になったのでリンクを貼っておきます。
JavaScriptにおけるオブジェクトの基本的性質：CodeZine
プロトタイプ（prototype）によるJavaScriptのオブジェクト指向：CodeZine
C++からはいった自分にはこちらのページも参考になりました。
というわけで、つぎは、
「あるマスに、ある駒が動けるかどうか」 を調べる関数をつくりたいと思います。
それでは。
将棋プログラムのつくりかた（C++） ～ 手の内部表現 ～
【2015/11/28 追記】
当時、プログラミング超初心者のわたしが勢いで始めたものの、完結させずに放置してしまっています。すみません。
コンピュータ将棋のアルゴリズム HTML版のリンクを貼っておくので、こちらを参考にしてください。
前回から貼っているC++のコードなのですが、
JavaScriptで将棋盤をつくっているときから書いていたので、
現状はこんな感じのところまですすんでいます。
見にくいですが、□ は空白のマス、vがついている駒が後手の駒です。（ｖ歩など）
この局面（先手番）での合法手が、画面下に表示されています。
とりあえず、盤上の駒を動かす手を生成するところまでできました。
昨日まで、あるマスに利きがあるかどうか調べる関数のなかに、
飛び駒（飛車、角、香車）が全方向に動けるという、とんでもないバグがありまして、
それがなかなか発見できませんでした。あほすぎてつかれました。
それでは、現状の進行とずれますが、
「手の内部表現」の部分のコードを貼ってみたいと思います。
駒の位置を、「 Pos 」という構造体、
指し手（打つ手も含む）を、「 Te 」という構造体で表現しています。
このへんのやり方は、ほとんど、
「うさぴょん」の作者様のページ
ページ移転のお知らせ
とおんなじです。
「 Pos 」や「 Te 」をリストにしてあつかうための、ポインタが用意してあります。
よくみると、KomaInf（駒番号をいれる型）の変数名（koma）が、
「 Pos 」と「 Te 」でおなじですね。これはまずいです。あとで修正せねば。
あと、なぜか「 Te 」にだけ、
初期値（ぜんぶ０）を代入してくれるコンストラクタが用意されています。
（Posのは忘れてました）
演算子のオーバーロードや、コンストラクタの中身はこのようになっています。
なにかまずい部分などありましたら、コメントいただけるとうれしいです。
それでは。
P.S
JavaScriptで将棋盤のページ
http://www54.atpages.jp/tetsuzuki/
ですが、
広告の位置がかわったことで、駒がぜんぶズレてますね。
駒画像を追加する要素以外を、
ぜんぶabsoluteで指定しているのが原因かなあと思っています。
近いうちに直すと思います。たぶん。
2014/2/14 12:41追記
広告の位置によるズレを直しました。
将棋プログラムのつくりかた（C++） ～ 駒の内部表現 ～
【2015/11/28 追記】
当時、プログラミング超初心者のわたしが勢いで始めたものの、完結させずに放置してしまっています。すみません。
コンピュータ将棋のアルゴリズム HTML版のリンクを貼っておくので、こちらを参考にしてください。
今回から、C++のコードを貼りながら、
こんな感じでプログラムをつくっています、という記事を書いていきたいと思います。
"Hellow,World"から４ヶ月のただのあほが書いているコードを貼るというのは、
なかなかに恥ずかしいですが、
そういうブログなのでしょうがないですね。
プログラムのかなりの部分は、
将棋プログラム「うさぴょん」の作者様のページ（ページ移転のお知らせ）
を参考にさせていただいているので、
ほとんどこのページのコードの解説みたいになるかもしれません。
「わざわざあほの解説なんざ聞きたかねーや！」というかたは、
ブラウザバックしていただけると大変たすかります。
では、さっそく。
駒の内部表現ですが、
歩 ～ 王 を １ ～ ８ の数字で表します。
成ると ＋８ 、敵の駒は ＋１６ します。
これが最もやさしい表現だと思われます。
もっとスマートな方法を知りたいというかたは、
こちらのページ
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 さらに追記
＜
歩をたくさんとると、駒台からはみだします。
さらにとると、画面からもはみだしてしまいます。
かなり恥ずかしいことになっていますが、そのうち直すと思います。たぶん。
＞
適当にレンタルサーバーを借りてみて、そこにそのまま置いてあるので、
よかったら遊んでみてください。（１分もたずに飽きると思いますが）
Firefox、Chrome、IEの最新版では動作を確認しましたが、
なにかバグがあったり、動かないということがあれば、
このブログにコメントしていただくか、
お手数ですがプロフィールのメールアドレスに連絡していただけるとありがたいです。
それでは。
はてなブログに棋譜を貼り付ける方法
どうも、ただのあほです。
今日は、はてなブログに棋譜を貼り付ける方法を紹介したいと思います。
なんか方法を紹介するとかまともな記事っぽいですね。
さっそくその方法ですが、とてもかんたんです。
まず、貼り付けたい棋譜を用意します。
棋譜ファイルの形式は、KIF形式、CSA形式ならOKです。
ただのあほは、ふだん棋譜の管理はKifu for Windowsをつかわせていただいています。
それでは、次にこちらのサイトにいってみてください。
棋譜ぺったん -- 将棋の棋譜をWebに貼り付けよう（旧 棋譜ファイル・コンバータ「Hangame 将棋弐 to CSA（KIF to CSA）」
説明がちゃんと書いてあるのであほが説明するまでもないと思いますが、
貼り付けたい棋譜ファイルを、「参照」ボタンから選び、
いろいろなオプションを設定し、
「送信」ボタンをクリックします。
すると、「フラ盤」というアニメーション付棋譜再現プレーヤーが表示されて、
その下に、いろいろなブログに棋譜を貼り付けるための、参考タグが表示されます。
その中から自分がつかっているブログにあったタイプを選べばいいのですが、
はてなブログの場合はタイプ６を選べば貼り付けることができます。
タイプ６のウインドウの中の文字列をコピーして、
コピーしたものをそのままペーストすれば、
さきほどの「フラ盤」を記事上に表示することができます。
ちなみに「はてな記法モード」は、はてなブログの「設定」の、「編集モード」で選択することができます。
この方法で、「フラ盤」を貼り付けるとこんな感じになります。
これはただのあほが将棋倶楽部２４の早指し２で指した棋譜でして、
せっかくなのでたまたま勝った棋譜を貼り付けてみました。
Kifu for Windowsで指し手にコメントをつけておけば、このように「フラ盤」にも反映されるので便利です。
これで対局できるプログラムができたときに、プログラムどうしで対局させた棋譜を貼り付けることができますね。
早くそれができるようにがんばっていきたいと思います。
それでは。
JavaScriptで将棋盤 まとめ
どうも、ただのあほです。
JavaScriptで将棋盤ですが、成／不成の選択ウインドウを変更しました。
このウインドウのどちらかの駒の画像をクリックすると、
成／不成を選択することができます。
YouTubeに動画をアップしてみたのでごらんください。
プログラミング初心者がJavaScriptで将棋盤をつくってみた その２ - YouTube
ソースコードですが、ちょっと長いので記事の最後に貼っておきます。
これでひとまず、ただ動かせるだけの将棋盤は完成です。
（まだマイナーチェンジはするかもしれませんが）
なんとなくまとめ記事っぽく、最初から振り返ってみましょう。
感謝の意味をこめて、何度でもリンクを貼りますが、
将棋盤をつくる前に最初にみたのがこの動画でした。
しかし、HTMLってなんですか？というレベルだったので、さっぱり理解できません。
とりあえずHTMLの基礎の基礎を学習し、つくったのがこちら。
クリックしても何を起きない、ただ文字を表にしただけのものです。しょぼいですね。
参考にさせていただいたページがこちらです。
・HTMLの基本
HTML入門
・tableタグの使い方
テーブル -- ごく簡単なHTMLの説明
その次のステップとして、
DOMをつかって駒の画像を表示するものをつくってみました。
そもそもDOMを知らなかったのですが、
オセロの人のコードの知らない関数をググってググって、
DOMというものがあるらしい、というところまでたどりつきました。
そしてできたのがこちら。
駒の配置がまちがってますね。まちがいなくあほです。
参考にさせていただいたページがこちらです。
DOM - JavaScript超初心者によるJavaScript入門講座
さらに、オセロの人のコードを読んでいると、
どうやらクロージャというよくわからないものをつかっているということがわかりました。
なんとかクロージャをつかえるようになり
（理解できているかどうかはあやしいですが）
つくったのがこちら。
クリックすると歩がおける（空のマスにならどこにでも）（しかも歩しかおけない）
というしょぼいものです。
参考にさせていただいたページがこちらです。
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
これ以降は、クリックしたところに駒を進める、駒をとる、駒を成るなど、
処理が複雑にはなりますが、基本は歩をおくことと変わらないのでがんばるだけでした。
（長くなってきたので適当になっています）
いろいろなところでつまづいたので内容はばらばらですが、
参考にさせていただいたページがこちらです。
Booleanからintへの型変換
JavascriptでBooleanからintへの型変換 | hirokimura's memo
ノードをまとめて扱う
JavaScript初級者から中級者になろう：七章第四回 ノードをまとめて扱う
JavaScriptでwait処理
http://d.hatena.ne.jp/kminoru/20080305
あと駒とか盤の画像ですが、Paint.NETというフリーソフトをつかって自分でつくりました。
これは時間と気力があればだれでも簡単につくることができます。
ソフトのダウンロードはこちらからできます。
Paint.NET - 窓の杜ライブラリ
画像がきれいになるだけで、ちゃんとしたものにみえてくるのは不思議ですね。
だいたい１ヶ月半くらいかかってしまいましたが、知識ゼロからでしたので、
あほなりにはがんばったかなと思います。
それでは、ソースコードを貼って終わりにしたいと思います。
これでもけっこうがんばってきれいにしたのですが、まだスパゲッティコードですね。
書き直すまえは、濃厚味噌とんこつちぢれ麺コードでした。（よくわからないたとえ）
このコードは、こちらの動画
【プログラミング】オセロを1時間で作ってみた【実況解説】 ‐ ニコニコ動画:GINZA
のコードをもとにしています。
あらためて、投稿者様には感謝しております。
それでは。
2014/2/4 1:22 追記
貼ってあるコードの201,202行目、257,258行目の、
var intteban = +teban;
capture[intteban ^ 1][board[dan][suji] & ~ENEMY & ~PROMOTED]++;
という部分で、inttebanを ^ 1で反転させていますが、
これはなぜか、capture[0]を先手、capture[1]を後手にしたためです。
tebanのtrueを先手、falseを後手にしたんだから、
1を先手、0を後手にするのがふつうですよね。たぶん。
うーん、恥ずかしい。
