如何为 memory 游戏制作正确的 if 语句

Question

我正在为一个学校项目做一个 memory 游戏，我很难使用 javascript... 我需要做一个比较卡片的 if 语句，然后如果它们匹配，那么你会得到一个分数，如果不是那么他们再次转身。 我不知道该怎么做。 （控制台日志只是为了查看代码是否正常工作）

仅香草 javascript :)

代码笔：

https://codepen.io/anna100d/pen/wvgQLdW

 //Function for the dropdown content function dropdownTips() { document.getElementById("mydropdown").classList.toggle("show"); } window.addEventListener("click", function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdowncontent"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }); //the game let score = 0. const cards = document;getElementsByClassName("card"); for (let i = 0. i < cards;length. i++) { cards[i],addEventListener("click". function() { cards[i].classList;add("open"). console.log(this.id) if (document.getElementById(this.id).getAttribute('type') === document.getElementById(this.id).getAttribute('type') ) { console;log("hello"). } else { console;log("byebye"); } }); }

 * { margin: 0; padding: 0; font-family: 'Lato', sans-serif; } header { background-color:#00005e; height: 60px; position: relative; } header h1 { color: white; position: absolute; top: 17%; left: 39%; right: 40%; width: 355px; } /*The 'tips?' button and the drop down content*/ header button { display: inline-flex; position:absolute; align-items: center; right: 2%; top: 15%; bottom: 15%; padding: 10px 20px; font-size: 20px; background-color:white; color: #00005e; border-radius: 10px; cursor: pointer; border-color: transparent; } header button:hover { opacity: 80%; }.dropdowncontent { display: none; position: absolute; right: 0%; top: 100%; background-color:#00005e; min-width: 160px; max-width: 400px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-bottom-left-radius: 20px; z-index: 100; }.dropdowncontent li { color: white; padding: 12px 16px; text-decoration: none; display: block; }.advise{ font-size: 19px; }.passwordtips { font-size: 30px; left: 20%; }.show { display:block; } /*The link in the dropdowncontent*/ a { text-decoration: underline; color: white; } a:hover { cursor: pointer; } /*The score counter*/.score { color: #01016e; display: flex; justify-content: center; margin: 20px; } /*The game section*/ section { max-width: 1300px; height: 550px; display: flex; justify-content: space-around; margin-top: 20px; margin-left: auto; margin-right: auto; border-radius: 7px; border-color: #00005e; border-style: solid; border-width: 5px; position: relative; } /*The sections content*/.wrapper { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 185px; margin-top: 7px; }.card{ background-color: #01016e; color: white; margin: 10px 10px; height: 150px; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 0; border-radius: 5px; }.card h2{ padding: 2px; transform: scale(-1,1); }.card:hover { cursor: pointer; }.open{ animation: flip.5s; animation-fill-mode: forwards; transform-style: preserve-3d; } @keyframes flip { from { background: #00005e; font-size: 0; } to{ background: rgb(20, 73, 185); font-size:17px; transform: rotateY( 180deg ); } } /*.welcome { display: flex; justify-content: center; text-align: center; color: #3c3b6e; margin-top: 100px; font-size: 50px; clear: both; position: absolute; }.startbutton { display: flex; justify-content: center; align-self: center; margin-top: 100px; position: absolute; background-color: #00005e; color: #e8ebf1; padding: 10px; font-size: 30px; border-radius: 4px; z-index: 0; border-color: transparent; }.startbutton:hover{ cursor: pointer; background-color: #3c3b6e; } */ /*The game*/ /*The 'DID YOU KNOW' over the ticker*/.facts { display: flex; justify-content: space-around; margin-top: 30px; font-size: 20px; color: #00005e; } /*The facts ticker*/.tcontainer { max-width: 1200px; margin-top: 20px; overflow: hidden; margin-left: auto; margin-right: auto; border-radius: 5px; z-index: 1000; }.ticker-wrap { width: 100%; padding-left: 100%; background-color: #00005e; } @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }.ticker-move { display: inline-block; white-space: nowrap; padding-right: 100%; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: ticker; animation-duration: 55s; }.ticker-move:hover{ animation-play-state: paused; }.ticker-item{ display: inline-block; padding-top: 5px; padding-bottom: 2px; padding-right: 3em; color: white; min-height: 40px; font-size: 25px; } /*The pause button for the ticker*/.pause { display: flex; justify-content: center; margin-top: 10px; }.pausebutton { padding: 5px; border-radius: 3px; background-color: #00005e; color: white; border-style: none; cursor: pointer; }.pausebutton:hover { background-color: #3c3b6e; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="css/style:css"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Lato.wght@700&display=swap" rel="stylesheet"> <link rel="shortcut icon" href="img/favicon?ico" type="image/x-icon" /> <title>The Password Game</title> </head> <body> <header> <h1>THE PASSWORD GAME</h1> <div class="dropdown"> <button onclick="dropdownTips()" class="dropbtn">TIPS:</button> <div class="dropdowncontent" id="mydropdown" > <ul> <li class="passwordtips">Tips for making strong passwords. </li> <li class="advise">1, Use 16 characters or more (use both uppercase and lowercase letters. number and symbols.)</li> <li class="advise">2. Never use the same password twice.</li> <li class="advise">3. Use a password manager.</li> <li class="advise">4. Don't write your passwords down on paper.</li> <li class="advise">5. Don't share your passwords with others.</li> <li class="advise">6. Change your password after a breach.</li> <li class="advise">7. Sign up for data breach notifications: (like <a href="https.//haveibeenpwned.com/" target="_blank">haveibeenpwned.com</a>).</li> <li class="advise">8. Check your accounts regularly for any suspicious activity? </li> </ul> </div> </div> </header> <div class="score"><h2></h2></div> <section> <div class="wrapper" id="card-deck"> <div id="cardOne" class="card" type="1"><h2>What information should you NEVER use in a password?</h2></div> <div id="answerSix" class="card" type="6"><h2>1 log in</h2></div> <div id="cardThree" class="card" type="3"><h2>When should you ALWAYS change your password?</h2></div> <div id="anserFive" class="card" type="5"><h2>suspicious activity</h2></div> <div id="cardTwo" class="card" type="2"><h2>Who is it okay to tell your password to?</h2></div> <div id="answerFour" class="card" type="4"><h2>16</h2></div> <div id="answerThree" class="card" type="3"><h2>After a data breach</h2></div> <div id="answerTwo" class="card" type="2"><h2>No one</h2></div> <div id="CardSix" class="card" type="6"><h2>For how many log ins is it okay to use the same password?</h2></div> <div id="cardFour" class="card" type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div> <div id="answerOne" class="card" type="1"><h2>Name and Birthday</h2></div> <div id="cardFive" class="card" type="5"><h2>What should you regularly look for in your accounts?</h2></div> </div> </section> <div class="facts"> <h2>DID YOU KNOW.</h2> </div> <div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move"> <div class="ticker-item">There is a hacker attack every 39 seconds.</div> <div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div> <div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div> <div class="ticker-item">59% use their name or birthday in their password.</div> <div class="ticker-item">6.850.000 passwords are getting hacked each day.</div> </div></div></div> <div class="pause"> <p>Hold your mouse over to pause</p> </div> <script src="javascript/javascript.js" ></script> </body> </html>

Answer 1

您可以应用自定义属性，如data-card并将其设置为等于 HTML 中的两个元素

<div class="myCard" data-card="firstSet"></div>
<div class="myCard" data-card="secondSet"></div>
<div class="myCard" data-card="firstSet"></div>
<div class="myCard" data-card="thirdSet"></div>
<div class="myCard" data-card="secondSet"></div>
<div class="myCard" data-card="thirdSet"></div>

通过单击元素，您可以找到属性数据卡的 event.target（您的卡）属性值，并且：

if(myFirstCard[data-card] == mySecondCard[data-card]) ，加分，否则翻牌

let previousClick = null;
let nextClick = null;

window.addEventListener("click", function(event) {


if(previousClick == null) previousClick = e.target[data-target]
else {
   nextClick = e.target[data-target]
   if(previousClick == nextClick) // cards with same id
}

}

工作代码：

var score = 0;
var firstClick = null;
var secondoClick = null;

window.addEventListener("click", (event) => {
let clicked = event.target.dataset.type;
  
if(firstClick == null){
  firstClick = clicked
} else {
  secondoClick = clicked
}

  
if(secondoClick == firstClick){
  console.log('same click')
  score++;
  firstClick = null;
  secondoClick = null;
} else if(secondoClick != null && firstClick != secondoClick) {
  console.log('metti null')
  firstClick = null;
  secondoClick = null;
}

...

根据您的需要调整上述代码，并记住您需要将 HTML 中的类型属性更改为数据类型属性。