if语句匹配数组

Question

var myImages = new Array();
myImages[0] = "../img/10_of_clubs.png";         
myImages[1] = "../img/2_of_clubs.png";           
myImages[2] = "../img/3_of_hearts.png";         
myImages[3] = "../img/4_of_spades.png";         
myImages[4] = "../img/5_of_clubs.png";           
myImages[5] = "../img/6_of_diamonds.png";       
myImages[6] = "../img/7_of_diamonds.png";
myImages[7] = "../img/8_of_hearts.png";
myImages[8] = "../img/9_of_spades.png";
myImages[9] = "../img/ace_of_clubs.png";
myImages[10] = "../img/black_joker.png";
myImages[11] = "../img/jack_of_diamonds.png";
myImages[12] = "../img/king_of_hearts.png";
myImages[13] = "../img/queen_of_spades.png"; 

function shuffleCard(){
    var shuffleSound = document.getElementById("shuffleNoise");        
    shuffleSound.play();        
    var random1 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards1").innerHTML = "<img src='" + 
    myImages[random1] + "'alt='myImages'></img>";        
    var random2 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards2").innerHTML = "<img src='" + 
    myImages[random2] + "'alt='myImages'></img>";
}

function snatchFunction(){
    if () {
        alert("Match!");
    } else {
        alert("Do not match!");
    }
}

我已经创建了一个洗牌的功能，但如果两张卡匹配，如何填写if语句以显示提醒信息？

Answer 1

只需将变量random1和random2放在功能范围之外，这样您就可以在snatchFunction()中访问和比较它们了。

（我已将随机数添加到alt属性中，以便在此代码段中看到它们。）

var myImages = new Array(),
    random1,
    random2,
    score = 0;

myImages[0] = "../img/10_of_clubs.png";         
myImages[1] = "../img/2_of_clubs.png";           
myImages[2] = "../img/3_of_hearts.png";         
myImages[3] = "../img/4_of_spades.png";         
myImages[4] = "../img/5_of_clubs.png";           
myImages[5] = "../img/6_of_diamonds.png";       
myImages[6] = "../img/7_of_diamonds.png";
myImages[7] = "../img/8_of_hearts.png";
myImages[8] = "../img/9_of_spades.png";
myImages[9] = "../img/ace_of_clubs.png";
myImages[10] = "../img/black_joker.png";
myImages[11] = "../img/jack_of_diamonds.png";
myImages[12] = "../img/king_of_hearts.png";
myImages[13] = "../img/queen_of_spades.png"; 

function shuffleCard(){
    //var shuffleSound = document.getElementById("shuffleNoise");        
    //shuffleSound.play();        
    random1 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards1").innerHTML = "<img src='" + 
    myImages[random1] + "'alt='myImages (" + random1 + ")'></img>";        
    random2 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards2").innerHTML = "<img src='" + 
    myImages[random2] + "'alt='myImages (" + random2 + ")'></img>";
}


function snatchFunction(){
    if (random1 === random2) {
        score++; // increase score
        alert("Match! Score: " + score);
    } else {
        alert("Do not match!");
    }
}

document.getElementById('shuffle').addEventListener("click", function(ev) {
shuffleCard();
});

document.getElementById('snatch').addEventListener("click", function(ev) {
snatchFunction();
});

<div id="deckOfCards1"></div>
<div id="deckOfCards2"></div>
<button id="shuffle">shuffle</button>
<button id="snatch">snatch</button>

Answer 2

使用comparison operators比较2个变量。

function snatchFunction(){
    if (random1 == random2) {
        alert("Match!");
    } else {
        alert("Do not match!");
    }
}

请务必全局定义您的变量，以便snatchFunction()可以访问它：

var random1, random2

function shuffleCard(){
    var shuffleSound = document.getElementById("shuffleNoise");        
    shuffleSound.play();        
    random1 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards1").innerHTML = "<img src='" + 
    myImages[random1] + "'alt='myImages'></img>";        
    random2 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards2").innerHTML = "<img src='" + 
    myImages[random2] + "'alt='myImages'></img>";
}

function snatchFunction(){
    if (random1 == random2) {
        alert("Match!");
    } else {
        alert("Do not match!");
    }
}

或通过函数调用传递变量：

