今回は画像をクリックしたら、クリックされた画像に応じて別の画像に切り替える処理についてお伝えします。
本シリーズでは各記事だけで独立してJavaScriptの基本的な技術を学べるだけでなく、全体を通してひとつのゲーム「神経衰弱」を完成させることを目標としています。プログラミングでは「作りながら学ぶ」系の本を時々見かけますが、そのように文法だけでなく具体的な使い道も知れると発想が広がりわかりやすいのではないかと思いこのシリーズを始めました。今後も色々なものを題材に紹介いこうと計画しています。
完成イメージ
今回の完成イメージはこんな感じです。
いろんなカードをクリックしてみてください。初めは全て裏面の画像を表示していますが、クリックされた場所に応じてそれぞれ別の画像に切り替わります。
「神経衰弱」などのトランプゲームではカードごとに別々の表面を持っているわけですし、カードゲームに限らず色々な場面でも役立つでしょう。
クリックされた画像だけ切り替える
前回は画像をクリックすると画像を切り替える方法についてお伝えしました。
しかし前回は画像は1枚だったので気にもしませんでしたが、複数の画像が並んでいる場合はクリックした画像だけ変更させたいですよね。今回はその方法についてお伝えします。
まずは復習を兼ねて、クリックで画像を切り替える方法は以下のようにすればよいのでした。前回記事「クリックで画像を切り替える」も合わせてどうぞ。
var text = '<img src="../../images/ura.png" id="img01" onclick="changeImg()">';
document.getElementById("table").innerHTML = text;
//画像を切り替える関数
function changeImg(){
//src属性を変更させたい画像のパスに書き換える
document.getElementById("img01").src= "../../images/spade1.png"
}ここではid名に”table”とつけた親要素に、クリックされると画像を変える関数を呼び出すようにしたimgタグを挿入しています。動作は↓のようなかんじです。
裏面を向いたカードをクリックすると表を向きます。
では、複数の画像を並べてクリックした画像だけ切り替えるにはどうしたら良いでしょうか。
強引な方法ですが非常にシンプルで、それぞれ別々のid名をつけて、画像を切り替える関数がクリックされたidによって表示する画像を変えればよいでしょう。
var text = "";
for (var i = 0; i < cards.length; i++) {
//個別のid名をつける(0番からの通し番号)
imgID = String(i); //文字列に変換
//imgタグのid属性を上で通し番号を文字列にしたものとして、クリックしたらその番号を引数に入れて関数を呼び出す
text += '<img src="../../images/ura.png" id=' + imgID + ' onclick="changeImg(this.id)">';
}
document.getElementById("table").innerHTML = text;
//画像を切り替える関数
function changeImg(id){
//クリックされた画像のid名で要素を指定し、そのsrc属性だけ書き換える
document.getElementById(id).src = "../../images/spade1.png";
}動作は↓のような感じです。クリックするとその画像だけ切り替わります。
クリックされた画像に応じて別の画像に切り替える
いまのままでは、どの画像をクリックしても同じ画像に切り替わってしまいます。「神経衰弱」だったら、全部別々の表面を持ってるはずですよね。
過去の記事「複数の異なる画像を並べる」で最初から表を向いているバージョンなら実現できていました。これと組み合わせると簡単でしょう。異なる複数の画像を扱うには、それぞれの画像のパスを配列に格納しておくと便利でした。いま、各画像にはid名として通し番号を振り当てました。その通し番号で配列を呼び出してやればよいでしょう。
//異なる画像のパスを配列に格納 var cards = ["../../images/spade1.png", "../../images/spade2.png", "../../images/spade3.png", "../../images/spade4.png", "../../images/spade5.png", "../../images/diamond1.png", "../../images/diamond2.png", "../../images/diamond3.png", "../../images/diamond4.png", "../../images/diamond5.png"]; //さきほどまでと同じく //通し番号をidとしてクリックされたらそのidを持つ要素の画像を変更 //ただし数を増やしたため区切りの良いとこで改行するため条件分岐 var text = ""; for (var i = 0; i < cards.length; i++) { imgID = String(i); if (i%5==0) { text += '<img src="../../images/ura.png" id=' + imgID + ' class="clear" onclick="changeImg(this.id)">'; }else { text += '<img src="../../images/ura.png" id=' + imgID + ' onclick="changeImg(this.id)">'; } } document.getElementById("table").innerHTML = text; //クリックされた画像のsrc属性を書き換える関数 function changeImg(id){ //id名は通し番号だったので文字列から数値に変換 var index = Number(id); //通し番号に対応した画像のパスを配列から取得 document.getElementById(id).src = cards[index]; }
これでようやくトランプゲームっぽくなってきました。動作は↓のような感じです。カードをいくつかクリックしてみてください。全て別の表面に切り替わります。
ちなみに、idを数字だけにするというのは基本的には分かりずらいコードになりやすいのですが、HTML5では禁止はされておらず、このような愚直な実装にはかえって便利なのではと思いこうしました。
次回予告
さて、今回までで基本的な動作は実装できるようになりました。
次回は選ばれたカードの数が「揃っていたら消す」,「違っていたら元の裏面に戻す」といったアルゴリズムについてお伝えします。「神経衰弱」特有の処理医ではありますが、数字を使ったいろんなゲームなどで考え方は広く応用可能です。乞うご期待。
コメント