快捷導(dǎo)航

js實現(xiàn)連連看游戲

更新時間：2022年05月09日 12:31:49 作者：IT-Aurora

這篇文章主要為大家詳細介紹了js實現(xiàn)連連看游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<style type="text/css">
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ?}
?? ??? ??? ?ul{
?? ??? ??? ??? ?width: 400px;
?? ??? ??? ??? ?height: 400px;
?? ??? ??? ??? ?border: 1px solid goldenrod;
?? ??? ??? ??? ?margin: 30px auto;
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ??? ?display: flex;
?? ??? ??? ??? ?flex-wrap: wrap;
?? ??? ??? ??? ?justify-content: space-between;
?? ??? ??? ?}
?? ??? ??? ?li{
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?border: 1px solid goldenrod;
?? ??? ??? ??? ?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>

<script type="text/javascript">
?? ?//1.獲取標簽
?? ?var liArray = document.getElementsByTagName("li");
?? ?
?? ?//2.定義變量
?? ?var numArray = [];?? ?
?? ?
?? ?//3.封裝函數(shù)
?? ?//隨機數(shù)
?? ?function randomNum(min, max){
?? ??? ?return Math.floor(Math.random() * (max - min + 1) + min);
?? ?}
?? ?//隨機顏色
?? ?function randomColor(){
?? ??? ?var red = randomNum(0, 255);
?? ??? ?var green = randomNum(0, 255);
?? ??? ?var blue = randomNum(0, 255);
?? ??? ?return "rgb(" + red + "," + green + "," + blue + ")";
?? ?}
?? ?
?? ?//封裝函數(shù) 用于填滿數(shù)組
?? ?function setNumberArray(){
?? ??? ?//16個數(shù) 兩兩相等
?? ??? ?for(var i = 0; i < 8; i++){
?? ??? ??? ?var temp = randomNum(30, 90);
?? ??? ??? ?//卡著!!一旦隨機數(shù)已經(jīng)出現(xiàn)過!就重新再取數(shù)字!
?? ??? ??? ?//標記 ?查看是否可用
?? ??? ??? ?var isExits = false;//默認希望temp不存在
?? ??? ??? ?//經(jīng)過for循環(huán)遍歷對比
?? ??? ??? ?for(var j = 0; j < numArray.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ù)
?? ?function crash(arr){
?? ??? ?for(var i = 0; i < 15; i++){
?? ??? ??? ?var n1 = randomNum(0, 15);
?? ??? ??? ?//16個元素,下標是0---15
?? ??? ??? ?var n2 = randomNum(0, 15);
?? ??? ??? ?if(n1 != n2){
?? ??? ??? ??? ?var t = arr[n1];
?? ??? ??? ??? ?arr[n1] = arr[n2];
?? ??? ??? ??? ?arr[n2] = t;
?? ??? ??? ?}?? ?
?? ??? ?}
?? ??? ?
?? ?}
?? ?
?? ?//封裝函數(shù) 用于設(shè)置li標簽
?? ?function setLiArray(){
?? ??? ?for(var i = 0; i < liArray.length; i++){
?? ??? ??? ?//賦值文本 ?li的個數(shù)和數(shù)字個數(shù)一致! 所以下標也一致!
?? ??? ??? ?liArray[i].innerHTML = numArray[i];
?? ??? ??? ?//設(shè)置字體顏色隨機
?? ??? ??? ?liArray[i].style.color = randomColor();
?? ??? ??? ?//設(shè)置li的背景顏色
?? ??? ??? ?liArray[i].style.backgroundColor = randomColor();
?? ??? ?}
?? ?}
?? ?//調(diào)用函數(shù)
?? ?setLiArray();
?? ?
?? ?//--------------------------------
?? ?//給li添加點擊事件
?? ?//專門定義一個數(shù)組 ?來存儲點擊的li標簽
?? ?var arr = [];
?? ?for(var i = 0; i < liArray.length; i++){
?? ??? ?liArray[i].onclick = function(){
?? ??? ??? ?arr.push(this);
?? ??? ??? ?console.log(arr);
?? ??? ?
?? ??? ?//兩個就得判斷
?? ??? ?if(arr.length == 2){
?? ??? ??? ?//不能重復(fù)點擊一個標簽且點擊的兩個標簽值還得一樣
?? ??? ??? ?if(arr[0] != arr[1] && arr[0].innerHTML == arr[1].innerHTML){
?? ??? ??? ??? ?//消除成功!
?? ??? ??? ??? ?arr[0].style.visibility = "hidden";
?? ??? ??? ??? ?arr[1].style.visibility = "hidden";
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?//在這里 ?只要arr中存儲了兩個li ?就清空 ?為下次存儲li做準備
?? ??? ??? ?arr = [];
?? ??? ?}
?? ??? ?}
?? ?}

</script>

運行結(jié)果：