如何在这个游戏中将卡片转换到其原始位置IF是错误的？

时间：2017-11-30 14:36:18

标签： javascript loops

＆＃13;
＆＃13; 
var cards = [
  {
    rank: "Queen",
    suit: "Hearts",
    cardImage: "images/queen-of-hearts.png",
    id: 0,
  },
  {
    rank: "Queen",
    suit: "Diamonds",
    cardImage: "images/queen-of-diamonds.png",
    id: 1,
  },
  {
    rank: "King",
    suit: "Hearts",
    cardImage: "images/king-of-hearts.png",
    id: 2,
  },
  {
    rank: "King",
    suit: "Diamonds",
    cardImage: "images/king-of-diamonds.png",
    id: 3
  }
];
//1
function createBoard() {
  for (var i = 0; i < cards.length; i++) {
    var cardElement = document.createElement('img');
    // console.log(cardElement);
    cardElement.setAttribute('src', 'images/back.png');
    cardElement.setAttribute('data-id', i);
    document.getElementById('game-board').appendChild(cardElement);
    cardElement.addEventListener('click', flipCard);
    cardElement.style.width = '210px';

  }
}
createBoard();
//2
function flipCard () {
  var cardId = this.getAttribute('data-id');
  cardsInPlay.push(cards[cardId].rank);
  cardsInPlay.push(cards[cardId].id);
  this.setAttribute('src', cards[cardId].cardImage);

// CHECK FOR MATCH HERE =>
    if (cardsInPlay.length === 2) {
      if (cardsInPlay[0] === cardsInPlay[1]) {
        alert("You found a match!");
      }
      else {
        alert("Sorry, try again.");
        console.log(cardsInPlay);
        cardsInPlay[0].setAttribute('src', 'images/back.png'); // this doesnt work
        cardsInPlay[1].setAttribute('src', 'images/back.png'); // this doesnt work
      }
    }
}
var cardsInPlay = [];
＆＃13; 
body{
    text-align: center;
    margin: 0;

}

h1 {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    color: #0d2c40;
    font-size: 45px;
    letter-spacing: 1px;
    margin: 0;
    color: white;
}

p {
  font-family: "Droid Serif", serif;
  line-height: 26px;
  font-size: 18px;
}

a {
    font-family: raleway;
    text-decoration: none;
    color: #F15B31;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 18px;

}

h2 {
    font-family: raleway;
    font-size: 20px;
    color: #0d2c40;
    letter-spacing: 1px;
    font-weight: 600;
}

header {
    background-color: #F15B31;
    padding: 30px 20px 30px 20px;
}

main {
  width: 850px;
  margin: 35px auto
}

a {
    margin: 0 20px;
    color: white;
}

nav a:hover {
    border-bottom: 2px solid white;
}

nav {
    background-color: #00A6B3;
    padding: 20px 0;
}

img {
    margin: 40px 8px 0 8px;
}

footer {
    text-transform: uppercase;
    padding: 0 20px;
    background-color: #0D2C40;
    color: white;
    letter-spacing: .08em;
    font-weight: 500;
}

.copyright {
    float: left;
}

.message {
    float: right;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  content: " ";
  clear: both;
  height: 0;
  font-size: 0;
}

.name {
   color: #F15B31;
   font-weight: 700;
}
#game-board{

  width: 1200px;
}
＆＃13; 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link href="css/style.css" rel="stylesheet" type="text/css">

      <title>Memory card game</title>
   </head>
   <body>
      <header>
         <h1>Memory Game</h1>
      </header>
      <nav>
         <p><a href="#">INSTRUCTIONS</a><a href="#"> GAME</a></p>
      </nav>
      <main>
         <h2>INSTRUCTIONS</h2>
         <p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.</p>
         <div id="game-board" class="board clearfix"></div>
      </main>
      <footer>
          <div class="clearfix">
          <p class="copyright">Copyright 2017</p>
          <p class="message">Created with &hearts; by <span class="name">GA</span></p>
              </div>
      </footer>
    <script src="js/main.js"></script>
   </body>
</html>
＆＃13;
＆＃13;
＆＃13;

我想知道如何能够回到原来的位置并不匹配。如果有比赛，有一个警告说恭喜你赢了，否则再试一次，但我想要两张牌如果不匹配就回到原来的位置。但是只有一张卡回到原来的位置（有这个的，但我认为这是指两者）卡片图像不在这里。有人可以帮忙吗？

