半期考html5小游戏制作

<!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 type="text/javascript">
var now=-1;
var last=-1;
var count=0;
var x=0;
var a=100;
var n;
n=(row*col)/2;
var row=3,col=4;
var isUsed=new Array;
var myArray=new Array(13);
function mySort()
{
    return Math.random()>.5;
}
function init(row, col)
{

    n=(row*col)/2;
    for(var k=0;k<n;k++)
    {
        myArray[k]=( Math.round( Math.random()*18 )+1);
        myArray[k+n]=myArray[k];
    }    
    for(var k=0;k<2*n;k++)
    {
        isUsed[k]=false;
    }
    myArray.sort(mySort);
    var str='<table name="myT" border="0" width="400"  height="400">';
    for(var i=1;i<=row;i++)
    {
        str+="<tr>";
        for(var j=0;j<col;j++)
        {    
            str+="<td onclick='judge("+ ((i-1)*col +j )+");'>"
            str +="<img id='img_"+ ((i-1)*col +j )+"' src='photo/image0.gif'/>"    
            str+="</td>";
        }
        str+="</tr>";
    }
    str+= "</table>"
    document.getElementById("mt").innerHTML=str;
}
function createTable()
{
    var row=document.getElementById("t1").value;
    var col=document.getElementById("t2").value;
    init(row,col);
}
function judge(temp)
{
    n=(row*col)/2;
    if(isUsed[temp]) return;
    isUsed[temp]=true;
    last=now;
    now=temp;
    var currImg=document.getElementById("img_"+temp);
    currImg.src="photo/image"+myArray[temp]+".gif";
        if(last>=0)
        {
            if(myArray[now]==myArray[last])
            {
                last=-1;
                now=-1;
                count++;
                    if(count==n)
                    {
                        ++x;
                        if(x>2)
                        {
                            alert("游戏结束");
                            var str="您的游戏得分是："+a;
                            document.getElementById("mt").innerHTML=str;    
                        }
                       else{
                            count=0;
            
                            alert("游戏胜利，进入下一关");
                            return init(++row,++col);
                        }                                
                    }
            }
            else
            {
                a--;
                currImg=document.getElementById("img_"+last);
                currImg.src="photo/image0.gif";
                isUsed[last]=false;
            }    
    }    
}


</script>

</head>

<body>
<body id="mt" style="background:url(photo/10.jpg)">
<h1> <div id="mt">卡牌记忆游戏</div></h1>
<input type="text" value="3" id="t1"/>
<input type="text" value="4" id="t2"/>
<input type="button" value="开始游戏"  onClick="createTable();"/>
</body>
</html>
posted on 2016-04-21 18:34 说变就变阅读(144) 评论(0) 收藏举报