学习跟着视频做的，勿喷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
h3{
text-align: center;
}
td{
background: #FA8072;
width: 70px;
height: 70px;
text-align: center;
}
table{
margin: auto;
border: palevioletred 3px solid;
}
span{
background: palegreen;
}
footer{
text-align: center;
}
input{
border-radius: 7px;
outline: none;
background-color: antiquewhite;
}
</style>
<body>
<header>
<h3>配对游戏</h3>
</header>
<hr style="border: #FA8072 2px solid;"/>
<br />
<section>
<table>
<script type="text/javascript">
var rows=6,cols=6
for(var i=0;i<rows;i++){
tab='<tr>'
for(var j=0;j<cols;j++){
var sid='img'+((i*cols)+j)
tab+='<td id="'+sid+'" onclick="game('+((i*cols)+j)+')"></td>'
}
tab+='</tr>'
document.write(tab)
}
</script>
</table>
</section>
<br>
<footer>
用时:<span id="gametime"></span>     
<input type="button" id="btn" value="开始游戏" onclick="init()"/>
</footer>
<script type="text/javascript">
var dan=cols*rows//表格单元格数量
var map=[]//存储单元格里的内容
var user=[]//记录单元格是否可以翻开的状态
var times=0;//时间
var newgame;
var firstIndex=0
var secondIndex=0
//点击第一张，第二张
var ctr=0
var finished
function $(x){
return document.getElementById(x)
}
for(var i=0;i<dan/2;i++){
map[i]=i;
map[dan/2+i]=i
}
function init(){//按钮函数，点按钮事件之后才会触发单元格事件
for(var i=0;i<dan;i++){
$('img'+i).innerHTML=''
user[i]=0;//是否显示图片，0显示背面
}//id赋值
map.sort(function(){
return Math.random()-0.5
})//数组排序
times=0//计时器归0
$('gametime').innerHTML=times+'秒';
newgame=true;//标记新的开局
}
function game(x){//开始游戏函数
if(newgame){
start()
newgame=false;
}
$('img'+x).innerHTML=map[x]
if(ctr==0){
ctr++
firstIndex=x//记录第一张图片索引
}else{
if(firstIndex!=x){
secondIndex=x//记录第二张图片索引
ctr=0;
check()
}
}
}
function start(){//计时器函数
times+=1
$('gametime').innerHTML=times+'秒';
setTimeout('start()',1000)//每一秒后调用自己
}
function check(){
if(map[firstIndex]==map[secondIndex]){
finished++;
user[firstIndex]=1;
user[secondIndex]=1
//默认显示了出来
ctr=0
}else if(user[firstIndex]==0){
$('img'+firstIndex).innerHTML=' ';
firstIndex=secondIndex;
secondIndex=0
ctr++//标记点击了一张
}
}
</script>
</body>
</html>