JavaScriptで神経衰弱作ってみた

JavaScriptで神経衰弱作ってみた
Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestEmail this to someone

以前の旧ブログでもテストで作成したのですが、リニューアルしてこちらで再アップします。(いや、リニューアルしたのは絵だけなんですけどね)

参考サイトはこちら:鴈野さんの 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;	//開いたカードの1枚めの番号
var i1=0;	//開いたカードの1枚めの画像番号
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">

 


ぶっきらぼうな説明で申し訳ございませんが、以上となります!