-2
どのように私は元の位置に戻って一致しなかったカードの両方に戻ることができるか知りたいです。 マッチがある場合は、おめでとうございます。それ以外の場合はもう一度やり直してください。しかし、2枚のカードを元の位置に戻したいと思います。 カードイメージはここにありません。誰かがこれを助けることができますか？ どのようにして一致しなかったカードの元の位置に戻すことができるかを知りたい。 マッチがある場合は、おめでとうございます。それ以外の場合はもう一度やり直してください。しかし、2枚のカードを元の位置に戻したいと思います。 カードイメージはここにありません。誰かがこれを助けることができますか？今カードを元の位置に戻すにはどうしたらいいですか？
// HOW TO RESTART EVERYTHING WITH TIMEOUT 2s AFTER WINNING OR LOOSING?
//HOW TO BACKFLIP BOTH CARDS IF WRONG?
//GLOBAL VAR
const box = document.getElementsByClassName('box')[0];
var cards = [{
name: 'queen',
clase: 'diamonds',
pic: 'images/queen-of-diamonds.png'
},
{
name: 'queen',
clase: 'hearts',
pic: 'images/queen-of-hearts.png'
},
{
name: 'king',
clase: 'diamonds',
pic: 'images/king-of-diamonds.png'
},
{
name: 'king',
clase: 'hearts',
pic: 'images/king-of-hearts.png'
}
];
function createBoard() {
for (var i = 0; i < cards.length; i++) {
var photo = document.createElement('img');
// console.log(foto);
photo.setAttribute('src', 'images/back.png');
photo.setAttribute('data-id', i);
box.appendChild(photo);
photo.style.paddingLeft = '20px';
photo.style.marginTop = '20px';
photo.style.height = '40%';
photo.style.width = '15%';
photo.style.borderRadius = '3%';
photo.addEventListener('click', function flipcard() {
var cardId = this.getAttribute('data-id');
console.log(cardId + ' is my card id');
var myThis = this; // I want to export THIS cause i cannot access from the other function
cardsInPlay.push(cards[cardId].name);
this.setAttribute('src', cards[cardId].pic);
// console.log(this);
if (cardsInPlay.length === 2) {
checkForMatch(myThis, cardId, photo);
}
});
}
}
createBoard()
var cardsInPlay = [];
//2
function checkForMatch(myThis, cardId, photo) { // match cards dont turn back
if (cardsInPlay[0] === cardsInPlay[1]) {
alert('CONGRATS!!! YOU FOUND A MATCH');
} else {
alert('SORRY TRY AGAIN');
myThis.setAttribute('src', 'images/back.png');
console.log(myThis);
}
}.box {
background-color: white;
width: 860px;
margin: 50px auto;
/*background-color: black;*/
text-align: center;
background-color: inherit;
}
body {
background-color: #0caab6;
text-align: center;
margin-top: 50px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>CARDS</title>
</head>
<body>
<header>
<h1>PLAY GAME</h1>
</header>
<div class="box">
</div>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
もう1つ質問があります。しかし、myThis私は別の機能に渡すために店舗、最後のカードをクリックしただけではなく、両方を印刷しますか？ – fran