Orfeon Blog
読んだ本の要約、感想など。 他にも日々思ったことをつれづれと書き連ねます。
暗算トレーニング(JavaScript)
脳トレブームにちょっと乗って暗算ゲームを作ってみました。たまたまテレビで暗算大会があって、画面に次々と数字を出てくる装置を見て、JavaScriptで作れるかな～と思ったのがきっかけです。 でもこういうのはFlashで作ったほうが見栄えが良くなりそうなので、今度Flash作成ソフトを買うことができたら勉強がてらにそっちでも作ってみようかと思います。
実際、ネット上で見かける暗算物はFlashが多かったのですが(しかも有料ソフトだったり)、基本的には入力をキーボードで打ち込む形式で、マウスとキーボードの手の移動がめんどくさいのでブログパーツということもあって、気軽にマウスでボタン入力できるようにしました。
使い方ですが、"START"ボタンを押して画面に次々と出てくる数字を足し合わせたものを入力して"Check"ボタンで確かめます。 答えの入力は簡易電卓の要領でマウスで数字をクリックして入力してください。"C"ボタンは入力クリアです。 最初はランク０からスタートしていって徐々に難しい問題を解いていきます。 現在の自分のランクの問題を３つ連続でクリアすると次のランクにレベルアップします。一つクリアすると自動的に次の問題に移るので途中で"START"ボタンは押さないでください(押すとまた３つの最初からになってしまいます)。クリアすると出てくる上の"+"マークは３つ中何個クリアしたかを示しています。
"START"ボタンの隣のフォームでは自分のランクまでの問題レベルを自由に選べます。 自分のランクはクッキーに保存され、パソコンの電源を切っても残ります。 このランクはあくまでプレーした本人のものなので、同じブログにあるゲームでも人によってランクは異なります。 (クッキーを消すか６０日間ゲームをやらないとこのランクは０に戻ってしまいます)
また、コンピュータの計算負荷が大きいとテンポ良く表示されない時もありますのでご理解の程よろしくお願いします。
ちょっと回りくどいシステムになっていますが、なるべくやればやるほど上達できるようにといろいろ考えてみた結果こうなりました。自分でデバックしながらやってみた主観なのですが毎日やり続ければ結構暗算が速くなりそうです。 レベルはとりあえず１０まで用意しましたが、随時不定期に追加していく予定です。(といっても作者もまだまだそこまで到達できそうにありません…)。入力ボタンに引き算があるように将来的には足し算だけでなく引き算もできるようにしたいと思います。
ちょっとした工夫があればいろいろとこの手の脳トレ系は面白いものが作れそうなので、DSのゲームとかを参考にいろいろ作っていきたいと思います(修論が順調にいけばの話ですが…)。
ブログパーツとして利用されたい方は下のソースを所定の場所に貼り付けてください。
「iframe用」
「divタグ用」
上のでうまく表示されなかったらこちらを使ってください。
逆に、こちらはfc2ブログの共有プラグインで公開している方のソースなので、
fc2ブログの共有プラグインでうまく表示されなかった人は上のものを貼り付けてみてください。
開発後記
09
ライフゲーム(JavaScript)
なんとなくJavaScriptでライフゲームを作りたくなったので作ってみました。
ライフゲームについての詳しくはウィキペディアにて。
「使い方」
画面上で左クリックでセルを打ち込むことができます。 もう一度クリックすると消せます。
動いている途中でも同様の操作が可能です。
RANDOMボタンを押すと画面上にランダムにセルを打て、CLEARボタンで全てのセルを消せます。
STARTボタンで動作を開始できて、動いている途中なら停止するSTOPボタンになります。
一番右のフォームは動作の速さを設定するもので、１が一番遅く、４が一番速くなっています。
でも速くなるかは使っているコンピュータのスペックによるので速くならなかったり、フリーズすることもありうるのであまり無理はしないほうがいいかもしれません。
ちなみにブラウザはIE6よりはFirefox2.0の方が結構速いようです。
同じのをC++で書いたことがあったのですが、そっちなら36×36マスでも全然速いのに、JavaScriptだと16×16なのにだいぶ遅くなってしまいました。こういうものはJavaAppletとかで作った方がよさそうです。
ライフゲームについての詳しくはウィキペディアにて。
「使い方」
画面上で左クリックでセルを打ち込むことができます。 もう一度クリックすると消せます。
動いている途中でも同様の操作が可能です。
RANDOMボタンを押すと画面上にランダムにセルを打て、CLEARボタンで全てのセルを消せます。
STARTボタンで動作を開始できて、動いている途中なら停止するSTOPボタンになります。
一番右のフォームは動作の速さを設定するもので、１が一番遅く、４が一番速くなっています。
でも速くなるかは使っているコンピュータのスペックによるので速くならなかったり、フリーズすることもありうるのであまり無理はしないほうがいいかもしれません。
ちなみにブラウザはIE6よりはFirefox2.0の方が結構速いようです。
同じのをC++で書いたことがあったのですが、そっちなら36×36マスでも全然速いのに、JavaScriptだと16×16なのにだいぶ遅くなってしまいました。こういうものはJavaAppletとかで作った方がよさそうです。
28
パネルパズル
オセロの次は五目並べでも作ろうかと思っていましたが、評価関数をいじればすぐできるかと思いきや、なかなかすぐにはできそうにないのでとりあえず遊びで作ったミニゲームをアップしてみます。
最初にパネルサイズを選んでスタートして、クリックすると押したところとその上下左右のパネルの色が反転するパネルを全て同じ色にするゲームで、制限時間(60秒)以内に何回同じ色にそろえられたかを競う内容です。
ただサイズ６に関しては難しいので1つクリアするのに何秒かかったかがスコアとして出ます。
(ちなみに元ネタは大学院試験の問題だったりします)
最初にパネルサイズを選んでスタートして、クリックすると押したところとその上下左右のパネルの色が反転するパネルを全て同じ色にするゲームで、制限時間(60秒)以内に何回同じ色にそろえられたかを競う内容です。
ただサイズ６に関しては難しいので1つクリアするのに何秒かかったかがスコアとして出ます。
(ちなみに元ネタは大学院試験の問題だったりします)
25
リバーシ(難易度設定機能付)
難易度設定機能を追加したオセロゲームです。
といっても前より強くなったわけではなくて弱くして遊べるだけなのですが。
難易度選択はボタンの隣のフォームで行い、一番弱いのが0で、一手先の石数を最大にするように、1が一手先の評価関数を最大にするように、2が以前と同じで4手先の評価関数を最大にするようになっております。
その他にも修正したので画面表示がちょっと速くなったかもしれません。
強くするにはちょっと時間がかかりそうなので気長に待ってください。
もしで完成したらフォームで3が選べるようになっているはずです。
使うには下のHTMLコードをフリーエリアのところに貼り付けてください。
fc2ブログで使う場合ならほとんど問題はないと思いますが、それ以外の場所に利用する場合は自前のサーバから使っている画像をダウンロードしているので、サーバのメンテナンス時に使えなくなる時もあります。
あと、以前のオセロゲームとは同時に２つは設定できませんので必ずどちらかは非表示にしておいて下さい。
トップページから見ると下のオセロゲームと同じページ内になってしまって動かないはずなので、
ブログ一覧の方から来てもらえれば動くはずです。
「iframe版」
テンプレートに依存しないため下地の色(白)が気に入らないなどなければこちらをお勧めします。
特にfc2ブログ以外の方は安定しているのでこちらを使ってください。
「div版」
上のでうまく表示されなかったらこちらを使ってください。
逆に、こちらはfc2ブログの共有プラグインで公開している方のソースなので、
fc2ブログの共有プラグインでうまく表示されなかった人は上のものを貼り付けてみてください。
16
リバーシ(JavaScript)
また懲りずにオセロゲームを作る。
これがJavaScriptデヴューなわけですが初めての言語で書く時だとやっぱり、
以前使ったアルゴリズムで書くほうが理解が早い気がするので。
CからJavaに書き換えた時よりもちょっと苦労したけど基本的にほぼ同じ感じ。
でもFirefoxで普通に動いてもIEだと動かないこともあったりいろいろと苦労も。
それ以外のブラウザでは試してないのでひょっとしたら動かないかもです。
手入力で適当に作った評価関数を用いてα-β探索で４手先まで読みます。
以前のJavaApplet版と比べるとやっぱりスクリプト言語なので、
動きが遅いため読める手数が限定されて少し弱くなってます。
プログラミングを洗練させて速くする余地もかなりありそうですがそれは次の機会に。
ブログパーツ用として使うには下のソースコードを好きなところに貼り付けてください。
スタイルシートによってはうまく表示されない場合もあるのでその時はご容赦を…
でもJavaScriptはなんのインストールも無しで動かせるし面白いかも。
ゲームだけじゃなくてＨＰのインタフェースとかいろいろ使えそう。
もっといろいろ作ってみる予定なので乞うご期待。
07
| h o m e |
