<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Image Match Game</title>
<script>
var dest_url = 'http://www.edudemic.com/wp-content/uploads/2012/03/a_winner_is_you_1024.jpg';
// --------------------------------------------------
window.addEventListener('load', function (event) {
var imgs = document.getElementById('match-holder').getElementsByTagName('img'),
last, i;
function handle(event) {
var img = event.target;
if (!last) {
last = img;
} else if (last.className === img.className && last.src !== img.src) {
img.parentNode.className = 'section hidden';
if (document.getElementsByClassName('shown').length === 0) {
location.href = dest_url;
}
} else {
last = null;
}
}
for (i = 0; i < imgs.length; i += 1) {
imgs[i].addEventListener('click', handle, false);
}
}, false);
</script>
<style type="text/css">
body {
background-color: #EEEEEE;
margin: 0;
}
#match-holder {
margin: 100px auto;
width: 50%;
}
.section {
margin: 50px auto;
}
.shown {
display: block;
}
.hidden {
display: none;
}
.section img {
max-width: 320px;
max-height: 180px;
}
.section img:nth-child(2) {
float: right;
}
</style>
</head>
<body>
<div id="match-holder">
<div class="section shown">
<img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
<img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
</div>
<div class="section shown">
<img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
<img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
</div>
<div>
</body>
</html>