<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
<title>Playing Twins Match-Up</title>
<script type="text/javascript" src="http://app.46465.com/html5/qw/jquery.min.js"></script>
<script type="text/javascript">
var dataForWeixin = {
appId: "gh_ff79a97cd7f3",
TLImg: "http://app.46465.com/html5/ddb/logo.jpg",
url: "http://app.46465.com/html5/ddb/",
title: "Classic game <Twins Match>, please share your friends! Circle friends wechat!",
desc: "please share your friends! Circle friends wechat!"
};
var onBridgeReady = function(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){
var infos = $("#infos").text();
WeixinJSBridge.invoke('sendAppMessage', {
"appid": dataForWeixin.appId,
"img_url": dataForWeixin.TLImg,
"img_width": "120",
"img_height": "120",
"link": dataForWeixin.url + '?f=wx_hy_bb',
"title": infos + dataForWeixin.title,
"desc": dataForWeixin.desc
});
setTimeout(function () {location.href = "http://app.46465.com/html5/ddb/";}, 1500);
});
WeixinJSBridge.on('menu:share:timeline', function(argv){
var infos = $("#infos").text();
WeixinJSBridge.invoke('shareTimeline', {
"appid": dataForWeixin.appId,
"img_url":dataForWeixin.TLImg,
"img_width": "120",
"img_height": "120",
"link": dataForWeixin.url + '?f=wx_pyq_bb',
"title": infos + dataForWeixin.title,
"desc": dataForWeixin.desc
});
setTimeout(function () {location.href = "http://app.46465.com/html5/ddb/";}, 1500);
});
};
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
</script>
<link href='http://app.46465.com/css' rel='stylesheet' type='text/css'>
<style>
body {
text-align: center;
background: #FFEDD9 url(images/bg.jpg) repeat 0 0;
font-family: 'Luckiest Guy', cursive;
color: #48321D;
}
h2 {
color: #E61D25;
font-size: 36px;
margin: 15px 0;
}
p {
display: block;
font-size: 16px;
margin: 0 0 15px;
}
#game {
background: #FFCEB8;
width: 300px;
height: 320px;
margin: 0 auto 10px;
padding: 10px;
display: -webkit-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 4px #CC1220;
-webkit-box-shadow: 0 0 4px #CC1220;
-moz-box-shadow: 0 0 4px #CC1220;
}
#time {
clear: both;
position: relative;
}
#cards {
position: relative;
width: 300px;
height: 345px;
}
.card {
-webkit-perspective: 600;
width: 60px;
height: 90px;
position: absolute;
-moz-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
}
.face {
border-radius: 10px;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition-property: opacity, transform, box-shadow;
-webkit-transition-duration: .3s;
-webkit-backface-visibility: hidden;
}
.front {
background: #999 url(images/deck.png) 0 -180px;
z-index: 10;
}
.back {
background: #efefef url(images/deck.png) 0 -180px;
-webkit-transform: rotate3d(0,1,0,-180deg);
z-index: 8;
}
.card:hover .face, .card-flipped .face {
-webkit-box-shadow: 0 0 10px #CC1220;
}
.card-flipped .front {
-webkit-transform: rotate3d(0,1,0,180deg);
z-index: 8;
}
.card-flipped .back {
-webkit-transform: rotate3d(0,1,0,0deg);
z-index: 10;
}
.card-removed {
opacity: 0;
}
.cardAQ {background-position: 0 0;}
.cardAK {background-position: -60px 0;}
.cardCK {background-position: -120px 0;}
.cardBQ {background-position: -180px 0;}
.cardCQ {background-position: 0 -90px;}
.cardBK {background-position: -60px -90px;}
.cardDQ {background-position: -120px -90px;}
.cardDK {background-position: -180px -90px;}
#game_wrapper {
position: relative;
margin: 0 auto;
width: 320px;
}
#timer {
background: url(images/message.png) no-repeat left top;
height: 95px;
width: 300px;
position: relative;
}
#timer p {
margin: 0 0 10px;
left: 137px;
top: 47px;
position: absolute;
}
.button a {
background: url(images/btn.png) no-repeat 0 0;
color: #fff;
display: block;
margin: 0 auto;
height: 30px;
padding: 3px;
text-align: center;
text-decoration: none;
width: 145px;
}
.button a:hover {
color: #fff;
text-decoration: none;
}
#popup {
margin: 0 auto;
position:absolute;
top: 180px;
width: 100%;
z-index: 10;
}
#popup.hide {
display: none;
}
#popup.show {
display: block;
}
#popup p {
font-size: 18px;
margin: 0 0 15px;
}
#popup .score {
color: #52B910;
font-size: 24px;
}
#notice {
background: none repeat scroll 0 0 #F9E48F;
border: 1px solid #F0D567;
color: #A26C0D;
font-size: 1.2em;
line-height: 1.64;
margin: 10px 0 0;
padding: 10px;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 4px #CC1220;
-webkit-box-shadow: 0 0 4px #CC1220;
-moz-box-shadow: 0 0 4px #CC1220;
}
#notice p {
margin: 0;
}
.other_game {
background: #28AAA9;
margin: 0 auto;
overflow: hidden;
padding: 10px;
text-align: left;
width: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.other_game p {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
margin: 0 0 10px;
}
.other_game ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.other_game ul li {
margin-top: 10px;
}
.other_game ul li:first-child {
margin: 0;
}
.other_game ul li img {
float: left;
margin-right: 10px;
}
.other_game a {
display:block;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
overflow: hidden;
text-decoration: none;
}
.other_game a span {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
</style>
<!-- Google analytics, ignore this -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18035087-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="http://app.46465.com/html5/qw/jquery.min.js"></script>
<script>
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 65);
}, 0);
});
//logic
var matchingGame = {};
matchingGame.deck = [
'cardAK', 'cardAK',
'cardAQ', 'cardAQ',
'cardCQ', 'cardCQ',
'cardBK', 'cardBK',
'cardBQ', 'cardBQ',
'cardDK', 'cardDK',
];
$(function(){
if (!$.browser.webkit) {
alert( "Your current browser doesn't support this game. Please play this game on either Safari or Google Chrome!" );
$("#game_wrappe