原生javascript实现连连看游戏

2023-09-01 22:55:04 121
本文实例为大家分享了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);
}
相同图片可以连哦！啊哈哈哈~~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
原生javascript实现连连看游戏

热门推荐

随机推荐
