Question

这是我的第一篇文章，而且我刚刚开始编程。

作为学校的准备工作，我正在设计比赛游戏。我添加了一个重置功能，在检查匹配时应该翻转卡片。问题是checkForMatch（和相对警报）以及在更换第二张卡片图像之前的重置开始。就像附上的截图一样。

提前谢谢！

screenshot

＆＃13;

var cards = [
    {
    rank:"Queen",
    suit: "Hearts",
    cardImage: "images/queen-of-hearts.png"
    },
    {
    rank: "Queen",
    suit: "Dimonds",
    cardImage: "images/queen-of-diamonds.png"
    },
    {rank: "King",
    suit: "Hearts",
    cardImage: "images/king-of-hearts.png"
    },
    {
    rank: "King",
    suit: "Diamonds",
    cardImage: "images/king-of-diamonds.png"
    }
];
var cardsInPlay = [];

function checkForMatch() {
    if (cardsInPlay[0] === cardsInPlay[1]) {
        alert("You found a match!");
    }
    else {
        alert("Sorry, try again.");
    }
    
}


var flipCard = function () {
    var cardId = this.getAttribute("data-id"); //double check this
    console.log("User flipped over " + cards[cardId].rank);
    console.log(cards[cardId].suit);
    console.log(cards[cardId].cardImage);
    cardsInPlay.push(cards[cardId].rank);
    this.setAttribute('src',cards[cardId].cardImage);// double check
    if (cardsInPlay.length === 2) {
        checkForMatch();
        reset();      
    }
  
}

var createBoard = function () {
    for (var i=0; i < cards.length; i++) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute('src','images/back.png');
        cardElement.setAttribute('data-id',i);
        cardElement.addEventListener('click',flipCard);
        document.getElementById('game-board').appendChild(cardElement);
    }
    
}
createBoard();


var reset = function () {
    var card = document.getElementsByTagName('img');
    cardsInPlay = [];
    for (i = 0; cards.length; i++) {
        if (card[i].getAttribute('src') != 'images/back.png') {
            card[i].setAttribute('src', 'images/back.png');
        }
    }
}

＆＃13;

body {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: Raleway;
    color: white;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 45px;
    margin: 0;
}

a {
    font-family: Raleway;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 18px;
    border-bottom: 2px solid transparent;
}

a:hover {
   border-bottom: 2px solid white;
  }

h2 {
    font-family: Raleway;
    color: #0d2c40;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 20;
}

p {
    font-family: "Droid Serif";
    line-height: 26px;
    font-size: 18px; 
}

header {
    background-color: #F15B31;
    padding: 30px 20px;
}

main {
    width: 850px;
    margin: 35px auto;
}

nav {
    background: #00A6B3;
    padding:20px 0;
}

.navlink {
    margin:0 20px;
    color: white;
} 

img {
    margin: 40px 8px;
}

footer {
    background-color:#0D2C40;
    text-transform: uppercase;
    padding: 0 20px;
    color: white;
    font-size: 14px;
    letter-spacing: .08em;
    font-weight: 500;
}

.copyright {
    font-family: Raleway, sans-serif;
    float: left;
}

.message{
    font-family: Raleway, sans-serif;
    float: right;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    font-size: 0;
  }

  .name {
      color:#F15B31;
      font-weight: 700;
  }

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Droid+Serif|Raleway:400,500,600,700" rel="stylesheet">
    <title>Marco's memory game</title>
</head>

<body>
    <header>
        <h1>Marco's memory game</h1>
    </header>
        <nav>
            <a class="navlink" href="#instructions">Instructions</a>
            <a class="navlink" href="#facts">Game facts</a>
            <a class="navlink" href="#game-board">Play!</a>

        </nav>

    
    <main>
        <h2 id="instructions">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>

        <h2 id="facts">Game's facts</h2>
        <p>An other popular memory game is called "Kim's game. Kim's Game is a game or exercise played by Boy Scouts, Girl Scouts
            and Girl Guides, and other children's groups.[1] The game develops a person's capacity to observe and remember
            details. The name is derived from Rudyard Kipling's 1901 novel Kim, in which the hero, Kim, plays the game during
            his training as a spy.
            <a href="https://en.wikipedia.org/wiki/Kim%27s_Game">More info...</a>
        </p>

        <div id="game-board" class="board clearfix"></div>
    </main>
    <footer class="clearfix">

        <p class="copyright">Copyright 2017</p>
        <p class="message">Created with &hearts; by <span class="name"> GA </span></p>
        
       
    </footer>


    <script src="js/main.js"></script>
</body>

</html>

＆＃13;

JS仅在显示图像时启动功能

0 个答案: