test.html
<!DOCTYPE html>
<html>
<head>
<title>カードめくり</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
</head>
<body>
<script src="test.js"></script>
<center>
<h1 align="center" class="title">カードめくり</h1>
<button onclick="shaffule()" class="button">start</button>
<button onclick="reset()" class="button">reset</button>
</center>
<div class="wrapper">
<div id="container" align="center"></div>
</div>
</body>
</html>
test.js
var cards=[]; var result=[]; //cardsをシャッフルした状態にします function shaffule(){ var prizeList=[]; for(var i=0;i<1;i++){ prizeList.push(1); } for(var i=0;i<1;i++){ prizeList.push(2); } for(var i=0;i<1;i++){ prizeList.push(3); } for(var i=0;i<17;i++){ prizeList.push(0); } cards=[]; for(var i =0;i<20;i++){ var rand=Math.floor(Math.random()*prizeList.length); var cardId=("c"+(i+1)) var randPrize=prizeList[rand]; cards.push({prize:randPrize,isReversed:false,id:cardId,class:"card"}); prizeList.splice(rand,1); } draw(cards); } function draw(cards){ //カウントを0にする count=0; //画面のカードを消す document.getElementById("container").innerHTML=""; //cardsをもとにして画面にカードを配置する for(var i =0;i<cards.length;i++){ var card = cards[i]; switch(card.prize){ case 1: document.getElementById("container").innerHTML+= "<div id=\""+card.id+"\" onclick=\"turnover(id)\" class=\"inner reversed\"><div class=\"card\"></div><div class=\"first\"></div></div>"; break; case 2: document.getElementById("container").innerHTML+= "<div id=\""+card.id+"\" onclick=\"turnover(id)\" class=\"inner reversed\"><div class=\"card\"></div><div class=\"second\"></div></div>"; break; case 3: document.getElementById("container").innerHTML+= "<div id=\""+card.id+"\" onclick=\"turnover(id)\" class=\"inner reversed\"><div class=\"card\"></div><div class=\"third\"></div></div>"; break; default: document.getElementById("container").innerHTML+= "<div id=\""+card.id+"\" onclick=\"turnover(id)\" class=\"inner reversed\"><div class=\"card\"></div><div class=\"miss\"></div></div>"; break; } } } /** めくるフラグが有効なカードデータを見つけて、アニメーションを実行します。*/ function reverseDraw(cards){ for(var i = 0;i < cards.length; i++) { var card = cards[i]; if(card.isReversed){ document.getElementById(card.id).style.transform = "rotateY(180deg)"; document.getElementById(card.id).style.float = "left"; } } return; } var count; function turnover(id){ //回数制限をする if(count<3){ //trueに変える for(var i =0;i<cards.length;i++){ var card = cards[i]; if(card.id==id && card.isReversed==false){ card.isReversed=true; card.className='reversed'; count++; result.push(card.prize); } } } else{ } //drawを呼び出す reverseDraw(cards); } function reset(){ //すべてfalseに変える for(var i =0;i<cards.length;i++){ var card = cards[i]; card.className=''; for(var i = 0;i < cards.length; i++) { var card = cards[i]; if(card.isReversed=true){ document.getElementById(card.id).style.transform = "rotateY(0deg)"; card.isReversed=false; } } } //drawを呼び出す setTimeout("shaffule()",500); } function count(){ document.write("残り"+count+"回です。"); }
test.css
.card{ perspective: 1000; float:left; height: 300px; width:200px; margin: 5px 5px; vertical-align: middle; background: url('z01.png'); text-align: center;
backface-visibility: hidden;
} .first{ float:left; background:url('first.png') ; transform: rotateY(180deg); } .second{ float:left; background:url('second.png') ; transform: rotateY(180deg); } .third{ float:left; background:url('third.png') ; transform: rotateY(180deg); } .miss{ float:left; background:url('miss.png') ; transform: rotateY(180deg); } .inner{ position: relative; transform-style: preserve-3d; perspective: 1000; cursor: pointer; transition: .6s; } .first,.second,.third,.miss{ float:left; position: absolute; top: 0; left: 0; width: 200px; height: 300px; margin: 5px 5px; vertical-align: middle; text-align: center; cursor: pointer; backface-visibility: hidden; } body { background: url('back.jpg'); background-size: cover; margin: 0 auto; } h1{ position:relative; margin:10px -1px; text-align:center; color:white; padding:10px; background:orange; transform: rotate(-3deg) skew(-3deg); text-shadow:1px 1px 0 black; box-shadow: 4px 4px 4px black; } .button{ width: 150px; height: 50px; font-size: xx-large; color: orange; background-color: black; }