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を後手にするのがふつうですよね。たぶん。
うーん、恥ずかしい。