＆＃13;
＆＃13; 
var cards = [
  {
    rank: "Queen",
    suit: "Hearts",
    cardImage: "images/queen-of-hearts.png",
    id: 0,
  },
  {
    rank: "Queen",
    suit: "Diamonds",
    cardImage: "images/queen-of-diamonds.png",
    id: 1,
  },
  {
    rank: "King",
    suit: "Hearts",
    cardImage: "images/king-of-hearts.png",
    id: 2,
  },
  {
    rank: "King",
    suit: "Diamonds",
    cardImage: "images/king-of-diamonds.png",
    id: 3
  }
];
//1
function createBoard() {
  for (var i = 0; i < cards.length; i++) {
    var cardElement = document.createElement('img');
    // console.log(cardElement);
    cardElement.setAttribute('src', 'images/back.png');
    cardElement.setAttribute('data-id', i);
    document.getElementById('game-board').appendChild(cardElement);
    cardElement.addEventListener('click', flipCard);
    cardElement.style.width = '210px';

  }
}
createBoard();
//2
function flipCard () {
  var cardId = this.getAttribute('data-id');
  cardsInPlay.push(cards[cardId].rank);
  cardsInPlay.push(cards[cardId].id);
  this.setAttribute('src', cards[cardId].cardImage);

// CHECK FOR MATCH HERE =>
    if (cardsInPlay.length === 2) {
      if (cardsInPlay[0] === cardsInPlay[1]) {
        alert("You found a match!");
      }
      else {
        alert("Sorry, try again.");
        console.log(cardsInPlay);
        cardsInPlay[0].setAttribute('src', 'images/back.png'); // this doesnt work
        cardsInPlay[1].setAttribute('src', 'images/back.png'); // this doesnt work
      }
    }
}
var cardsInPlay = [];
＆＃13; 
body{
    text-align: center;
    margin: 0;

}

h1 {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    color: #0d2c40;
    font-size: 45px;
    letter-spacing: 1px;
    margin: 0;
    color: white;
}

p {
  font-family: "Droid Serif", serif;
  line-height: 26px;
  font-size: 18px;
}

a {
    font-family: raleway;
    text-decoration: none;
    color: #F15B31;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 18px;

}

h2 {
    font-family: raleway;
    font-size: 20px;
    color: #0d2c40;
    letter-spacing: 1px;
    font-weight: 600;
}

header {
    background-color: #F15B31;
    padding: 30px 20px 30px 20px;
}

main {
  width: 850px;
  margin: 35px auto
}

a {
    margin: 0 20px;
    color: white;
}

nav a:hover {
    border-bottom: 2px solid white;
}

nav {
    background-color: #00A6B3;
    padding: 20px 0;
}

img {
    margin: 40px 8px 0 8px;
}

footer {
    text-transform: uppercase;
    padding: 0 20px;
    background-color: #0D2C40;
    color: white;
    letter-spacing: .08em;
    font-weight: 500;
}

.copyright {
    float: left;
}

.message {
    float: right;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  content: " ";
  clear: both;
  height: 0;
  font-size: 0;
}

.name {
   color: #F15B31;
   font-weight: 700;
}
#game-board{

  width: 1200px;
}
＆＃13; 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link href="css/style.css" rel="stylesheet" type="text/css">
      
      <title>Memory card game</title>
   </head>
   <body>
      <header>
         <h1>Memory Game</h1>
      </header>
      <nav>
         <p><a href="#">INSTRUCTIONS</a><a href="#"> GAME</a></p>
      </nav>
      <main>
         <h2>INSTRUCTIONS</h2>
         <p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.</p>
         <div id="game-board" class="board clearfix"></div>
      </main>
      <footer>
          <div class="clearfix">
          <p class="copyright">Copyright 2017</p>
          <p class="message">Created with &hearts; by <span class="name">GA</span></p>
              </div>
      </footer>
    <script src="js/main.js"></script>
   </body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

  

编辑： this的问题与javascript中的关闭有关。我建议您使用IIFE（用于EcmaScript5）或let关键字（用于EcmaScript6）。 Read more here

而不是这样做：

