javascript基础-翻牌游戏

最新推荐文章于 2025-04-23 08:43:57 发布

fightingcoder419

最新推荐文章于 2025-04-23 08:43:57 发布

阅读量2.7k

点赞数 3

本文链接：https://blog.csdn.net/fightingcoder419/article/details/52071496

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>找相同游戏</title>
	<script language="javascript">
		var pai=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8];
		var flag=false;
		var oneid=-1;
    	function fanpai(id){
			if(pai[id]==-1){
					return;
				}
				document.getElementById("img"+id).src="img/image"+pai[id]+".jpg";
				if(flag){//翻第2张
					if(pai[id]==pai[oneid]){
						pai[id]=-1;
						pai[oneid]=-1;
					}
					else{
						setTimeout("koupai("+id+","+oneid+")",600);
					}
					oneid=-1;
					flag=false;
				}
				else{//翻第1张
					oneid=id;
					flag=true;
				}
				checkSuccess();
		}
		//每次载入页面进行重新洗牌
		function xipai(){
			var a,b,temp;
			for(i=0;i<16;i++){
				var a=Math.floor(Math.random()*16);
				var b=Math.floor(Math.random()*16);
				temp=pai[a];
				pai[a]=pai[b];
				pai[b]=temp;
			}
		}
		//第一次与第二次不相同，扣住两张牌
		function koupai(id,oneid){
			document.getElementById("img"+id).src="img/image0.jpg";
			document.getElementById("img"+oneid).src="img/image0.jpg";
		}
		//每次翻完两张相同的后，检验是否全部成功翻开
		function checkSuccess(){
			for(var i=0;i<16;i++){
				if(pai[i]!=-1)
					return;
				}
			alert("恭喜，OK了");
			location.reload();
		}
    </script>
</head>

<body bgcolor="#0000FF">
	<center>
    <br /><br />
    <h1>找相同游戏</h1>
        <br />
    	<table>
        <tr>
        <td><img src="img/image0.jpg" id="img0" οnclick="fanpai(0)"/></td>
        <td><img src="img/image0.jpg" id="img1" οnclick="fanpai(1)"/></td>
        <td><img src="img/image0.jpg" id="img2" οnclick="fanpai(2)"/></td>
        <td><img src="img/image0.jpg" id="img3" οnclick="fanpai(3)"/></td>
        </tr>
        <tr>
        <td><img src="img/image0.jpg" id="img4" οnclick="fanpai(4)"/></td>
        <td><img src="img/image0.jpg" id="img5" οnclick="fanpai(5)"/></td>
        <td><img src="img/image0.jpg" id="img6" οnclick="fanpai(6)"/></td>
        <td><img src="img/image0.jpg" id="img7" οnclick="fanpai(7)"/></td>
        </tr>
        <tr>
        <td><img src="img/image0.jpg" id="img8" οnclick="fanpai(8)"/></td>
        <td><img src="img/image0.jpg" id="img9" οnclick="fanpai(9)"/></td>
        <td><img src="img/image0.jpg" id="img10" οnclick="fanpai(10)"/></td>
        <td><img src="img/image0.jpg" id="img11" οnclick="fanpai(11)"/></td>
        </tr>
        <tr>
        <td><img src="img/image0.jpg" id="img12" οnclick="fanpai(12)"/></td>
        <td><img src="img/image0.jpg" id="img13" οnclick="fanpai(13)"/></td>
        <td><img src="img/image0.jpg" id="img14" οnclick="fanpai(14)"/></td>
        <td><img src="img/image0.jpg" id="img15" οnclick="fanpai(15)"/></td>
        </tr>
        </table>
    </center>
</body>
<script language="javascript">
	xipai();
</script>
</html>