スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

JavaScriptでポーカー作ってみた(プログラミングの話)

前の記事からの関連になります。

JavaScriptのプログラミングに関わるお話になるので、興味があまりない方は無理に読もうとしなくて全然構いません。

まず、ソースが欲しい方がいるかもしれないので、こちら に用意しておきました。
※2017/04/09 追記 ここから
ソースダウンロード先をgithubに変えました。
ソース一式をzipで欲しい方は、
リンク先を開く - 「Clone or download」ボタンクリック - 「Download ZIP」ボタンクリック
の操作からダウンロードできます。
※追記ここまで

Microsoft Visual Web Developer 2010 Express で開けれるようにしておきましたので、同開発ツールもしくは互換性のある開発ツールをお持ちの方はどうぞお使いください。
起動の際、動作させたいhtmファイルをスタートページに設定していただくよう、お願いします。

さて、ここでは以下の2つについてお話させて頂こうかと思います。
1.クラス
2.思考回路


1.クラス

今回のJavaScriptではクラスの考え方を思いきり取り入れました。
カードをカードクラスから生成したカードインスタンスで表現したかったのが主な理由です。

さて、JavaScriptでクラスの考えを取り入れてみたわけなのですが、大変でした。
型付けが弱いので、関数(メソッド)の引数に何の型のどんな値が入ってくるのか特定されず、関数を呼ぶときは慎重になってました。
この関数にはこのクラスのインスタンスが来るに決まっているんだ、などと勝手に決めつけて作っていたので、作りながらドキドキしてました。おかしなオブジェクト(空の配列とか)が来た時のエラーチェックはほんとに気まぐれで書いたり書かなかったりです。

やはりJavaScriptでクラスの考えを取り入れるのは、ほどほどにした方が良さそうです(もともとそんな言語ではないですしね)


2.思考回路
手札から不要なカードを捨てる思考回路を頑張って作ってみました。
手札が何の役かどうかの判定は楽なのですが、イーシャンテン((麻雀用語)役完成まであと1つの状態)かどうかの判定は難易度がちょっと高かったです。
フラッシュの場合だと 手札5枚中4枚同じスート or 3枚同じスート+ジョーカー かどうか判定するだけなので、楽でした。
フルハウス系(ツーペアやスリーカードなど)は、ジョーカーが含まれいるかどうか注意しながら組んでいけば良かったのでこれもまだ楽でした。
例:[JK]抜きでツーペア+[JK] = フルハウス

厄介なのはストレート。
ストレートまであと1枚の状態というのは、次の4パターンあります。
ストレートを構成している4枚が、
・連番([4][5][6][7][K])
・歯抜け([4][5][7][8][K])
・連番3枚+ジョーカー([4][5][6][K][JK])
・歯抜け3枚+ジョーカー([4][5][7][K][JK])
そしてエース始まりのストレート([A][2][3][4][5])、エース終わりのストレート([10][J][Q][K][A])の考慮も必要です。
リアルで人とやっているときにはどのカードを捨てればいいかすぐに分かるのに、プログラムで書こうとするとほんとに唸り声がでました(たぶん、その気持ちは伝わらないでしょうけど)
考えに考え、やっと思いついた方法は、ジョーカーが何のカードに化けているか最初に調査&置換し、そしてストレートの完成形と比べて何のカードが不要かを調べるという方法でした。
こんな感じ:[4][5][7][K][JK] -> [4][5][6][7][K] -> [4][5][6][7][8]にしたいので[K]が不要

もっといい方法は他にないんでしょうか。
作っている最中はあえてネットなどで調べずに試行錯誤してましたが、これよりもスマートな方法があるような気がしてならないです。

うーん、とりあえずできたので良しとしますか・・・。


以上です。
もしアドバイス等頂けるようでしたら、ありがたく思います。
それでは!
スポンサーサイト
[ 2013/12/15 22:36 ] プログラミング JavaScript | TB(0) | CM(0)

JavaScriptでポーカー作ってみた

お久しぶりです。

ブログを更新するタイミングがなかなかなくって、かなり間が空いちゃいました。

さて、そんなことは置いておき、JavaScriptでポーカー作ってみました!

完全一人用ポーカー
Img_Alone_01.png
コンピュータ対戦ポーカー
Img_Versus_01.png

ダウンロードはこちらから

