演示网站 图片消除小游戏
编写代码
</style>
<body>
<div class="page_mengceng"></div>
<div class="card_border"></div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var ary=[0,1,2,3,4,5,6,7];
ary.push(...ary);
var num=ary.length;
var time=ary.length;
var DomAry=[]
var dobleAry_index=[];
var dobleAry_Num=[];
(function(){
for(var j=0;j<time;j++){
var random=Math.floor(Math.random()*num);
for(var i=0;i<ary.length;i++){
if(random==i){
DomAry.push(ary[i]);
$(".card_border").append("<div class='card'><div class='card_IndexNum'>"+ary[i]+"</div><img src='images/"+ary[i]+".png' class='card_img'><img src='images/f.png' class='card_backImg'></div>")
ary.splice(i,1);
num--
}
}
}
})()
var el=document.getElementsByClassName("card_backImg");
for(var i=0;i<el.length;i++){
var a=el[i];
a.index=i;
a.onclick=function() {
$(this).removeClass('card_backImg_Unactive');
$(this).addClass('card_backImg_active');
dobleAry_Num.push($(this).siblings(".card_IndexNum").html())
dobleAry_index.push($(this).parent().index())
if(dobleAry_index.length==2){
if(dobleAry_Num[0]==dobleAry_Num[1]){
dobleAry_Num.length=0
dobleAry_index.length=0
}else{
$(".page_mengceng").show();
setTimeout(function(){
$(".page_mengceng").hide();
$(".card").eq(dobleAry_index[0]).children(".card_backImg").addClass('card_backImg_Unactive')
$(".card").eq(dobleAry_index[1]).children(".card_backImg").addClass('card_backImg_Unactive')
dobleAry_Num.length=0
dobleAry_index.length=0
},500)
}
}
};
}
</script>
<div style="text-align:center;">
<a href="javascript:location.reload();">重新开始</a>
</div>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
