flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

JavaScriptでカードゲーム作ってくよ2

神経衰弱試作品

 


※カードはゆっくりとクリックしてください

※同じカードのクリックは禁止です

二回めくると一秒後に判定します 

 

では前回の続きで今回はカードを二枚めくり合っていたらカードを放置

そして間違っていたら裏向け(いわゆる数字を隠す)処理をしました。

基本的にプログラミングは例外の作法を除いてif文とwhile or for文があれば大抵の処理はしてしまいます。

 プログラミングのベースは

  •  条件分岐(if)
  • 繰り返し文(while,do,for)
  • 配列(new Array())
  • 関数(function)
  • サブルーチン

JavaScriptの持ち場の

分岐は更に出来ますが、いわゆるJavaScriptの初心者本さえしっかりと熟知

していれば後はアルゴリズムのセンスだけでRPGまで作れてしまうということです。

 

今回の神経衰弱のソースの概念を説明していきましょう。

まず(配列×繰り返し文)によるカード駒の配置ですそのソースがこちら

example 1

 for(i=1;i<=16;i++){
click_date[i] = 0;
if(i == table_cards){document.write("<br><br><br><br>"); table_cards+=4;}
document.write('<span id="card' + i + '" style="background: #333; border: double 5px #000; padding: 15px; margin: 3px;" onClick="drowing_card('+i+')"> </span>');
}

まず今回は4×4の配置を作りました。基本的には一つのカードを作ります。

そしてカードは16枚になるから、iは1→16までの変化となります。

自分はdoやwhileよりもforの方がシンプルで好きですね。一応ローカル変数になるためここは定石にiで指定します。

プログラムの慣例で0から始める人もいますが、ゲームの場合目先のジャストする数で調整する方が無難です。

0→15にすると後半にアルゴリズムが組みづらくなります。

 

次のポイントとして、id名と関数の引数も同時に指定することですiが16まで変化しますから、idはcard1〜card16まで作られ関数の引数は16まで作られます。

これは後のカードの引きに関する部分に重要な役割を果たしていくのでここで予測して書きます。

残りは改行です。4枚事に改行するので(繰り返し文×条件分岐)です。これは初心付近で出てくるので簡単に説明すると4の倍数の時に<br>を入れるという処理を行います勿論後は代入演算子で4を足しておき次の4の倍数回避を行います

ここで注意するのは下手にソースを長くすることです。

example2

 if(i==5||i==9||i==13||i==17){処理;}  ×
if(i==hensu){ 処理; hensu+=4;} ◯

まだアルゴリズムに関して知識が無い時ほど、ソースというものは長くなってしまいます。

いわゆる今やっている<span>によるカード作りをScriptを回さずにhtmlだけで書いてしまう事や

配列と繰り返し文の絶妙な親和性があるにも関わらず単独で値を代入したり

関数で少しの値の変化なら普通は引数を使いますが、少し処理の変えた関数を何個も何個も書いてしまうところです。

そして今回は4の倍数を有限に書くという、ややソースが汚くなる例です。

もし4の倍数で4000まで処理をかけ!!なんて言われたらギブアップするでしょう。

しかし後者の書き方ならば値の限界値までとことん変数の値は拡張してくれます。

example3

for(i=1;i<=16;i++){
cards[i] = Math.floor(Math.random()*9)+1;
}

同じ例で繰り返しにより各カードにランダムに値を入れていきます。

基本的に組み込み関数のMath.randomによる値の変動にもやや差がありますが

ここは精密さを問わないので、ほぼ関係なしにいきます 

 

 次にいよいよ関数処理に入ります。

神経衰弱のルールは

「カードを二枚めくり数字が合えば得点になるカードが合わなければ同じ位置にカードを2枚裏返しておく」

です 。

つまり使うかなと思われる処理は

  • カードをクリックしたら数字を見せる(イベントハンドラ)
  • 2枚目になるとカードを比べる(条件分岐) 
  • 自動的に当たっていたらカードをそのままにして外れてたら戻す

という処理になります、実際にここでは繰り返し分は使っていません

 

まず2回目になったらカードを比べるという処理と変数交換を行わなければなりません

このあたりはまだ未完というよりバグがあるので口頭説明になりますが

一回目引くと値をインクリメント(++)しておく

二回目引くと値を更にインクリメントする

そしてその次に条件分岐を置いておき( hensu == 2)としておきます

最初に変数が(hensu = 0)であれば値は一回目引くと1に変わり条件分岐にかけられますが本命は、2であるため見送られます。

そして二回目通してhensuは更に値を1増やして2になりますこれで条件分岐にかかります。

ここで更に条件分岐を行います。二枚のカードチェックです。

合っていれば一秒後に「おめでとう」間違っていれば一秒後に二枚のカードを裏返す

という処理を行います。

いわゆる、最初はカードは二枚目かの判断をした後に、次の条件分岐でカードの値が合っているかを確認します。

 

そして一秒後の処理にはsetTimeoutを使います

これが今のところの概要ですが、バグがあり「二回目引くと」という処理に問題があります

これをやると同じカードを二回連続でクリックすると実質同じ数字を二枚めくった事になるので通ってしまいます。

ここもまた条件分岐で修正していくこととなります。