JavaScript 表格小游戏

JavaScript 实现表格配对小游戏

实例描述： 当用户点击两个相同的图案或字符后配对成功，全部配对成功后游戏获胜。

案例 008 采用了大家常见的小游戏来帮助大家提高应用JS解决实际问题的能力，需要说明的是该案例在很大程度上做了简化，大家课下练习的时候可以发挥自己的想象力进一步来完善该游戏。

源码

DOCTYPE html>



演示文档-配对游戏

table{
    margin:15px auto 15px;
    background: rgba(60,180,100,0.3);
    color: blue;
    width: 500px;
    height: 500px;
}
hr{
        width: 600px;
        height: 5px;
        background: orange;
}
h2{text-align: center;}
td{
    text-align: center;
    background: rgba(160,80,10,0.1);
    width: 100px;
    height: 100px;
}
footer{
    margin:0px auto;
        text-align: center;
        background: rgba(0,100,100,0.2);
        padding: 10px;
        width: 500px;
}




配对游戏


    
        var cols=5,rows=4;
        for(var i=0;i'
                str+=''
            }
            str+="";
            document.write(str)
        }
    



    用时：   
    



var length=cols*rows //表格单元格数目
var map=[] //存储单元格里的内容
var user=[] //存储每个单元格是否可以翻开的状态
var times=0;
var newsatrt;
var firstIndex=0,secondIndex=0;//点击第一张、第二张图片的索引
var ctr=0;
var finished;
function $(x){
        return document.getElementById(x)
}
for(var i=0;i


    
    演示文档
    
    



动态显示表格数据


    
        for(var i=0;i




var arr=new Array();
// var arr=[]等效上句

function $(x){
    return document.getElementById(x);
}

for(var i=0;i