function createBoard() {
  for (var i = 0; i < cards.length; i++) {
    var cardElement = document.createElement('img');
    [..]
    cardElement.addEventListener('click', flipCard); << 'this' will refer to last cardElement at the end of the loop

这样做：

function createBoard() {
  for (var i = 0; i < cards.length; i++) {
    var cardElement = document.createElement('img');
    [..]
    cardElement.addEventListener('click', (function(x) {return function() {flipCard(x)}})(i)); // 'i' is immediately evaluated to the correct value
    cards[i].element = cardElement; // Keep association with DOM here

现在你可以轻松地翻回卡片了。

function flipCard (i) {
  cardsInPlay.push(i);
  // Flip played card
  cards[i].element.setAttribute('src', cards[i].cardImage);

  if (cardsInPlay.length === 1)
    return; // First card: no game resolution yet

  // Second card: give user 1s to see it flipped before flipping back
  setTimeout(function(){
    if (cards[cardsInPlay[0]].rank === cards[cardsInPlay[1]].rank)
      alert("You found a match!");
    else
      alert("Sorry, try again.");
    cardsInPlay.forEach(function(i) {
      cards[i].element.setAttribute('src', 'images/back.png');
    });
    cardsInPlay.length = 0;
  }, 1000);
}

答案 1 :(得分：1)

如果你试图翻回这两张牌，这段代码只会翻转游戏中的最后一张卡＆＃34; cardsInPlay [1]＆＃34;：

this.setAttribute('src', 'images/back.png');

你想要的是翻转＆＃34; cardsInPlay [0]＆＃34;和＆＃34; cardsInPlay [1]＆＃34;所以也许有点像这样：

else {
    alert("Sorry, try again.");
    console.log(cardsInPlay);
    cardsInPlay[0].setAttribute('src', 'images/back.png');
    cardsInPlay[1].setAttribute('src', 'images/back.png');
  }

答案 2 :(得分：0)

修改以下代码段以实现所需的功能！你可以查一下吗？

＆＃13;
＆＃13; 
var cards = [
  {
    rank: "Queen",
    suit: "Hearts",
    cardImage: "http://via.placeholder.com/350x150?text=QueenHeartsfront"
  },
  {
    rank: "Queen",
    suit: "Diamonds",
    cardImage: "http://via.placeholder.com/350x150?text=QueenDiamondsfront"
  },
  {
    rank: "King",
    suit: "Hearts",
    cardImage: "http://via.placeholder.com/350x150?text=KingHeartsfront"
  },
  {
    rank: "King",
    suit: "Diamonds",
    cardImage: "http://via.placeholder.com/350x150?text=KingDiamondsfront"
  }
];
//1 CREATE BOARD
function createBoard() {
  for (var i = 0; i < cards.length; i++) {
    var cardElement = document.createElement('img');
    // console.log(cardElement);
    cardElement.setAttribute('src', 'http://via.placeholder.com/350x150?text=back');
    cardElement.setAttribute('data-id', i);
    document.getElementById('game-board').appendChild(cardElement);
    cardElement.addEventListener('click', flipCard);
    cardElement.style.width = '210px';
  }
}
createBoard();
var prev = "";
//2 FLIPCARD
function flipCard () {
  var cardId = this.getAttribute('data-id');
  cardsInPlay.push(cards[cardId].rank);
  this.setAttribute('src', cards[cardId].cardImage);
  console.log(cardsInPlay[0]);
  console.log(cardsInPlay[1]);
    if (cardsInPlay.length === 2) {
      if (cardsInPlay[0] === cardsInPlay[1]) {
        alert("You found a match!");
        cardsInPlay = [];
      }
      else {
        alert("Sorry, try again.");
        cardsInPlay = [];
        // cardsInPlay.pop();
        // cardsInPlay.pop();
        // console.log(cardsInPlay);
        try{
        prev.setAttribute('src', 'http://via.placeholder.com/350x150?text=back');
        }catch(e){}
        this.setAttribute('src', 'http://via.placeholder.com/350x150?text=back');
      }
    }
    prev = this;
}
var cardsInPlay = [];
＆＃13; 
body{
    text-align: center;
    margin: 0;

}

h1 {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    color: #0d2c40;
    font-size: 45px;
    letter-spacing: 1px;
    margin: 0;
    color: white;
}

p {
  font-family: "Droid Serif", serif;
  line-height: 26px;
  font-size: 18px;
}

a {
    font-family: raleway;
    text-decoration: none;
    color: #F15B31;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 18px;

}

h2 {
    font-family: raleway;
    font-size: 20px;
    color: #0d2c40;
    letter-spacing: 1px;
    font-weight: 600;
}

header {
    background-color: #F15B31;
    padding: 30px 20px 30px 20px;
}

main {
  width: 850px;
  margin: 35px auto
}

a {
    margin: 0 20px;
    color: white;
}

nav a:hover {
    border-bottom: 2px solid white;
}

nav {
    background-color: #00A6B3;
    padding: 20px 0;
}

img {
    margin: 40px 8px 0 8px;
}

footer {
    text-transform: uppercase;
    padding: 0 20px;
    background-color: #0D2C40;
    color: white;
    letter-spacing: .08em;
    font-weight: 500;
}

.copyright {
    float: left;
}

.message {
    float: right;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  content: " ";
  clear: both;
  height: 0;
  font-size: 0;
}

.name {
   color: #F15B31;
   font-weight: 700;
}
#game-board{

  width: 1200px;
}
＆＃13; 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link href="css/style.css" rel="stylesheet" type="text/css">
      
      <title>Memory card game</title>
   </head>
   <body>
      <header>
         <h1>Memory Game</h1>
      </header>
      <nav>
         <p><a href="#">INSTRUCTIONS</a><a href="#"> GAME</a></p>
      </nav>
      <main>
         <h2>INSTRUCTIONS</h2>
         <p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.</p>
         <div id="game-board" class="board clearfix"></div>
      </main>
      <footer>
          <div class="clearfix">
          <p class="copyright">Copyright 2017</p>
          <p class="message">Created with &hearts; by <span class="name">GA</span></p>
              </div>
      </footer>
    <script src="js/main.js"></script>
   </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题