成／不成 選択ウインドウの画像
成／不成 選択ウインドウの画像をつくりました。
まだ画像だけなのでクリックしても選択することはできないのが残念なところです。
ニコ生で王将戦をやっていたのでしょうがないのです。
（単純にあほだからです）
ソースコードなのですが、まずこの選択ウインドウを選択できるようなコードにして、
いろいろコメントをつけてから、週末あたりに貼れればいいかなという予定です。
その記事を、JavaScriptで将棋盤のまとめ記事にしようかなと思っています。
思い返せば、HTMLのtableタグでつくった、クリックしても何も起こらない、
文字が表示されただけのものからスタートしました。
そのあたりから振り返りながら、
お世話になったサイトへのリンクを張りつつ、まとめ記事を書きたいと思います。
それでは。
ソースコードの貼り付けテスト
コメントで紹介していただいたGistに登録して、
はてなブログと連携してコードを貼り付けてみました。
ただ、Javascriptで将棋盤のコードは、ひとつの関数に機能を詰めこみすぎてまして、
インデントがすごいことになっちゃっています。
なので、このブログの記事部分の範囲を広げたり、記事の背景を広げたりして見やすくしようかなと思っています。
思っているだけであんまり進んでいないのが残念なところです。
こちらのページ
はてなブログデザインカスタマイズの解説。WEBデザインのノウハウも詳しく解説。 - showrtpath - iPhone,iPadウェブブラウザアプリ開発ブログ
を参考にしてやってみようかなと思っています。
それでは。
JavaScriptで将棋盤 その１０
ついにJavaScriptで将棋盤も１０回目になりました。
今日は持ち駒の表示を変更してみました。
数字で表示するよりこっちのほうがなんとなくカッコいいですね。
あと昨日の記事の動画で、さもちゃんと動くみたいに話してましたが、
重大なバグがありました（笑）
なんと、持ち駒を使い切っても、持ち駒の表示が消えません。
それどころか持っていないはずの持ち駒が使えるというダメダメっぷり。
あほすぎてため息がでますね。
持ち駒を打ったときに、appendChildで追加した要素を削除していなかったため、そんなことになってしまいました。
数字のほうは、新たな数字の画像が上に表示されてしまうので気づかなかったんですね。
選択したときのカーソルはちゃんとremoveChildで削除しているんで気づいてもよさそうなもんですが。
とりあえず、
持ち駒の表示 ： 持ち駒の画像をgetElementByIdで取得 持ち駒にappendChildで追加
盤に駒を打つ ： removeChildで追加した要素をすべて削除 持ち駒の数を１つ減らす
というふうに変更しました。
この飛車を打つと、
ちゃんと持ち駒がなくなります。
持ち駒を打つと、removeChildで持ち駒の画像の要素がすべて削除されますが、
そのあとに持ち駒を表示するようにしているので、ちゃんと数が減ったあとの持ち駒が表示されています。
あとは成ったときのメッセージをもう少しいじろうかなと思っています。
それでは。
JavaScriptで将棋盤 その９
少し間が空いてしまいましたが、JavaScriptの将棋盤の進行状況です。
ようやく取ったり成ったりできるようになりました。
プログラミング初心者がJavaScriptで将棋盤をつくってみた - YouTube
ソースコードを貼りたいのですが、ブログの記事部分を広げたりだとか、
背景画像をいじったりだとかのやり方がよくわからず悪戦苦闘してます。
youtubeへ動画をアップロードするのも、
フレームレート？コーデック？って感じでなかなか進みませんでした。あほですね。
まあとりあえずちゃんと動くものがつくれたのでよかったです。（小学生並みの感想）
次は、将棋のルールを守った手（合法手）しか指せないようにするというのが順番なのですが、
１．合法手かどうかチェックする機能をつくる
２．合法手を生成する機能をつくってしまって、入力した手が生成した合法手のなかにあるかどうか調べる
のどちらの方法にするか考えています。
そもそも、このブログの最初の記事で書いたプログラムというのは、
こちらのページのコードを読んで理解しながら、
書きかけの部分を埋めたり足したりという感じでつくっていました。
（あまりつくったとは言えないかもしれませんが）
ただ合法手の生成の部分は、なかなかややこしいことをしないといけなくて、
合法手かどうかチェックする関数を自分でつくった結果、
if文だらけで、ものすごく処理に時間がかかるダメダメコードになってしまいました。
つまり、とりあえず動くものができて「やったー」なんて思っている場合ではなくて、
ここからがすごく大変ですね、ということです。
これからもあほなりにがんばります。
それでは。
JavaScriptで将棋盤 その８
とりあえず今日進んだところまで報告してみます。
駒台に駒をのせることができるようになりました。
残念ながら、まだ駒台の駒を選択して置ける（駒を打てる）ようにはなってません。
ニコ生で将棋ウォーズ王将戦を観ながら作業してたら、ありえないミスをしたりでなかなか進みませんでした。
あほが「～しながら」で仕事すると、配列なのに｛ ｝で囲んだりするので危険です。以後気をつけます。
見栄えを確認して画像ファイルを編集しながらだと、プログラミング以外の作業がけっこう時間がかかりますね。しょうがないですが。
次は駒を置けるようにして、その次にはとった駒が駒台にのるようにしたいと思います。
それでは。
JavaScriptで将棋盤 その７
一昨日の記事では、王、飛車、金、歩しかできていなかったのですが、残りの駒と、選択した状態の駒の画像の編集がさっき終わったので、さっそく今までのしょぼい駒と差し替えてみました。
駒を選択するとこんな感じです。
やっぱり見た目だいじですね。
駒を選択した状態にする方法ですが、今はクリックすると駒の内部情報を変えて（といっても数字を足すだけですが）、画像を入れ替えるというやり方をしています。
まだ少ししか調べてないのですが、CSSで透過する画像をつくる方法もあるみたいなので、それも試してみようかなと思っています。
あと何度も書いてますが、次こそ取ったり成ったりできるようになっていると思います。なっているといいですね。（遠い目）
それでは。
テキストエディタ
今日はふだん使っているテキストエディタを紹介してお茶を濁しておきます。
（プログラミングもやってるのですが、あほなのでなかなか進みません）
このブログの最初の記事で書いたように、プログラミングを始めてからしばらくは、Windows付属のメモ帳にコードを書いてました。
メモ帳でも問題なくプログラムは書けるのですが、もっと便利なテキストエディタがあるということで、インターネット環境が整ってからは別のものを使っています。
他のもっと便利なものを使っていると、よくメモ帳でコード書いてたなあ、自分けっこうがんばったなと思います。（ただあほだったということもいえますが）
まず使ってみたのがTeraPadです。（リンク先の窓の杜でダウンロードできます）
なんせページ横に行番号が表示されるというだけでも感動で、さらにintなどの型を自動で太文字にしてくれるので見やすいです。
TeraPadに感動したあとすぐに、さらに感動したのがNotePad++で、今はこれを使っています。（リンク先のページでダウンロードできます）
タブが使えるし、{} 、 [] 、" " 、 ' ' などの始まりと終わりがわかりやすい！
というわけで、テキストエディタの紹介でした。
それでは。
