トランプ画像を使って神経衰弱を作ってみよう。
●以下をダウンロード


●imagesフォルダを作成しその中に画像を格納する。
●imagesフォルダと同じ階層にindex.htmlを以下のように作成する。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>神経衰弱</title>
<style>
body{
	background-color:lightgreen;
}
table{
	width:1356px;
	margin:10px auto;
}
td.card{
	display:inline-block;
	width:100px;
	height:150px;
	margin:1px;
	background-size:contain;
}
td.card.back{
	background-image:url('images/z01.gif') !important;
}
#time{
text-align:center;
font-size:30px;
}
.fadeout{
	animation:fadeOut 1.5s ease-in-out;
	animation-fill-mode:forwards;
}
@keyframes fadeOut{
	0%{
		opacity:1;

	}
	100%{
		opacity:0;
		display:none;
	}
}
</style>
</head>
<body>
<p id="time">0</p>
<table id="table"></table>
<script>
'use strict';
window.onload = function() {
	//コンストラクタ
	function Card(suit, num) {
		this.suit = suit;
		this.num = num;
		this.front;
		this.setFront = function() {
			this.front = this.suit + (this.num < 10 ? '0' : '')
					+ this.num + '.gif';
		}
	}
	//カード生成
	var cards = [];
	var suits = [ 's', 'd', 'h', 'c' ];
	for (var i = 0; i < suits.length; i++) {
		for (var j = 1; j <= 13; j++) {
			var card = new Card(suits[i], j);
			card.setFront();
			cards.push(card);
		}
	}
	//カードシャッフル
	function shuffle(cards) {
		var i = cards.length;
		while (i) {
			var index = Math.floor(Math.random() * i--);
			var temp = cards[i];
			cards[i] = cards[index];
			cards[index] = temp;
		}
	}
	shuffle(cards);
	//テーブル生成
	var table = document.getElementById('table');
	for (var i = 0; i < suits.length; i++) {
		var tr = document.createElement('tr');
		for (var j = 0; j < 13; j++) {
			var td = document.createElement('td');
			var tempCard = cards[i * 13 + j];
			td.classList.add("card", "back");
			td.style.backgroundImage = 'url(images/' + tempCard.front+ ')';
			td.num = tempCard.num;
			td.onclick = flip;
			tr.appendChild(td);
		}
		table.appendChild(tr);
	}
	var firstTd = null;
	var score = 0;
	var flipTimerId = null;
	var gameTimerId = null;

	function flip(eve) {
		if (gameTimerId == null) {
			countStart();
		}
		var td = eve.target;
		//td.classList.toggle("back");
		if (!td.classList.contains("back") || flipTimerId) {
			return;
		}
		td.classList.remove("back");
		if (firstTd == null) {
			firstTd = td;
		} else {
			if (firstTd.num == td.num) {
				score += 2;
				firstTd.classList.add('fadeout');
				td.classList.add('fadeout');
				if (score == 52) {
					clearInterval(gameTimerId);
				}
				firstTd = null;
			} else {
				flipTimerId = setTimeout(function() {
					firstTd.classList.add("back");
					td.classList.add("back");
					firstTd = null;
					flipTimerId = null;
				}, 1200);
			}
		}
	}
	//時間計測
	function countStart() {
		var time = document.getElementById("time");
		var sec = 0;
		gameTimerId = setInterval(function() {
			time.textContent = ++sec;
		}, 1000);
	}
}
</script>

</body>
</html>

参考リンク

【CSS3】@keyframes と animation 関連のまとめ