◆ ファイル ◆
ダウンロードしたファイルで、
Poker_Alone.htm が完全一人用ポーカー
Poker_Versus.htm がコンピュータ対戦ポーカー
です。
それぞれのファイルをInternet Explorer(IE)で開いてください(動作確認済バージョンはIE9,IE10)
IE以外で開いて頂いても構わないのですが、音が出ないなど正常動作の保証ができませんのであらかじめご了承願います。

◆ 遊び方 ◆
詳しくはダウンロードファイルにありますreadme.txtをご覧ください。
完全一人用ポーカー、コンピュータ対戦ポーカー のどちらも交換したいカードを選んで勝負ボタンを押すだけです。

◆ 免責事項 ◆
本作品の二次配布を禁止します。
本作品中で使用している素材の二次使用を禁止します。
本作品のプレイ中に起きた、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします。


----------------
以前もJavaScriptで作ってみたことがあるのですが、同じことをちょっと違う作り方でできそうだと気付き、ならば作ってみようと至ったわけです(詳しくは次の日記で)

ついでにコンピュータと対戦させることも思いつき、思いつくままに作ってみました。
コンピュータと対戦といっても、簡単な思考回路を持たせてカードを捨てさせ、そして引かせてるだけですが(汗)

思考回路を作ることしか頭になかったので、それ以外の要素(掛け金など)はなーんも作ってません(別にいいんだろうけど、いいのか?)

そんな感じですが、楽しんでいただけたらと思います。
[ 2013/12/15 22:35 ] プログラミング JavaScript | TB(0) | CM(0)

ペグ・ソリティア

こんにちは!

