目標
並べられている５枚のカードの中から１枚ある当たりのカードを引くゲームを作成できる様になる。
環境
・Mac
・VS code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript Practice</title>
<style>
body{
display: flex;
flex-wrap: wrap;
}
.box{
width: 100px;
height: 100px;
background: skyblue;
cursor: pointer;
transition: 0.8s;
margin: 0 8px 8px 0;
text-align: center;
line-height: 100px;
}
</style>
</head>
JavaScriptをコーディング
<body>
<script>
'use strict'
// ①定数numに5を代入。
const num = 5;
// ②定数winnerに、小数点を切り捨てた（Math.floor）0以上5未満（０〜４）の中から１つランダムに選んだ数字（Math.random()）を代入
const winner = Math.floor(Math.random() * num);
// ③numに5が代入されてるので、for文によりiが4になるまで繰り返し処理を行う。
for (let i = 0; i < num; i++){
// ④for文によって5回繰り返されるのでdivが5個生成（createElement）。
const div = document.createElement('div');
div.classList.add('box');
div.addEventListener('click', () => {
// ⑤iには四角形（div）の左端から0〜4の数字が順に割り振られている一方、定数winnerは0〜4の中からランダムに１つ選んだ数字が代入されていて、双方が同じかどうかをif文で比較。
if (i === winner){
// ⑥同じであればwin!と表示（div.textContent='win!';）し、winのCSSを適用（div.ckasslist.add('win')）させる。
div.textContent='win!';
div.classList.add('win');
// ⑦同じでなければlose!と表示（div.textContent='lose!';）し、loseのCSSを適用（div.ckasslist.add('lose')）させる。
}else{
div.textContent='Lose!';
div.classList.add('lose');
}
});
document.body.appendChild(div);
}
</script>
</body>
</html>
styleタグ内にCSSでスタイリング
/* ①数字が同じだった時のwinのCSSを定義 */
.win{
background: pink;
border-radius: 50%;
transform: rotate(360deg);
}
/* ②数字が違った時のloseのCSS */
.lose{
/* サイズを0.1小さくする */
transform: scale(0.9);
}
結果
参考：ドットインストール
↧