function shuffleCard(){
    var shuffleSound = document.getElementById("shuffleNoise");        
    shuffleSound.play();        
    var random1 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards1").innerHTML = "<img src='" + 
    myImages[random1] + "'alt='myImages'></img>";        
    var random2 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards2").innerHTML = "<img src='" + 
    myImages[random2] + "'alt='myImages'></img>";

    snatchFunction(random1, random2);
}

function snatchFunction(card1, card2){
    if (card1 == card2) {
        alert("Match!");
    } else {
        alert("Do not match!");
    }
}

Answer 3

即使问题中没有提及，但在评论中提到，我在这里添加它。

对于分数，将全局变量声明为random1或random2表示var total_score = 0;

然后在snatchFunction()每次匹配时增加值。

function snatchFunction(){
    if (random1 === random2) {
        total_score += 10; // some score value 
        alert("Match! total score "+total_score);

    } else {
        alert("Do not match!");
    }
}

Answer 4

仅仅因为我喜欢这个想法:)另一种解决问题的方法：

＆＃13;

＆＃13;

var types = ['hearts', 'diamonds', 'clubs', 'spades'],
  type1, type2, no1, no2;

function shuffle() {
  $('#card1')
    .removeClass(type1)
    .removeClass('c' + no1);

  $('#card2')
    .removeClass(type2)
    .removeClass('c' + no2);


  type1 = types[Math.floor(Math.random() * types.length)],
    type2 = types[Math.floor(Math.random() * types.length)],
    no1 = 1 + Math.floor(Math.random() * 11),
    no2 = 1 + Math.floor(Math.random() * 11);
  $('#card1')
    .removeClass('back')
    .addClass(type1)
    .addClass('c' + no1);

  $('#card2')
    .removeClass('back')
    .addClass(type2)
    .addClass('c' + no2);
  if (type1 == type2 && no1 == no2) {
    console.log('Match!!!');
  }
}

＆＃13;

.card {
  position: relative;
  display: inline-block;
  background: url('https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/2502319/1160/772/m1/fpnw/wm0/12-playing-card-icons-1-.png?1491379334&s=8d4af6f2f06ee5cf0c53b95573d43e02');
  background-repeat: no-repeat;
  width: 105px;
  height: 152px;
}

.back {
  background-position: -823px -334px;
}

.label-top::before {
  position: absolute;
  top: 15px;
  left: 35px;
}

.label-bottom::before {
  position: absolute;
  bottom: 15px;
  right: 35px;
}

.rotate::before {
  transform: rotate(180deg);
  /* Safari */
  -webkit-transform: rotate(180deg);
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* IE */
  -ms-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.hearts {
  color: red;
  background-position: -220px -121px;
}

.diamonds {
  color: red;
  background-position: -826px -121px;
}

.clubs {
  color: black;
  background-position: -630px -121px;
}

.spades {
  color: black;
  background-position: -425px -121px;
}

.back>.label-top::before,
.back>.label-bottom::before {
  content: "";
}

.c1>.label-top::before,
.c1>.label-bottom::before {
  content: "1";
}

.c2>.label-top::before,
.c2>.label-bottom::before {
  content: "2";
}

.c3>.label-top::before,
.c3>.label-bottom::before {
  content: "3";
}

.c4>.label-top::before,
.c4>.label-bottom::before {
  content: "4";
}

.c5>.label-top::before,
.c5>.label-bottom::before {
  content: "5";
}

.c6>.label-top::before,
.c6>.label-bottom::before {
  content: "6";
}

.c7>.label-top::before,
.c7>.label-bottom::before {
  content: "7";
}

.c8>.label-top::before,
.c8>.label-bottom::before {
  content: "8";
}

.c9>.label-top::before,
.c9>.label-bottom::before {
  content: "9";
}

.c10>.label-top::before,
.c10>.label-bottom::before {
  content: "10";
}

.c11>.label-top::before,
.c11>.label-bottom::before {
  content: "A";
}

.c12>.label-top::before,
.c12>.label-bottom::before {
  content: "J";
}

.c13>.label-top::before,
.c13>.label-bottom::before {
  content: "Q";
}

.c14>.label-top::before,
.c14>.label-bottom::before {
  content: "k";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="card1" class="card back">
  <b class="label-top"></b><b class="label-bottom rotate"></b>
</div>
<div id="card2" class="card back">
  <b class="label-top"></b><b class="label-bottom rotate"></b>
</div>
<br />
<button onclick="shuffle()">Shuffle</button>

＆＃13;

＆＃13;

＆＃13;