如何編寫一個函數來檢查兩個類是否相同

我正在研究一個使用JS的記憶遊戲。我設法做了一些切換工作，在兩張卡片面之間來回改變班級。我現在試圖獲得一個功能，檢查兩張遊戲卡是否匹配，如果圖像保持翻轉，如果它們不是圖像還原到卡面。如何編寫一個函數來檢查兩個類是否相同

// variable declarations for game elements 
let gameTiles = document.getElementsByClassName('game_tile'); 
let cardFace = document.getElementsByClassName('card_face'); 
let cardMatchCheck = []; 
let cardArray = 
[ "one", "one", "two", "two", "three", "three", 
"four", "four", "five", "five", "six", "six", 
"seven", "seven", "eight", "eight", "nine", "nine", 
"ten", "ten", "eleven", "eleven", "twelve", "twelve" ]; 

// div class assignment for loop from the cardArray 
// .className += allows for adding to an already assigned class 
// in this case "game_tile" (our button class) 

for (let i = 0; i < gameTiles.length; i++) { 
for (let j = 0; j < cardArray.length; j++) { 
    gameTiles[i].setAttribute("class", cardArray[j]); 
    } 
} 

// click response (working) 
let gameTileClick = document.getElementsByTagName('button'); 
for (let i = 0; i < gameTileClick.length; i++) { 
    gameTileClick[i].addEventListener('click', changeCardImage); 
} 

    // testing grounds: 

// this function runs through all card classes, and switches 
// between both card image states (back, front, back) 
// need to work on implementing the pair recognition 

function changeCardImage(cardArray) { 
if (cardArray.className == 'one') { 
    cardArray.className = 'card_one_img' 
    cardMatchCheck.push(cardArray.className); 
    cardMatch(); 
    cardMismatch(); 
} else if (cardArray.className == 'card_one_img') { 
    cardArray.className = "one"  
} else if (cardArray.className == 'two') { 
    cardArray.className = 'card_two_img' 
    cardMatchCheck.push(cardArray.className); 
    cardMatch(); 
    cardMismatch(); 
} else if (cardArray.className == 'card_two_img') { 
    cardArray.className = 'two' 
} else if (cardArray.className == 'three') { 
    cardArray.className = 'card_three_img' 
} else if (cardArray.className == 'card_three_img') { 
    cardArray.className = 'three' 
} else if (cardArray.className == 'four') { 
    cardArray.className = 'card_four_img' 
} else if (cardArray.className == 'card_four_img') { 
    cardArray.className = 'four' 
} else if (cardArray.className == 'five') { 
    cardArray.className = 'card_five_img' 
} else if (cardArray.className == 'card_five_img') { 
    cardArray.className = 'five' 
} else if (cardArray.className == 'six') { 
    cardArray.className = 'card_six_img' 
} else if (cardArray.className == 'card_six_img') { 
    cardArray.className = 'six' 
} else if (cardArray.className == 'seven') { 
    cardArray.className = 'card_seven_img' 
} else if (cardArray.className == 'card_seven_img') { 
    cardArray.className = 'seven' 
} else if (cardArray.className == 'eight') { 
    cardArray.className = 'card_eight_img' 
} else if (cardArray.className == 'card_eight_img') { 
    cardArray.className = 'eight' 
} else if (cardArray.className == 'nine') { 
    cardArray.className = 'card_nine_img' 
} else if (cardArray.className == 'card_nine_img') { 
    cardArray.className = 'nine' 
} else if (cardArray.className == 'ten') { 
    cardArray.className = 'card_ten_img' 
} else if (cardArray.className == 'card_ten_img') { 
    cardArray.className = 'ten' 
} else if (cardArray.className == 'eleven') { 
    cardArray.className = 'card_eleven_img' 
} else if (cardArray.className == 'card_eleven_img') { 
    cardArray.className = 'eleven' 
} else if (cardArray.className == 'twelve') { 
    cardArray.className = 'card_twelve_img' 
} else if (cardArray.className == 'card_twelve_img') { 
    cardArray.className = 'twelve' 
    } 
} 

console.log(cardMatchCheck); 


// function for checking card match/mismatch 

function cardMatch() { 
if (cardArray.className == cardArray.className) { 
    console.log('match'); 
    }   
} 

function cardMismatch() { 
if (cardArray.className != cardArray.className) { 
    cardArray.className = 'card_face'; 
    } 
}

道歉，如果任何格式是時髦 - 這是我的第一個SO帖子。任何方向都非常感謝。預先感謝您的時間！

編輯：這裏是我到目前爲止有：https://codepen.io/woolsox/pen/mMRPJK

來源

2017-08-05 woolsox

你的問題是什麼？請將代碼放在http://codepen.io，以便人們可以看到它的功能。 –

抱歉，只是添加了codepen。我試圖弄清楚如何編寫一個函數，讓遊戲識別兩張牌是否與他們保持透露的相同，如果沒有，他們會翻轉回來。 – woolsox

整個方法容易出錯，並且有大量不必要的重複代碼。您應該使用數組來存儲卡片，並使用負值表示卡片已翻轉。這會將那些「其他」如果減少到總共兩到三行，並允許您在任何時候添加更多圖像，而無需添加更多的複製麪食代碼。 –

的幾點思考：

1）這似乎是你的，如果其他邏輯可以簡化爲：

var tmp= cardArray.className.split("_"); 
cardArray.className = tmp.length>1?tmp[1]:"card_"+tmp[0]+"_img";

2）僅保留前一個元素的指針：

var before = null; 
function cardClicked(){ 
    if(before){ 
    if(before.className === this.className){ 
     alert("match"); 
    } 
    before = null; 
    }else{ 
    before = this; 
    } 
}

來源

2017-08-05 21:29:42

我對JS很陌生 - 你能解釋一些嗎？感謝您抽出時間回覆。 – woolsox

@woolsox你能描述哪一部分？我的意思是代碼按照之前設置爲null的順序執行 –

，完成的是什麼？和這個。className - 「this」在做什麼？我不完全清楚他們的用法。謝謝喬納斯。 – woolsox

不是答案，只是一個建議。

元素有classList屬性，toggle方法。在你的情況下，你可以應用一個默認樣式到一個元素，然後通過在'card_ten_img'和'ten'之間交換相同的方式打開或關閉一個類來改變它的外觀。您還可以使用事件委託並僅向文檔添加一個偵聽器，該偵聽器會查看點擊是否來自卡片並相應地執行操作。例如。

// If event target has class .card, toggle inverted class 
 
function invertCard(evt) { 
 
    var el = evt.target; 
 
    if (el.classList.contains('card')) { 
 
    el.classList.toggle('inverted'); 
 
    } 
 
} 
 

 
// Add listener to document to handle clicks on cards 
 
document.body.addEventListener('click', invertCard, false);

/* Default style for a card */ 
 
.card { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid red; 
 
    margin: 5px; 
 
    text-align: center; 
 
    color: black; 
 
    background-color: white; 
 
} 
 

 
/* Additional style for inverted card */ 
 
.inverted { 
 
    color: white; 
 
    background-color: black; 
 
}

<div class="card">A</div> 
 
<div class="card">B</div> 
 
<div class="card">C</div>

您可能需要使用一個更一般的handleClick函數，看到其中點擊的來源和實現邏輯基於源，其當前狀態，遊戲狀態和規則上游戲。

來源

2017-08-06 00:00:59 RobG

請注意，點擊卡的內部元素不會觸發卡更換。 –

如何編寫一個函數來檢查兩個類是否相同

回答

相關問題