javascript基礎-翻牌遊戲

時間 2020-04-24
原文原文鏈接
<!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/p_w_picpath"+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/p_w_picpath0.jpg";
			document.getElementById("img"+oneid).src="img/p_w_picpath0.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/p_w_picpath0.jpg" id="img0" onclick="fanpai(0)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img1" onclick="fanpai(1)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img2" onclick="fanpai(2)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img3" onclick="fanpai(3)"/></td>
        </tr>
        <tr>
        <td><img src="img/p_w_picpath0.jpg" id="img4" onclick="fanpai(4)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img5" onclick="fanpai(5)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img6" onclick="fanpai(6)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img7" onclick="fanpai(7)"/></td>
        </tr>
        <tr>
        <td><img src="img/p_w_picpath0.jpg" id="img8" onclick="fanpai(8)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img9" onclick="fanpai(9)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img10" onclick="fanpai(10)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img11" onclick="fanpai(11)"/></td>
        </tr>
        <tr>
        <td><img src="img/p_w_picpath0.jpg" id="img12" onclick="fanpai(12)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img13" onclick="fanpai(13)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img14" onclick="fanpai(14)"/></td>
        <td><img src="img/p_w_picpath0.jpg" id="img15" onclick="fanpai(15)"/></td>
        </tr>
        </table>
    </center>
</body>
<script language="javascript">
	xipai();
</script>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。