javascript 神経衰弱ゲームを作ろう その２ imgタグの生成〜for文を使ってappendでとりあえずカードを並べるまで
この記事の続きです。
kirikko-scondcube.hatenablog.com
今日のコード
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="palet"></div>
<div id="result">ここに経過時間が読み込まれるようにする</div>
<script src="js/main.js"></script>
</body>
</html>
}
#palet {
width: 310px;
height: 490px;
background-color: antiquewhite;
.card {
width: 60px;
height: 80px;
background-size: cover;
float: left;
}
#result{
background-color: lightskyblue;
}
Js
// imgを配列に入れたが文字列になっているもの
window.onload = function(){
let arr = ;
let img = document.createElement('img');
img = document.createElement('img');
//img
img.id = ''
//img＋id=""
img.className = 'card'
//img id= "" + class
//img id ="" + class="card"" + src ここで差別化する！
// palet.appendChild(img);
arr.push(img);
img = document.createElement('img');
//ここでimgを下のforでも使えるようクリア（初期値）に戻す
const palet = document.getElementById('palet');
//imgタグを作る
//スペードの画像を配列に格納 記述------------------------------------------------
for(i=1; i<14; i++){
img = document.createElement('img');
//ここの記述で一度ループの最初でimgについたid、クラス、srcをリセットしているこれをしないとスペてのイメージが最後のイメージになる
//img
img.id = 'spade'
//img＋id="spade"
img.className = 'spade card'
//img id= "spade" + class
//img id ="spade" + class="spade" + src ここで差別化する！
// palet.appendChild(img);
arr.push(img);
//１周目は img + id + class + srcとなり img= (img id="spade" class="spade" src ="images/spade/1.png")
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
console.log(arr)
//ハートの画像を配列に格納 記述------------------------------------------------
for(i=1; i<14; i++){
img = document.createElement('img');
//ここの記述で一度ループの最初でimgについたid、クラス、srcをリセットしているこれをしないとスペてのイメージが最後のイメージになる
//img
img.id = 'heart'
//img＋id="heart"
img.className = 'heart card'
//img id= "heart" + class
//img id ="heart" + class="heart" + src ここで差別化する！
// palet.appendChild(img);
arr.push(img);
//１周目は img + id + class + srcとなり img= (img id="heart" class="heart" src ="images/heart/1.png")
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
// 今配列には26まで格納されていて
// これを１個ずつ並べるなら
// palet.appendChild(arr[26]);
console.log(arr)
// ここに配列をシャッフルするコードを記入する
// シャッフルここまでーーーーーーーーーーーーー
// ここで配列から順番に画像を取り出している
for(i=0; i<27; i++){
palet.appendChild(arr[i]);
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
}
jsの解説
let arr = ;
let img = document.createElement('img');
img = document.createElement('img');
//img
img.id = ''
//img＋id=""
img.className = 'card'
//img id= "" + class
//img id ="" + class="card"" + src ここで差別化する！
// palet.appendChild(img);
arr.push(img);
img = document.createElement('img');
//ここでimgを下のforでも使えるようクリア（初期値）に戻す
一番上の
let arr = で配列を格納する場所を設定
2行目
let img で空のImgを作成
3行目
imgを初期値に戻すコード（１つしかImg使わなければ不要ですが、このあとfor文で回すため記述）（
4行目
img.id =''
''の中に記述した内容をimgタグの中のidとして取得
5行目
img.classNameでid同様クラスを付与（この’’の中にスペースで区切れば複数クラスも付与可能
img.setAttribute()でsrc属性をimgへ付与
ここまでやると
<img id ="" class="card" src="images.joker.png">が
let img の変数に格納
palet.appendChild(img);
(paletは親要素）をすればimgが1枚表示
ここまでが基本コードで、、
//スペードの画像を配列に格納 記述------------------------------------------------
for(i=1; i<14; i++){
img = document.createElement('img');
//ここの記述で一度ループの最初でimgについたid、クラス、srcをリセットしているこれをしないとスペてのイメージが最後のイメージになる
//img
img.id = 'spade'
//img＋id="spade"
img.className = 'spade card'
//img id= "spade" + class
//img id ="spade" + class="spade" + src ここで差別化する！
// palet.appendChild(img);
arr.push(img);
//１周目は img + id + class + srcとなり img= (img id="spade" class="spade" src ="images/spade/1.png")
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
先ほどの内容をベースにfor文を上記のように記述するとスペードカード13枚が配列のindex 1~13番に格納
0番は最初空の要素pushしてカード番号とindex番号が揃うようにしたのですが、せっかくなので0番にジョーカーを設定しました。
//ハートの画像を配列に格納 記述------------------------------------------------
for(i=1; i<14; i++){
img = document.createElement('img');
//ここの記述で一度ループの最初でimgについたid、クラス、srcをリセットしているこれをしないとスペてのイメージが最後のイメージになる
//img
img.id = 'heart'
//img＋id="heart"
img.className = 'heart card'
//img id= "heart" + class
//img id ="heart" + class="heart" + src ここで差別化する！
// palet.appendChild(img);
arr.push(img);
//１周目は img + id + class + srcとなり img= (img id="heart" class="heart" src ="images/heart/1.png")
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
さらに上記でハートを格納して
ここまでで配列のlet arr ;に
0 がジョーカー
1~13にスペード
14~26にハート
が格納されました！
ここまでで配列のlet arr ;に
0 がジョーカー
1~13にスペード
14~26にハート
が格納されました！
// ここで配列から順番に画像を取り出している
for(i=0; i<27; i++){
palet.appendChild(arr[i]);
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
この記述でpalet.appendChild(arr[i]);でforを回して
27枚表示させるところまでいきました！
このアペンドをする前にシャッフルコードをなんとか追加して
アペンドした時に配列がシャッフルされているようにしようと今から考えます
続く
