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>    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>