js实现表格配对小游戏

一、总结

一句话总结：

二、js实现表格配对

1、配对游戏案例说明

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

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

2、截图

3、代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>演示文档-配对游戏</title>
  6     <style type="text/css">
  7     table{
  8         margin:15px auto 15px; 
  9         background: rgba(60,180,100,0.3);
 10         color: blue;
 11         width: 500px;
 12         height: 500px;
 13     }
 14     hr{
 15             width: 600px;
 16             height: 5px;
 17             background: orange;
 18     }
 19     h2{text-align: center;}
 20     td{
 21         text-align: center;
 22         background: rgba(160,80,10,0.1);
 23         width: 100px;
 24         height: 100px;
 25     }
 26     footer{
 27         margin:0px auto;
 28             text-align: center;
 29             background: rgba(0,100,100,0.2);
 30             padding: 10px;
 31             width: 500px;
 32     }
 33     </style>
 34 </head>
 35 <body>
 36 <h2>配对游戏<hr></h2>
 37     <table>
 38         <script>
 39             var cols=5,rows=4;
 40             for(var i=0;i<rows;i++){
 41                 str="<tr>";
 42                 for(var j=0;j<cols;j++){
 43                     var sid="img"+((cols*i)+j)
 44                     str+='<td  id="'+sid+'" onclick="showimg('+((cols*i)+j)+')"'+'>'
 45                     str+='</td>'
 46                 }
 47                 str+="</tr>";
 48                 document.write(str)
 49             }
 50         </script>
 51     </table>
 52     <footer>
 53         用时：<span id="gameTime"></span>&nbsp&nbsp&nbsp
 54         <input type="button" value="开始游戏" onclick="init()">
 55     </footer>
 56     <script type="text/javascript">
 57         var length=cols*rows //表格单元格数目
 58         var map=[] //存储单元格里的内容
 59         var user=[] //存储每个单元格是否可以翻开的状态
 60         var times=0;
 61         var newsatrt;
 62         var firstIndex=0,secondIndex=0;//点击第一张、第二张图片的索引
 63         var ctr=0;
 64         var finished;
 65         function $(x){
 66              return document.getElementById(x)
 67         }
 68         for(var i=0;i<length/2;i++){
 69             map[i]=i;
 70             map[length/2+i]=i
 71         }
 72         // alert(map)
 73         function init(){
 74             for (var i=0;i<length;i++){
 75                 $("img"+i).innerHTML=''
 76                 user[i]=0;//是否显示图片，0为显示背面
 77             }
 78             // alert(map)
 79             map.sort(function(){return Math.random()-0.5})
 80             // alert(map)
 81             times=0; //计时器变量清零
 82             $("gameTime").innerHTML=times+'秒'
 83             newsatrt=true; //标记为新开局
 84         }
 85 
 86         function showimg(x){
 87             if (newsatrt) {
 88                 start()
 89                 newsatrt=false;
 90             }
 91 
 92              $("img"+x).innerHTML=map[x]
 93             // alert(x)
 94             if (ctr==0) {
 95                 ctr++
 96                 firstIndex=x //记录第一张图片索引
 97             }else{
 98                 if (firstIndex!=x) {
 99                 secondIndex=x;//记录第二张图片索引
100                 ctr=0;
101                 check() 
102                 }
103             }
104        
105             
106         }
107 
108         function start(){
109             times+=1
110             $("gameTime").innerHTML=times+'秒';
111             setTimeout('start()',1000)
112         }
113 
114         function check(){
115             if (map[firstIndex]==map[secondIndex]) {
116                 finished++;
117                 user[firstIndex]=1;
118                 user[secondIndex]=1;//不能再翻
119                 ctr=0;
120             }else if(user[firstIndex]==0){
121                 $('img'+firstIndex).innerHTML=' ';
122                 firstIndex=secondIndex;
123                 secondIndex=0;
124                 ctr++ //标记已经点击了一张
125             }
126             if (finished==length/2) {
127                 clearTimeout(startTime);
128                 if(confirm("恭喜你！再来一局？")==true){
129                     init()
130                 }
131             }
132         }
133 
134      </script>
135 </body>
136 </html>