JavaScript4x4网格内存游戏
创建一个版本的“经典”记忆游戏（又名专注）。应该有一个4 x 4的卡片网格，正面朝下放置在用户面前。单击时，显示卡的正面。当第二张牌被轻触时，也要露出该牌的正面。如果两张牌匹配，则将其移出游戏。如果没有，则将其面朝下，并允许用户再选择两个 问题： 我如何让卡片翻转？ 在他们检查卡是否匹配后，我如何将其从游戏中移除？ 如果错误，请使其面朝下？JavaScript4x4网格内存游戏,javascript,html,css,Javascript,Html,Css,创建一个版本的“经典”记忆游戏（又名专注）。应该有一个4 x 4的卡片网格，正面朝下放置在用户面前。单击时，显示卡的正面。当第二张牌被轻触时，也要露出该牌的正面。如果两张牌匹配，则将其移出游戏。如果没有，则将其面朝下，并允许用户再选择两个 问题： 我如何让卡片翻转？ 在他们检查卡是否匹配后，我如何将其从游戏中移除？ 如果错误，请使其面朝下？ JavaScript Code: var card = document.querySelectorAll(".card"); /
JavaScript Code:
var card = document.querySelectorAll(".card");
//loop through cards put same listener on e
for(var i = 0; i < card.length; i++) {
card[i].addEventListener('click', flipCard);
}
//remove card
function flipCard(event){
var select1 = document.getElementsByTagName("DIV")[0].className;
var select2 = "";
}
Html code:
<html>
<head><title> Memory</title>
</head>
<body>
<div class="card myCard" >Flip</div>
<div class="card myCard" >Flip</div>
<div class="card m">Flip</div>
<div class="card c">Flip</div>
<div class="card m" >Flip</div>
<div class="card c" >Flip</div>
<div class="card one" >Flip</div>
<div class="card one">Flip</div>
<div class="card two" >Flip</div>
<div class="card two" >Flip</div>
<div class="card three">Flip</div>
<div class="card three">Flip</div>
<div class="card four">Flip</div>
<div class="card four" >Flip</div>
<div class="card five " >Flip</div>
<div class="card five" >Flip</div>
<link href= "style.css" rel="stylesheet" type="text/css"/>
<style>
</style>
<!-- -->
<script src="app.js"></script>
</body>
</html>
Css:
.card{
float: left;
width: 100px;
height; 150px;
text-align: center;
background-color: rebeccapurple;
padding: 10px;
color: #fff;
cursor: pointer;
}
JavaScript代码：
var card=document.queryselectoral（“.card”）；
//循环卡片将同一个侦听器放在e上
对于（变量i=0；i
<html>
<head><title> Memory</title>
</head>
<body>
<link href= "style.css" rel="stylesheet" type="text/css"/>
<style>
.card{
float: left;
width: 100px;
height; 150px;
text-align: center;
background-color: rebeccapurple;
padding: 10px;
color: #fff;
cursor: pointer;
}
</style>
<div class="card myCard" id = "cards">Flip</div>
<script>
document.getElementById('cards').onclick = function() {
if(document.getElementById('cards').innerHTML === 'Flipped'){
document.getElementById('cards').innerHTML = 'Flip';
}
else{
document.getElementById('cards').innerHTML = 'Flipped';
}
}
</script>
</body>
</html>
记忆
.卡片{
浮动：左；
宽度：100px；
高度；150px；
文本对齐：居中；
背景色：丽贝卡紫；
填充：10px；
颜色：#fff；
光标：指针；
}
轻弹
document.getElementById（'cards'）。onclick=function（）{
if（document.getElementById（'cards'）.innerHTML=='Flipped'）{
document.getElementById（'cards'）.innerHTML='Flip'；
}
否则{
document.getElementById（'cards'）.innerHTML='Flipped'；
}
}