バタバタしててブログを更新してる暇があまりありませんでした(;^_^A
これからも更新ペースはこんな感じになるかと思います。。。

え~、さてさて本題ですが、「ペグ・ソリティア」をJavaScriptで作ってみました!

ペグ・ソリティア
ダウンロードはこちらから
動作ブラウザ:IE(インターネットエクスプローラー)7,IE8,IE9
(これら以外は音楽再生の保障ができません)


ペグ(ボールのこと)を操作してペグを減らしていき、1個にすればクリアのアレです。

友人とペグ・ソリティア(実物のおもちゃ)をしているときに「これ作ってみれば?」という話が出て、作れそうだったので作ってみた、というわけです。

楽しんでいただければいいな、とただただそう思います。


以下、コード関連
コードなんですが、こちらに載せておきます。




エフェクトの処理が多いだけで、ゲーム自体のコードは多くないです。

ペグ情報を保持した9×9の配列を用意し、画面上には3×3の四隅がないことに注意しながらその配列を操作していくだけです。

その際、配列の操作と画面上の描写(操作)を別々にしておく(ペグの移動判定などを配列を参照しながら行い、配列を操作します。そしてその操作後の配列を参照してペグを配置する)と分かりやすいと思います。


それでは!


~「ペグ・ソリティア」に使わさせていただいたBGM、SEの提供者様~
---BGM---
musmus [http://musmus.main.jp/]

---SE---
フリー音楽素材 Senses Circuit [http://www.senses-circuit.com/]
01SoundEarth [http://www.01earth.net/sound/]
[ 2012/09/17 22:43 ] プログラミング JavaScript | TB(0) | CM(1)

JavaScript メモ(配列)

JavaScript 自分用メモ(配列)

JavaScript を書いているときに作った配列用のメソッドです。
使いたい人は自由に使ってください。 動作確認はIE9のみ済。


IE用のarray.indexOf です。 参考サイト


配列内の同一要素の個数を数えます。
例えば arr : [0,1,2,3,4,4,4,"4","4",5] で arr.cntElm(4) は 3 となります (arr.cntElm("4") は 2)
一応 undefined (配列生成時などにできる、何も入っていない要素) もカウントできます。


配列の undefined  を arg_str に変換します。
arr = [0,1,,,4,5] で arr.replaceUndefinedWithStr("insStr") は [0,1,insStr, insStr,4,5] となります。
注意してほしいのは[1,2,3,]のように最後に ',' があるときで、このときは[1,2,3,insStr]のようになりません。
そのようにしたければ function 内の該当箇所のコメント部分を外してください。


配列の後ろに arg_str があればその要素を後ろから全て取り除きます。
arr = [0,1,2,3,4,5,6,5,5,5,5] のとき arr.sliceStrFromLast("5") は [0,1,2,3,4,5,6] となります (arr.sliceStrFromLast(5) も 同じ結果)


ノベルゲームコード生成機をつくってたときにできたものばかりです。
またどこかで使うんでしょうかね・・・・。


それでは!
[ 2012/07/01 14:14 ] プログラミング JavaScript | TB(0) | CM(0)

ノベルゲームコード生成機 その2

コード解説です。
ノベルゲーム本体の解説が中心で、コード生成機の解説は特にはしません。あしからず。

まず、ノベルゲーム本体のコードです。



文字化けするのはコード生成時のための仕様です。
初めの方の
meta http-equiv="Content-type" content="text/html; charset=Shift-JIS"

meta http-equiv="Content-type" content="text/html; charset=UTF-8"
に変更すれば解消されます。
コード生成機のコードもここに載せようとしたところ、それがうまく表示されなかったので、ブラウザでhtmlファイルを開いてソースを表示させて見てください。

コード生成機は、スクリプトなどの書いてほしいところを書いてもらい、 それをノベルゲーム本体の該当箇所に組み込むだけのコードです。
なので、作りはちょっと荒いです。
(「script」を「sct」と略した謎の行為もあります(笑) 「select」の略と捉えられかねませんね)


さて、ノベルゲームなのですが、これは自分のアイデアであって本に書いてあるような最適な考えだとは限らないということだけまず述べておきます。

で、そのアイデアなのですが、いたって単純。
スクリプト用の配列と分岐点用の2次元配列を用意し、stateを操作してそれらを順次表示・動作させていくだけです。
スクリプト用の配列は
var script = ["Fst", "A", "B", "C", "D", "E"];
分岐点用の配列は
var junc = [ [,,,,,,], [1,,,,,,1], [2,4,5,,,,], [4,,,,,,2]];
のように用意します。(空要素は別のところで0に置換)
なお、script[0]は、スクリプト番号(1から始まる)と対応させるためにわざと捨てました(意味のない要素を入れる)(ついでにjunc[0]も同じく)

さて、内容表示の基本なのですが、int型変数用としてstateを用意します。
そしてstateが1だった場合はscript[1]の内容、2だった場合はscript[2]の内容を表示するようにします。
こうすればstateがどこへ行くかだけ見ればいいことになります。
分岐点でない限りstateはただ+1されていくだけです。


では、分岐点だった場合です。
先ほどのjunc配列の各要素の配列とstateを関係させて分岐点を作ります。

分岐点かどうかからの判定から説明していきます。
junc配列はその各要素の配列がこのような感じで入れらています。
[分岐点スクリプト番号,分岐先1,同2,同3,画像番号,SE番号,BGM番号]
stateが分岐点スクリプト番号と同じになったことを確認したらそれ相応の処理を行います。

例えばstateが2になったとしましょう。
このとき、junc配列内の各要素を見ていき、junc[][0]が2のものを探します。
先ほど用意したものの場合はjunc[2]:[2,4,5,,,,] が該当します(junc[2][0]がstateの2と一致)

このとき分岐先1と分岐先2の要素にそれぞれ4と5が入っています。
ここで分岐先用の処理を行います。
具体的には、選択肢ボタンを表示させ、それぞれのボタンを押したらそれぞれのstateへ移動するようにします(選択肢1だった場合はstate=4、選択肢2だった場合はstate=5)


このとき、画像番号の要素になにか入っていたら、それに対応した画像を表示させるようにします(SE、BGMも同様)

これだけです。


では、全体の流れを見ていきましょう。

・・・→ボタンが押される→stateの移動→stateに応じたスクリプトの表示→stateが分岐点かチェック(junc[][0]と比較)→分岐点だった場合はボタン表示などの処理を行う(画像、音声処理もここ)→ボタンが押される→・・・(繰り返し)

細かいこととしては、スクリプトがアニメーション中だった場合にボタンが押されたときはスクリプトを全文表示にすることくらいでしょうか。



アイデアとしてはこんな感じです。
作っている途中から画像やら音声やらを組み込んだので、コード全体がちょっとからまってるような気がしますが、今さら直す気ないです(苦笑)
あと、onload時の処理にやたら手間がかかったのは意外でした。
とりあえず動作するようにはしたのですが、もうちょっとすっきりしたやり方はなかったもんですかね・・・。

えっと、以上で解説は終わります。
その他聞きたいことがあったらまた聞いてください。
バグなど発生しましたら、対応できる範囲で対応していきたいと思います。

それでは!

[ 2012/01/06 20:04 ] プログラミング JavaScript | TB(0) | CM(0)







上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。