标签：script outline 存储 use start star ali idt 游戏
学习跟着视频做的，勿喷
<!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>
标签：script outline 存储 use start star ali idt 游戏
原文地址：https://www.cnblogs.com/black-eyes/p/14913372.html
