原生javascript实现连连看游戏
本文实例为大家分享了js实现连连看游戏的具体代码,供大家参考,具体内容如下
连连看 body{ text-align:center; } .text{text-align:center;margin-top:60px;color:#fff;} .agin{text-align:center;margin-top:60px;color:#fff;} #game-box{ margin:60pxauto; position:relative; } #game-boximg{ float:left; width:59px; height:59px; border:1pxsolid#000000; } #game-boximg.hover{ border:1pxsolid#ffffff; } #game-boximg.active{ border:1pxsolid#7fff00; } #game-boxdiv{ background-color:#7fff00; position:absolute; } varbyId=function(id){ returndocument.getElementById(id); } varboxWidth=61;//格子宽度 vargameBox; varmapid='game-box';//地图id //22张图片 vararr='1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22'.split(','); varh=8;//图片共8行 varw=11;//图片共11列 varboxsLength=h*w; varboxArr={};//map对象 varstartBox='';//开始的格子 varendBox='';//结束的格子 window.onload=init; //初始化 functioninit(){ byId('agin').style.display='none';//隐藏再来一把按钮 boxsLength=h*w;//图片方框的个数 boxArr={}; startBox=''; endBox=''; varstr=''; gameBox=byId(mapid); for(vari=0;i ' //alert(str); }//id="t0_l0,t0_l1,t0_l2,t0_l3..." } gameBox.innerHTML=str; gameBox.style.width=w*boxWidth+'px'; pushBoxArr(); toHTML(); } //随机获取坐标 functiongetPosition(){ vart,f; (function(){ t=parseInt(Math.random()*h); l=parseInt(Math.random()*w); if(('t'+t+'_l'+l)inboxArr){ arguments.callee(); } })(); return{t:t,l:l} } //创建随机坐标的格子 functionCearteBox(name){ varp=getPosition(); this.name=name;//图片名 this.t=p.t;//行 this.l=p.l;//列 this.position='t'+p.t+'_l'+p.l;//位置 this.love=0;//这个用于特殊,某些图片不同也可以连接 switch(name){ case'100': case'200': this.love=1; break; case'300': case'400': case'500': this.love=2; break; case'600': case'700': this.love=3; break; case'800': case'900': this.love=4; break; } } //产生88个格子(图片框) functionpushBoxArr(){ varindex=0; varlast=arr.length-1; for(vari=0;i =0){//鼠标点击了空白图片 returnfalse; }else{ el.className='active';//更改点击图片的样式 //第一次点击或点击了同一张图片 if(startBox==''||startBox==el.id){ startBox=el.id; }else{//点击了第二张图片 endBox=el.id; test(boxArr[startBox],boxArr[endBox]); } } } //判断是不是可连接格子 functiontest(a,b){ varcan=function(a,b){ if(a.name==b.name){//图片名相同就可以连接 returntrue; }else{ if(a.love!=0&&b.love!=0){ if(a.love==b.love){ returntrue; }else{ returnfalse; } }else{ returnfalse; } } }(a,b);//立即执行 if(can){//可以连接 go(a,b); }else{//不能连接 byId(startBox).className=''; startBox=endBox;//指向第二张图片 endBox=''; } } //判断是否连通 functiongo(a,b){ var_ap=a.position,_bp=b.position; vara=a,b=b,temp,isKill=false; //建立四个点,判断是否两两相通 varpt1,pt2,pt3,pt4; //上到下扫描 if(isKill==false){ //交换位置 if(a.t>b.t){ temp=a; a=b; b=temp; } for(vari=-1,len=h;i<=len;i++){ pt1=a; pt2={t:i,l:a.l}; pt3={t:i,l:b.l}; pt4=b; if((!isNull(pt2)&&(pt2.t!=a.t))||(!isNull(pt3)&&(pt3.t!=b.t))){ continue; } elseif(link4pt(pt1,pt2,pt3,pt4)){ isKill=true; kill(a,b); showLine(pt1,pt2,pt3,pt4); break; return; } } } //左到右扫描 if(isKill==false){ //交换位置 if(a.l>b.l){ temp=a; a=b; b=temp; } for(vari=-1,len=w;i<=len;i++){ pt1=a; pt2={t:a.t,l:i}; pt3={t:b.t,l:i}; pt4=b; if((!isNull(pt2)&&(pt2.l!=a.l))||(!isNull(pt3)&&(pt3.l!=b.l))){ continue; } elseif(link4pt(pt1,pt2,pt3,pt4)){ isKill=true; kill(a,b); showLine(pt1,pt2,pt3,pt4); break; return; } } } //扫描完毕 if(isKill==false){ endBox=''; byId(_ap).className=''; startBox=_bp; } } //干掉格子,删除boxArr中相应格子 functionkill(a,b){ boxArr[a.position]=null; boxArr[b.position]=null; boxsLength-=2; startBox=''; endBox=''; } //显示链接路径 functionshowLine(a,b,c,d){ varline1=show2pt(a,b); varline2=show2pt(b,c); varline3=show2pt(c,d); varhideLine=function(){ gameBox.removeChild(line1); gameBox.removeChild(line2); gameBox.removeChild(line3); byId(a.position).src=byId(d.position).src='img/blank.gif'; byId(a.position).className=byId(d.position).className=''; if(boxsLength<=0){ alert('亲,你赢了!好腻害啊。'); byId('agin').style.display='block'; } } setTimeout(hideLine,300); functionshow2pt(a,b){ vartop,left,width,height,line=document.createElement('div'); vara=a,b=b,temp; //交换位置 if(a.t>b.t||a.l>b.l){ temp=a; a=b; b=temp; } top=boxWidth*a.t+30+'px'; left=boxWidth*a.l+30+'px'; //同行(t相等) if(a.t==b.t){ width=boxWidth*(b.l-a.l)+1+'px'; height='1px'; } //同列(l相等) if(a.l==b.l){ width='1px'; height=boxWidth*(b.t-a.t)+1+'px'; } line.style.top=top; line.style.left=left; line.style.width=width; line.style.height=height; returngameBox.appendChild(line); } } //单个格子是否空值 functionisNull(a){ returnboxArr['t'+a.t+'_l'+a.l]?false:true; } //2点是否连通 functionlink2pt(a,b){ vara=a,b=b,temp,canLink=true; //交换位置 if(a.t>b.t||a.l>b.l){ temp=a; a=b; b=temp; } if(a.t==b.t){//同行(t相等),a在b的左边 for(vari=a.l+1,len=b.l-1;i<=len;i++){ if(boxArr['t'+a.t+'_l'+i]){ canLink=false; break; } } }elseif(a.l==b.l){//同列(l相等),a在b的上边 for(vari=a.t+1,len=b.t-1;i<=len;i++){ if(boxArr['t'+i+'_l'+a.l]){ canLink=false; break; } } }else{ throw('位置错误:a.t='+a.t+'b.t='+b.t+'a.l='+a.l+'b.l='+b.l); } returncanLink; } //4个点是否两两连通 functionlink4pt(pt1,pt2,pt3,pt4){ returnlink2pt(pt1,pt2)&&link2pt(pt2,pt3)&&link2pt(pt3,pt4); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。