Question

我一直在玩这个记忆游戏，想知道如何限制用户的尝试。

默认游戏中的用户会计算并显示其尝试次数，该尝试次数也会被放入星级评分系统中。他们X次尝试后就失去了一颗星星。

当他们与所有卡片匹配时，会显示一个祝贺性弹出窗口，显示其得分等。

我试图做到这一点，以便如果它们失败（即丢失所有三颗星），它将创建一个类似的弹出窗口，通知他们它们丢失了（游戏结束）。就目前而言，他们有无限次尝试匹配卡片。

可以在这里找到游戏：https://codepen.io/Digital-Adam/pen/xJyvrL

我最近添加的尝试实现某种失败结果的位是这个位：

    // Game over
function gameOver(rating) {
    if (rating === 0) {
      alert('Game Over');
            return;
    }
}

完整JS：

var symbols = ['bicycle', 'bicycle', 'leaf', 'leaf', 'cube', 'cube', 'anchor', 'anchor', 'paper-plane-o', 'paper-plane-o', 'bolt', 'bolt', 'bomb', 'bomb', 'diamond', 'diamond'],
        opened = [],
        match = 0,
        moves = 0,
        $deck = $('.deck'),
        $scorePanel = $('#score-panel'),
        $moveNum = $scorePanel.find('.moves'),
        $ratingStars = $scorePanel.find('i'),
        $restart = $scorePanel.find('.restart'),
        delay = 800,
        gameCardsQTY = symbols.length / 2,
        rank3stars = gameCardsQTY + 2,
        rank2stars = gameCardsQTY + 6,
        rank1stars = gameCardsQTY + 10;

// Shuffle function From http://stackoverflow.com/a/2450976
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// Initial Game
function initGame() {
    var cards = shuffle(symbols);
  $deck.empty();
  match = 0;
  moves = 0;
  $moveNum.html(moves);
  $ratingStars.removeClass('fa-star-o').addClass('fa-star');
    for (var i = 0; i < cards.length; i++) {
        $deck.append($('<li class="card"><i class="fa fa-' + cards[i] + '"></i></li>'))
    }
};

// Set Rating and final Score
function setRating(moves) {
    var rating = 3;
    if (moves > rank3stars && moves < rank2stars) {
        $ratingStars.eq(2).removeClass('fa-star').addClass('fa-star-o');
        rating = 2;
    } else if (moves > rank2stars && moves < rank1stars) {
        $ratingStars.eq(1).removeClass('fa-star').addClass('fa-star-o');
        rating = 1;
    } else if (moves > rank1stars) {
        $ratingStars.eq(0).removeClass('fa-star').addClass('fa-star-o');
        rating = 0;
    }   
    return { score: rating };
};


// Game over
function gameOver(rating) {
    if (rating === 0) {
      alert('Game Over');
            return;
    }
}

// End Game
function endGame(moves, score) {
    swal({
        allowEscapeKey: false,
        allowOutsideClick: false,
        title: 'Congratulations! You Won!',
        text: 'With ' + moves + ' Moves and ' + score + ' Stars.\nBoom Shaka Lak!',
        type: 'success',
        confirmButtonColor: '#9BCB3C',
        confirmButtonText: 'Play again!'
    }).then(function(isConfirm) {
        if (isConfirm) {
            initGame();
        }
    })
}

// Restart Game
$restart.on('click', function() {
  swal({
    allowEscapeKey: false,
    allowOutsideClick: false,
    title: 'Are you sure?',
    text: "Your progress will be Lost!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#9BCB3C',
    cancelButtonColor: '#EE0E51',
    confirmButtonText: 'Yes, Restart Game!'
  }).then(function(isConfirm) {
    if (isConfirm) {
      initGame();
    }
  })
});

// Card flip
$deck.on('click', '.card:not(".match, .open")', function() {
    if($('.show').length > 1) { return true; }

    var $this = $(this),
            card = $this.context.innerHTML;
  $this.addClass('open show');
    opened.push(card);

    // Compare with opened card
  if (opened.length > 1) {
    if (card === opened[0]) {
      $deck.find('.open').addClass('match animated infinite rubberBand');
      setTimeout(function() {
        $deck.find('.match').removeClass('open show animated infinite rubberBand');
      }, delay);
      match++;
    } else {
      $deck.find('.open').addClass('notmatch animated infinite wobble');
            setTimeout(function() {
                $deck.find('.open').removeClass('animated infinite wobble');
            }, delay / 1.5);
      setTimeout(function() {
        $deck.find('.open').removeClass('open show notmatch animated infinite wobble');
      }, delay);
    }
    opened = [];
        moves++;
        setRating(moves);
        $moveNum.html(moves);
  }

    // End Game if match all cards
    if (gameCardsQTY === match) {
        setRating(moves);
        var score = setRating(moves).score;
        setTimeout(function() {
            endGame(moves, score);
        }, 500);
  }
});

initGame();

Answer 1

我检查了您的代码，发现了两个错误：

第一个是@Shilly所说的，您的条件是错误的，它将始终返回true，因此您必须解决该问题，因此，不要仅使用代表赋值运算符的=，而应使用比较运算符==，请检查this以获得更好的理解（我想您已经从其余代码中了解了这一点）。

第二个错误是您没有在任何地方调用函数gameOver，因此您必须调用它，否则它将只是无用的代码行。

这是解决方案的笔：

https://codepen.io/anon/pen/NBEWwB

限制用户尝试进行记忆游戏-导致游戏通过消息JS

1 个答案: