レベルに合わせて、配列を作成し、CSSでflipし、judgeして、正しければ次のレベルに移行します。
-reference
Emmet Toggle Comment: ctr + shift + /
CSS3 backface-visibility Property: The backface-visibility property defines whether or not an element should be visible when not facing the screen.This property is useful when an element is rotated, and you do not want to see its backside.
first-child:is used to select the specified selector, only if it is the first child of its parent.
.textContent:ノードとその子孫のテキスト内容を取得、または設定
.children:Get the children of each element in the set of matched elements, optionally filtered by a selector.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get same number</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background: #00d4f0;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;
}
#stage{
margin: 80px auto 30px;
width: 600px;
}
.card-container {
margin: 0 10px 20px 0;
cursor: pointer;
display: inline-block;
width: 50px;
height: 60px;
font-size: 24px;
font-weight: bold;
line-height: 60px;
position: relative;
perspective: 100px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform .8s;
}
.card.open {
transform: rotateY(180deg);
}
.card-back, .card-front {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
position: absolute;
backface-visibility: hidden;
}
.card-back{
background: #03a9f4;
}
.card-front{
background: #fff;
color: #333;
transform: rotateY(180deg);
}
#btn {
margin: 0 auto;
width: 200px;
padding: 10px;
background: #0af;
border-radius: 5px;
cursor: pointer;
opacity: 0;
transition: opacity .5s;
}
#btn.visible{
opacity: 1;
}
</style>
</head>
<body>
<div id="stage">
</div>
<div id="btn">Next Stage?</div>
<script>
(function(){
var cards = [],
level = 2,
flipCount = 0,
correctCount = 0,
firstCard = null,
secondCard = null;
btn,
stage;
btn = document.getElementById('btn');
stage = document.getElementById('stage');
init();
function init(){
correctCount = 0;
btn.className = '';
while(stage.firstChild) stage.removeChild(stage.firstChild);
for (var i = 1; i <= level; i++){
cards[cards.length] = createCard(i);
cards[cards.length] = createCard(i);
}
while (cards.length){
var pos = Math.floor(Math.random() * cards.length);
stage.appendChild(cards.splice(pos, 1)[0]);
}
}
function createCard(num){
var inner,
card,
container;
inner = '<div class="card-back">?</div><div class="card-front">*</div>';
card = document.createElement('div');
card.className = 'card';
card.innerHTML = inner.replace('*', num);
container = document.createElement('div');
container.className = 'card-container';
container.appendChild(card);
card.addEventListener('click', function(){
flipCard(this);
});
return container;
}
function flipCard(card){
if (firstCard !== null && secondCard !== null){
return;
}
if (card.className.indexOf('open') === -1){
card.className = 'card open';
} else {
return;
}
flipCount++;
if (flipCount % 2 === 1) {
firstCard = card;
} else {
secondCard = card;
setTimeout(function(){
judge();
}, 900);
}
}
function judge(){
if (firstCard.children[1].textContent === secondCard.children[1].textContent){
correctCount++;
//console.log(correctCount);
if (correctCount === level){
btn.className = 'visible';
}
} else {
firstCard.className = 'card';
secondCard.className = 'card';
}
firstCard = null;
secondCard = null;
}
btn.addEventListener('click', function(){
level++;
init();
});
})();
</script>
</body>
</html>
