こんにちは。ハイナレです！
プログラミングを学ぶなら、本を読むより手を動かして実際に作ってみるのが一番ですよね。
前回、Vue.jsのイベント処理でアラートを出すことに成功した私は、調子に乗って神経衰弱ゲームを作ろうとしています。
ただまだ私には難易度が高かったようで。。。。
まずはjQueryで神経衰弱ゲームを作ってみて、処理の流れを確認をしてみました！
神経衰弱のコード
とりあえず、神経衰弱と呼べるような最低限の機能だけ搭載しました。
↓そして完成したのがこちら↓
- カードを並べる
- 2枚めくるのを1セットとする
- 同じ数値のカードをめくったらカードが赤くなる
本当に最低限の機能だけなので、揃ったカードは残ったまま。揃ったあともクリックもできてしまいます。
コード解説
【HTML】
<ul id="card"></ul>
HTMLは ul タグを用意するだけです。その中に li 要素を追加していきます。
【CSS】
#card{
list-style: none;
}
#card li{
margin: 5px;
width: 30px;
height: 50px;
float: left;
border:solid 1px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
CSSは主に li 要素を装飾しています。
list-style: none;
→リストスタイルを無効にしています。
float: left;
→ li 要素を横に並べています。
display: flex;
align-items: center;
justify-content: center;
→上記3行で文字を上下中央に表示しています。左右中央だけなら text-align:center でいいのですが、上下中央の場合は上記の書き方になりますね。
【JavaScript】
var total = 10; //カードの枚数
var isFirst = true; //1枚目か判定
var card1 = ""; //array_cardsのindex（1枚目）
var card2 = ""; //array_cardsのindex（2枚目）
var array_cards = []; //カードに表示する数値を格納する配列
//カードに表示する数値を生成
//array_cards = [1,1,2,2,3,3,4,4,5,5]となる）
for(i=1; i <= total/2; i++) {
array_cards.push(i,i);
}
//array_cards配列の数値をランダムに並び替える
array_cards.sort(function() {
return Math.random() - Math.random();
});
//ulに空のli要素を追加
for(i=0; i < total; i++) {
$("#card").append("<li></li>");
}
//li要素をクリックした際の処理
$("#card li").on("click",function(){
//1枚目の場合は、全li要素のテキストを空にする
if(isFirst){
$("#card li").text("");
}
//li要素のindexを取得
var index = $(this).index();
//li要素のindexと同じindexであるarray_cards配列の値を表示する
$(this).text(array_cards[index]);
if(isFirst){
//１枚目
card1 = index;
isFirst = false;
}else{
//2枚目
card2 = index;
//1枚目と2枚目の値が同じ場合はli要素の背景色を赤にする
if(array_cards[card1] === array_cards[card2]){
$("#card li").eq(card1).css("background-color","red");
$("#card li").eq(card2).css("background-color","red");
}
isFirst = true;
}
});
ここでは下記の流れで処理を記述しています。
(1) カード番号を格納する配列array_cardsを作成
(2) li要素を表示
(3) クリックイベントでめくったカード同士を比較
(4) 一致していたらli要素の背景色を赤く変更
カード番号を格納する配列 array_cards には、最初 array_cards={1,1,2,2,3,3,4,4,5,5} のように同じ数値を2つずつ格納します。そして、
array_cards.sort(function() {
return Math.random() - Math.random();
});
の部分で配列の中身をランダムに並べ替えています。
array_cards[0]の値が１枚目のカードの値、array_cards[1]が２枚目のカード……というふうに対応していくんですねー。
神経衰弱なので、1回目のクリックと2回目のクリックで動作が変わります。
なので isFirst フラグで、1回目のクリックかどうか判定しています。
1回目にクリックしたli要素のインデックスはcard1に格納、2回目にクリックしたli要素のインデックスはcard2に格納し、
if(array_cards[card1] === array_cards[card2]){
$("#card li").eq(card1).css("background-color","red");
$("#card li").eq(card2).css("background-color","red");
}
この部分でカードの値同士を比較、一致したら背景色を赤に変更しています。
そしてまた1回目の処理、2回目の処理、比較……を繰り返していく感じです。
ざっくりした説明でしたが、伝わったでしょうか？
次回の目標
処理の流れを理解したので、次回こそVue.jsで神経衰弱を作りたいですね！
上記のプログラムが私だけではなく、誰かの参考にもなったら嬉しいですねー。