画像が表示されない
解決したいこと
JavaScriptで神経衰弱を作っているのですが、表のカード画像が表示されません。
htmlで取り込んだfrontの画像（すべて同一画像）が見えず、backの画像（ペアが１２組）のみが反転したりもとに戻ったりするだけのイカサマ神経衰弱みたいになってしまいます。
コンソールで調べると、frontの画像は一応表示されているようなので常に後ろにいるのだと思います。
YouTubeのこちら↓の動画を参考にして少し数値をいじっただけなので、ちょっとした打ち間違いだと思うのですが・・・。
https://youtu.be/B9qBYMTKuKA?si=Y448FGj7rs05Zz9L
該当するソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神経衰弱</title>
<link rel="stylesheet" href="./memo.css">
</head>
<body>
<section class="memoryGame">
<div class="card" data-animal="cat">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/cat.png" alt="">
</div>
<div class="card" data-animal="cat">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/cat.png" alt="">
</div>
<div class="card" data-animal="chick">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/chick.png" alt="">
</div>
<div class="card" data-animal="chick">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/chick.png" alt="">
</div>
<div class="card" data-animal="cow">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/cow.png" alt="">
</div>
<div class="card" data-animal="cow">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/cow.png" alt="">
</div>
<div class="card" data-animal="dog">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/dog.png" alt="">
</div>
<div class="card" data-animal="dog">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/dog.png" alt="">
</div>
<div class="card" data-animal="duck">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/duck.png" alt="">
</div>
<div class="card" data-animal="duck">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/duck.png" alt="">
</div>
<div class="card" data-animal="elephant">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/elephant.png" alt="">
</div>
<div class="card" data-animal="elephant">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/elephant.png" alt="">
</div>
<div class="card" data-animal="frog">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/frog.png" alt="">
</div>
<div class="card" data-animal="frog">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/frog.png" alt="">
</div>
<div class="card" data-animal="lion">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/lion.png" alt="">
</div>
<div class="card" data-animal="lion">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/lion.png" alt="">
</div>
<div class="card" data-animal="mouse">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/mouse.png" alt="">
</div>
<div class="card" data-animal="mouse">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/mouse.png" alt="">
</div>
<div class="card" data-animal="owl">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/owl.png" alt="">
</div>
<div class="card" data-animal="owl">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/owl.png" alt="">
</div>
<div class="card" data-animal="pig">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/pig.png" alt="">
</div>
<div class="card" data-animal="pig">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/pig.png" alt="">
</div>
<div class="card" data-animal="sheep">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/sheep.png" alt="">
</div>
<div class="card" data-animal="sheep">
<img class="front" src="./elseimage/front.png" alt="">
<img class="back" src="./animalimage/sheep.png" alt="">
</div>
</section>
<script src="./memo.js"></script>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
background: #b2cc4a;
}
.memoryGame {
width: 820px;
height: 580px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.card {
width: calc(16.666% - 10px);
height: calc(25% - 10px);
margin: 2px;
position: relative;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
transform: scale(1);
transform-style: preserve-3d;
transition: transform 0.5s;
}
.back,
.front {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: rgba(255, 255, 255, 1);
}
.card:active {
transform: scale(0.9);
transition: transform 0.2s;
}
.card.flip {
transform: rotateY(180deg);
}
.back {
transform: rotateY(180deg);
}
const cards = document.querySelectorAll(".card");
let hasFlippedCard = false; //反転したかどうかの変数
let first, second;
let lockBoard = false; //動かなくするための変数
//反転させる関数
function flipCard() {
if (lockBoard) return;
if (this === first) return;
this.classList.add("flip");
if (!hasFlippedCard) {
hasFlippedCard = true;
first = this;
return;
}
second = this;
checkForMatch();
}
//二つのカードが同じかどうか判定する
function checkForMatch() {
let isMatch = first.dataset.animal === second.dataset.animal;
isMatch ? disableCards() : unflipCards();
}
//クリックイベントを無くす
function disableCards() {
first.removeEventListener("click", flipCard);
second.removeEventListener("click", flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
//タイマーセット
setTimeout(() => {
first.classList.remove("flip");
second.classList.remove("flip");
resetBoard();
}, 1500);
}
//リセットする
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[first, second] = [null, null];
}
(function shuffle() {
cards.forEach((card) => {
let newPosition = Math.floor(Math.random() * 24);
card.style.order = newPosition;
});
})();
//cardにクリックイベントを追加
cards.forEach((card) => card.addEventListener("click", flipCard));
0 likes
