在记忆游戏中翻牌
Flipping cards in a memory game
本文关键字:记忆游戏 更新时间:2023-09-26
我正在构建一个记忆游戏,当你选择两个时,我无法弄清楚如何翻转我的牌?目前我的卡片是静态的,当您单击两个时,我有一个警告框,上面写着"您有匹配项"或"抱歉没有匹配项"。
-
如何翻转我的卡?
-
我应该把卡片的图像放在哪里?我试着把它放进去我的主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/
相关文章:
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 如何有效地将游戏数据存储在URL查询字符串中
- Javascript游戏输入失去焦点
- 如何在p5.js中管理多智力竞赛游戏的多个屏幕
- setInterval游戏循环的范围问题
- 为网络游戏制作动画
- 重置游戏和获胜者问题
- 帆布游戏的滞后运动
- Javascript单独的游戏窗口
- Javascript猜测游戏-计数器不工作
- 根据尝试次数、花费的时间和剩余的卡片计算“记忆游戏”的分数
- 在记忆游戏中翻转砖块
- 简单的记忆游戏;t更新其状态.糟糕的游戏循环
- 在记忆游戏中点击后从0开始计时
- 记忆游戏-如何得到两个卡图像显示之前的警报弹出
- jQuery记忆技巧游戏setTimeout()问题
- 记忆游戏用角
- 比较记忆游戏中的元素
- 在记忆游戏中翻牌
- 你好,我正在做一个记忆游戏与javascript