Untitled

<!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>