JavaScriptで神経衰弱作ってみた
以前の旧ブログでもテストで作成したのですが、リニューアルしてこちらで再アップします。（いや、リニューアルしたのは絵だけなんですけどね）
参考サイトはこちら：鴈野さんの Java Script/DHTML 事例/サンプル集
ほぼ参考サイトの通りで作成しました。
こちらで行なった変更はスマホで開いた時の枚数の変更と、以下のセカンドステージの追記です。
※というわけで、セカンドステージもクリアしてね
ファーストステージのタグ
基本は、鴈野さんの Java Script/DHTML 事例/サンプル集のままの引用です。
51〜56行目はわたしの方で追記しており、クリア後セカンドステージへ進むようにしています。（ソースみられたらすぐわかりますがw。）
<script type="text/javascript">
var card_i=new Array("1b","1b","1r","1r","2b","2b","2r","2r","3b","3b","3r","3r","4b","4b","4r","4r","5b","5b","5r","5r","6b","6b","6r","6r","7b","7b","7r","7r");
var card_c=new Array();
var nn=28; //残りのカード枚数
var oo=0; //開いたカードの枚数
var c1=0; //開いたカードの１枚めの番号
var i1=0; //開いたカードの１枚めの画像番号
timerID=10;
function Shuffle(){
for (i=0;i<28;i++) {card_c[i]=card_i[i]+".jpg";} //全カードをコピー
for (i=27;i>0;i--){ //かき混ぜる
j=Math.floor(Math.random()*i);
temp=card_c[i];
card_c[i]=card_c[j];
card_c[j]=temp;
}
nn=28; //残りのカード枚数
oo=0; //開けたカード枚数
for (i=0;i<28;i++) document.images[i].src="c.jpg"; //全カードを裏で配置
}
function Card(m){
if (oo==0){ //開けたカードが1枚目の時
i1=m; //カード番号保存
c1=card_c[m].charAt(0);
if (c1!="n") { //まだ取り終わっていないカードなら
oo=1; //開けたカード枚数更新
document.images[m].src=card_c[m]; //カードを開ける
}
}
else if (oo=1){ //開けたカードが2枚目の時
i2=m; //カード番号保存
c2=card_c[m].charAt(0);
if (i1!=m && c2!="n"){ //一枚目と同じでなく取り終わっていないカードなら
document.images[m].src=card_c[m]; //カードを開ける
if (c1==c2) {
timerID=setTimeout("Match(i1,i2)",300);
card_c[i1]="n"; //一致したカードを取りきったことにする
card_c[i2]="n";
nn=nn-2;
}
else timerID=setTimeout("UnMatch(i1,i2)",300);
oo=0; //開けたカードの枚数を0に
}
}
}
function Match(m1,m2){
document.images[m1].src="n.jpg"; //カードを取り去る(ブランクパターンにする)
document.images[m2].src="n.jpg"; //カードを取り去る(ブランクパターンにする)
if (nn==0){
var nxt = confirm("次のステージへ挑むのか？");
if (nxt == true){
location.href = "shinkei-suijaku2";
} else {
alert("そっか・・");
Shuffle();
}
}
}
function UnMatch(m1,m2){
document.images[m1].src="c.jpg"; //カードを裏返す
document.images[m2].src="c.jpg"; //カードを裏返す
}
</script>
51〜56行目を削除して、50行目の文言を「おつかれさま！」としておけば、ファーストステージのみの神経衰弱となりますね！
上記スクリプトを読み込んで、配置のマークアップの方は
<table border=0 cellspacing=10> <tr> <td><a href="javascript:Card(0)"><img src="c.jpg" border=0></a></td> <td><a href="javascript:Card(1)"><img src="c.jpg" border=0></a></td> <td><a href="javascript:Card(2)"><img src="c.jpg" border=0></a></td> <td><a href="javascript:Card(3)"><img src="c.jpg" border=0></a></td> <td><a href="javascript:Card(4)"><img src="c.jpg" border=0></a></td> <td><a href="javascript:Card(5)"><img src="c.jpg" border=0></a></td> <td><a href="javascript:Card(6)"><img src="c.jpg" border=0></a></td> </tr> <tr> <td><a href="javascript:Card(7)"><img src="c.jpg" border=0></a></td> <td><a href="javascript:Card(8)"><img src="c.jpg" border=0></a></td> <td><a href="javascript:Card(9)"><img src="c.jpg" border=0></a></td> .........続く
といった形で、枚数分（28枚）配置すれば良いです。
※Tableタグにこだわらなくて大丈夫です。
「0」からカウントされるので、28枚の場合は最終<a href="javascript:Card(27)">で終わることになります！
画像作成
こちらはJavaScriptのタグの方の2行目
var card_i=new Array("1b","1b","1r","1r","2b","2b","2r","2r","3b","3b","3r","3r","4b","4b","4r","4r","5b","5b","5r","5r","6b","6b","6r","6r","7b","7b","7r","7r");
で指示した通りとなるのですが、
1b.jpg と 1r.jpg は同じ画像…で1ペアとなるので、計7枚の絵をコピーでファイル名のみ変更 ●b.jpg ●r.jpg として 結果14個の画像データを準備しました。
1b.jpg = ねこ
1r.jpg = ねこ（1b.jpgのコピーでファイル名のみ変更）
2b.jpg = いぬ
2r.jpg = いぬ（2b.jpgのコピーでファイル名のみ変更）
・
・
・
7b.jpg = とかげ
7r.jpg = とかげ（7b.jpgのコピーでファイル名のみ変更）
ちなみに画像をたくさん作るのが面倒だったので、配列の中身をみてみると 1b 1b 1r 1r といった風に私の場合は重複させて記載していますが、これらを重複させずに14b, 14rまで作成すれば、完全に1ペアずつの難しい目の神経衰弱の作成が可能です。
c.jpgという、カードの裏側の画像も1枚準備しましょう。
セカンドステージ
ファーストステージと異なる箇所を色付けしています。
<script>
var card_i=new Array("1b","1b","1r","1r","2b","2b","2r","2r","3b","3b","3r","3r","4b","4b","4r","4r","5b","5b","5r","5r","6b","6b","6r","6r","7b","7b","7r","7r");
var card_c=new Array();
var nn=28; //残りのカード枚数
var oo=0; //開けたカード枚数
var c1=0; //開けた1枚目カード番号
var i1=0; //開けた1枚目img番号
var cnt; //チカ追加: タイマー処理用
var PassageID;
timerID=10;
function Shuffle(){
stopCount()
document.frm.countShow.value = 0;
for (i=0;i<28;i++) {card_c[i]=card_i[i]+".jpg";} //全カードをコピー
for (i=27;i>0;i--){ //かき混ぜる
j=Math.floor(Math.random()*i);
temp=card_c[i];
card_c[i]=card_c[j];
card_c[j]=temp;
}
nn=28; //残りのカード枚数
oo=0; //開けたカード枚数
for (i=0;i<28;i++) document.images[i].src="c.jpg"; //全カードを裏で配置
startCount();
}
function Card(m){
if (oo==0){ //開けたカードが1枚目の時
i1=m; //カード番号保存
c1=card_c[m].charAt(0);
if (c1!="n") { //まだ取り終わっていないカードなら
oo=1; //開けたカード枚数更新
document.images[m].src=card_c[m]; //カードを開ける
}
}
else if (oo=1){ //開けたカードが2枚目の時
i2=m; //カード番号保存
c2=card_c[m].charAt(0);
if (i1!=m && c2!="n"){ //一枚目と同じでなく取り終わっていないカードなら
document.images[m].src=card_c[m]; //カードを開ける
if (c1==c2) {
timerID=setTimeout("Match(i1,i2)",300);
card_c[i1]="n"; //一致したカードを取りきったことにする
card_c[i2]="n";
nn=nn-2;
}
else timerID=setTimeout("UnMatch(i1,i2)",300);
oo=0; //開けたカードの枚数を0に
}
}
}
function Match(m1,m2){
document.images[m1].src="n.jpg"; //カードを取り去る(ブランクパターンにする)
document.images[m2].src="n.jpg"; //カードを取り去る(ブランクパターンにする)
if (nn==0){
stopCount();
if (cnt <= 30){
alert(cnt + '秒！あなたは神です・・・\n色々頑張り過ぎて体壊さないでね。');
location.href = "trump3/trump3.html";
} else if(cnt <= 40){
alert(cnt + '秒！早い！！\nよ！大統領！');
location.href = "trump3/trump3.html";
} else if(cnt <= 50){
alert(cnt + '秒！\nもっかいやり直して！\n特典みれるまで頑張れ！');
Shuffle();
} else if(cnt <= 60){
alert(cnt + '秒！\nボンヤリしないで！！');
Shuffle();
} else {
alert(cnt + '秒！\n何があったんだ・・・！！');
Shuffle();
}
}
}
function UnMatch(m1,m2){
document.images[m1].src="c.jpg"; //カードを裏返す
document.images[m2].src="c.jpg"; //カードを裏返す
}
function showCount(){
cnt++; // カウントアップしていく。
document.frm.countShow.value = cnt ;
}
function startCount(){
cnt = 0; // まずリセット。
PassageID = setInterval('showCount()',1000);
}
function stopCount(){
clearInterval(PassageID); // タイマーをクリア。
}
</script>
55〜73行目で、クリアした時間ごとに表示されるアラートを分けています。さらに40秒以内だと、新ページへリンクされます。
79〜89行目は、ファーストステージにはなかったカウントアップするプログラムが入っています。
12行目と24行目に、カウントスタート・ストップを追加しています。
HTMLのマークアップの方は、ファーストステージとほぼ一緒なのですが、カウントアップの秒表記を追加してあげましょう。
<input name="countShow" type="button" class="buu2" value="" size="3">
ぶっきらぼうな説明で申し訳ございませんが、以上となります！