我正在构建一个内存游戏,但我不知道如何在你选择两张牌时翻转我的牌?目前我的卡片是静态的,当你点击两个时,我会看到一个警告框,上面写着“你有匹配”或“抱歉没有匹配”。
如何翻转卡片?
我应该把卡片的图像放回哪里?我试着把它放进去 我的主要 Javascript 文件但它不工作?
有什么想法吗?
//var cardOne = "queen";
//var cardTwo = "king";
//var cardThree = "queen";
//var cardFour = "king";
//console.log("hello");
//f (cardTwo === cardFour) {alert ("You found a match!")}
//else {alert ("Sorry, try again")}
var gameBoard = document.getElementById("game-board");
var cards = ["queen", "queen", "king", "king"];
var cardInPlay = [];
var createBoard = function () {
for (var i = 0; i < cards.length; i++) {
var newCard = document.createElement('div');
newCard.className = "card";
newCard.setAttribute('data-card', cards[i]);
newCard.addEventListener('click', isTwoCards);
gameBoard.appendChild(newCard);
}
};
function isTwoCards() {
cardInPlay.push(this.getAttribute('data-card'));
if (cardInPlay.length === 2) {
isMatch(cardInPlay);
cardInPlay = [];
}
};
var isMatch = function(array){
(array[0] === array[1]) ? alert("You found a match!") : alert("Sorry, try again.");
};
createBoard();
最佳答案
试试这个:
cover cover
card card
将封面的宽度动画化为0,同时将卡片的宽度动画化为它们的宽度。
或者使用 jquery,更简单: https://nnattawat.github.io/flip/
关于javascript - 在内存游戏中翻牌,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38391024/