JavaScript 表格小游戏

JavaScript 实现表格配对小游戏

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

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

源码

 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; }  str=""; for(var j=0;j<cols;j++){ var sid="img"+((cols*i)+j) str+='+sid+'" οnclick="showimg('+((cols*i)+j)+')"'+'>' str+='' } str+=""; document.write(str) }  return document.getElementById(x) } for(var i=0;i<length/2;i++){ map[i]=i; map[length/2+i]=i } // alert(map) function init(){ for (var i=0;i<length;i++){ $("img"+i).innerHTML='' user[i]=0;//是否显示图片，0为显示背面 } // alert(map) map.sort(function(){return Math.random()-0.5}) // alert(map) times=0; //计时器变量清零 $("gameTime").innerHTML=times+'秒' newsatrt=true; //标记为新开局 } function showimg(x){ if (newsatrt) { start() newsatrt=false; } $("img"+x).innerHTML=map[x] // alert(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++ //标记已经点击了一张 } if (finished==length/2) { clearTimeout(startTime); if(confirm("恭喜你！再来一局？")==true){ init() } } }  str_tab='' for(var j=0;j<5;j++){ str_tab+=''+'' } str_tab+='' document.write(str_tab) }  return document.getElementById(x); } for(var i=0;i<25;i++){ arr[i]=i+1; } // alert(arr) function write(){ for(var i=0;i<25;i++){ $("td"+(i+1)).innerHTML=arr[i] } } function td_num(x){ switch (x){ case 'odd': for(var i=0;i<25;i++){ if(i%2==0){ arr[i]=i+1; }else{arr[i]=""} } break; case 'even': for(var i=0;i<25;i++){ if(i%2==1){ arr[i]=i+1; }else{arr[i]=""} } break; case 'all': for(var i=0;i<25;i++){ arr[i]=i+1; } break; } write() }