第js實現(xiàn)連連看游戲本文實例為大家分享了js實現(xiàn)連連看游戲的具體代碼，供大家參考，具體內(nèi)容如下

!DOCTYPEhtml

html

head

metacharset="utf-8"/

styletype="text/css"

*{

margin:0;

padding:0;

}

ul{

width:400px;

height:400px;

border:1pxsolidgoldenrod;

margin:30pxauto;

list-style:none;

display:flex;

flex-wrap:wrap;

justify-content:space-between;

}

li{

width:100px;

height:100px;

border:1pxsolidgoldenrod;

text-align:center;

line-height:100px;

font-size:30px;

/*怪異盒模型*/

box-sizing:border-box;

}

/style

title/title

/head

body

ul

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

/ul

/body

/html

scripttype="text/javascript"

//1.獲取標簽

varliArray=document.getElementsByTagName("li");

//2.定義變量

varnumArray=[];

//3.封裝函數(shù)

//隨機數(shù)

functionrandomNum(min,max){

returnMath.floor(Math.random()*(max-min+1)+min);

}

//隨機顏色

functionrandomColor(){

varred=randomNum(0,255);

vargreen=randomNum(0,255);

varblue=randomNum(0,255);

return"rgb("+red+","+green+","+blue+")";

}

//封裝函數(shù)用于填滿數(shù)組

functionsetNumberArray(){

//16個數(shù)兩兩相等

for(vari=0;ii++){

vartemp=randomNum(30,90);

//卡著!!一旦隨機數(shù)已經(jīng)出現(xiàn)過!就重新再取數(shù)字!

//標記

查看是否可用

varisExits=false;//默認希望temp不存在

//經(jīng)過for循環(huán)遍歷對比

for(varj=0;jnumArray.length;j++){

if(temp==numArray[j]){

//隨機數(shù)已經(jīng)出現(xiàn)過了!

isExits=true;

break;//結(jié)束for..j循環(huán)

}

}

//for..j結(jié)束

查看isExits的標記狀態(tài)

if(isExits==false){

//隨機數(shù)可用

numArray.push(temp);

numArray.push(temp);

}else{

i--;//此次循環(huán)失效!i--再來一次!!

}

}

//循環(huán)結(jié)束

16個數(shù)字已經(jīng)進入數(shù)組中

console.log(numArray);

//打亂數(shù)組

crash(numArray);

console.log(numArray);

}

//調(diào)用函數(shù)

setNumberArray();

//封裝打亂數(shù)組的函數(shù)

functioncrash(arr){

for(vari=0;ii++){

varn1=randomNum(0,15);

//16個元素,下標是0---15

varn2=randomNum(0,15);

if(n1!=n2){

vart=arr[n1];

arr[n1]=arr[n2];

arr[n2]=t;

}

}

}

//封裝函數(shù)用于設置li標簽

functionsetLiArray(){

for(vari=0;iliArray.length;i++){

//賦值文本

li的個數(shù)和數(shù)字個數(shù)一致!所以下標也一致!

liArray[i].innerHTML=numArray[i];

//設置字體顏色隨機

liArray[i].style.color=randomColor();

//設置li的背景顏色

liArray[i].style.backgroundColor=randomColor();

}

}

//調(diào)用函數(shù)

setLiArray();

//--------------------------------

//給li添加點擊事件

//專門定義一個數(shù)組

來存儲點擊的li標簽

vararr=[];

for(vari=0;iliArray.length;i++){

liArray[i].onclick=function(){

arr.push(this);

console.log(arr);

//兩個就得判斷

if(arr.length==2){

//不能重復點擊一個標簽且點擊的兩個標簽值還得一樣

if(arr[0]!=arr[1]arr[0].innerHTML==arr[1].innerHTML){

//消除成功!

arr[0].style.visibility="hidden";

arr[1].style.visibility="hidden"