Question

我正在使用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

Answer 1

一些想法：

1）看起来你的if else逻辑可以简化为：

 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;
  }
 }

Answer 2

不是答案，只是一个建议。

元素具有classList属性，其中包含 toggle 方法。在您的情况下，您可以将默认样式应用于元素，然后通过打开或关闭类来更改其外观，就像您在＆＃39; card_ten_img＆＃39;之间交换一样。和＆＃39; ten＆＃39;。您还可以使用事件委派，并且只向文档添加一个侦听器，该侦听器可以查看单击是否来自卡并且相应地运行。 E.g。

＆＃13;

// 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);

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

您可能希望使用更通用的 handleClick 函数来查看点击来自哪里，并根据源，其当前状态，游戏状态和游戏规则实现逻辑。

如何编写一个检查两个类是否相同的函数

2 个答案: