この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="card"><span class="material-symbols-outlined">favorite</span></div>
<div class="card"><span class="material-symbols-outlined">favorite</span></div>
<div class="card"><span class="material-symbols-outlined">star</span></div>
<div class="card"><span class="material-symbols-outlined">star</span></div>
<div class="card"><span class="material-symbols-outlined">local_bar</span></div>
<div class="card"><span class="material-symbols-outlined">local_bar</span></div>
<div class="card"><span class="material-symbols-outlined">mood</span></div>
<div class="card"><span class="material-symbols-outlined">mood</span></div>
<div class="card"><span class="material-symbols-outlined">sunny</span></div>
<div class="card"><span class="material-symbols-outlined">sunny</span></div>
<div class="card"><span class="material-symbols-outlined">thumb_up</span></div>
<div class="card"><span class="material-symbols-outlined">thumb_up</span></div>
</div>
<div class="button">
<button id="start">START</button>
</div>
</body>
</html>
CSS
body { margin-top: 20px }
#container {
display: grid;
place-content: center;
grid-template-columns: repeat(4, 100px);
grid-auto-rows: 100px;
gap: 10px;
margin: 20px;
}
.card {
display: grid;
place-content: center;
cursor: pointer;
border: solid 2px #444;
}
.material-symbols-outlined {
font-size: 60px;
color: #444;
}
#start {
width: 430px;
height: 40px;
}
.one { color: #f00 }
.two { color: #00f }
.hidden { opacity: 0 }
.button { text-align: center }JavaScript
const start = document.getElementById('start');
const cards = document.querySelectorAll('.material-symbols-outlined');
let selected = '', player = 'one', lock = false, interval = 1000;
// アイコンのクリックイベント
cards.forEach((card) => {
card.onclick = () => {
// lockがtrueかhiddenのついていないアイコンの場合は処理終了
if(lock || !card.classList.contains('hidden')) {
return;
}
card.classList.remove('hidden');
card.classList.add('selected');
interval = 2000;
// 1枚目のカードをめくったとき
if(selected == '') {
selected = card.innerText;
interval = 1000;
// 1枚目と2枚目が一致していたとき
} else if(card.innerText == selected) {
nextTurn(player);
// 1枚目と2枚目が不一致だったとき
} else {
// lockをtrueにしてプレイヤーを交代
lock = true;
player = (player == 'one') ? 'two' : 'one';
setTimeout(() => {
nextTurn('hidden');
lock = false;
}, 1000);
}
// プレイヤーがtwoだったら自動でクリックイベントを発動
if(player == 'two') {
setTimeout(() => {
clickables = document.querySelectorAll('.hidden');
i = Math.floor(Math.random() * clickables.length);
clickables[i].click();
}, interval);
}
}
})
// 2枚目をめくった後の処理
nextTurn = (add) => {
selected = '';
let selects = document.querySelectorAll('.selected');
selects.forEach((card) => {
card.classList.add(add);
card.classList.remove('selected');
})
}
// スタートボタンを押したとき
start.onclick = () => {
let container = document.getElementById('container');
cards.forEach((card) => {
card.classList.add('hidden');
card.classList.remove('one', 'two');
// ランダムにカードを選択して親要素の末尾に移動させる
i = Math.floor(Math.random() * container.children.length);
container.appendChild(container.children[i]);
})
}
