今回は、画像をクリックしたら別の画像に切り替える処理についてお伝えします。
本シリーズでは各記事だけで独立してJavaScriptの基本的な技術を学べるだけでなく、全体を通してひとつのゲーム「神経衰弱」を完成させることを目標としています。プログラミングでは「作りながら学ぶ」系の本を時々見かけますが、そのように文法だけでなく具体的な使い道も知れると発想が広がりわかりやすいのではないかと思いこのシリーズを始めました。今後も色々なものを題材に紹介いこうと計画しています。
完成イメージ
今回の完成イメージはこんな感じです
カードをクリックすると画像が変更されるので何度かクリックしてみてください。
「神経衰弱」では基本的にカードは裏面を向いていて、カードの置いてある場所を選ぶとその場所にあるカードの表面がわかるようになります。
「カードをめくる」でいいだろ！わかりにくいわ！ってのは僕もそう思いますが…(笑)あえてプログラムで実装するために噛み砕いて言っています。
さて、まずは画像をクリックした時に表示している画像を変更する処理を実行する必要があります。今回はその方法についてみていきましょう。
表示する画像を変更する
まずはJavaScriptで表示する画像を変更（指定）してみましょう。
JavaScriptで画像を表示させるには以下のように書くのでした。(より丁寧な解説は過去の記事「JavaScriptで画像を並べる」を参照)
<div id="table"></div>//HTMLの画像タグを文字列として準備,src=""には表示させたい画像のパス
var text = '<img src="../../images/ura.png" id="img01">'
//idで指定した要素のHTMLを書き換えることで画像を表示
document.getElementById("table").innerHTML = text;今この画像にはid名に”image01”とつけてみました。ではこのidをもつimgタグのsrcを変更してみましょう。
//idで指定したimgタグのsrcを変更後の画像のパスに変更
document.getElementById("img01").src = "../../images/spade1.png";
まず、document.getElementById(“id名”)で指定たidをもつ要素を取得し、つづけて.src=””でその要素のsrcを変更できます。””の中に変更して表示させたい画像のパスを入れましょう。すると、
先程とは違う画像を表示されました。これがJavaScriptで表示する画像を変更する基本です。
画像がクリックされた時に関数を呼び出す
JavaScriptで表示する画像を変更する方法が分かりましたので、画像がクリックされたときにこの処理を実行できるようにしましょう。
方法は簡単です。画像を変更する処理を関数として、画像がクリックされた時にその関数を呼び出すだけです。
まず、画像がクリックされた時に任意の関数の呼び出す方法です。onlcick=”関数名()”を追加します。つまり今回の場合では、以下のようにすればよいでしょう。
var text = '<img src="../../images/ura.png" id="img01" onclick = "changeImg()">';
document.getElementById("table") = text;とりあえず関数名は”changeImg”としました。
なので画像を変更する処理をその名前で関数化しましょう。
//変更する画像のパスを配列に格納
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"];
//クリックした回数
var click = 0;
//画像を変える関数
function changeImg(){
index = click%cards.length; //クリックした回数に対応して指定する配列の番号
document.getElementById("img01").src = cards[index]; //配列の番号を指定して変更するパスを取得
click++; //クリックした回数をカウントする
}1回だけ画像を変えても面白くないので、複数の画像を循環するように変更する関数にしました。
先ほどはsrc=””に直接画像のパスを書いていましたが、ここではパスを格納した配列の番号をクリック回数に応じて指定して取得しています。すると、下のような動作をするようになります。何度もクリックして動作を確認してみてください。
次回予告
今回はJavaScriptで画像をクリックするとその画像を変更する方法をお伝えしました。
しかし「神経衰弱」では裏にして並んだカードはそれぞれ別の表面があります。したがって次回はクリックされた場所に応じて切り替える画像を変える方法についてお伝えする予定です。
コメント