时间戳

首页 > 解决方案 > 限制用户在记忆游戏中的尝试 - 导致游戏结束消息 JS

javascript - 限制用户在记忆游戏中的尝试 - 导致游戏结束消息 JS

问题描述

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

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

当他们匹配所有卡片时，会显示一个带有他们的分数等的祝贺弹出窗口。

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

游戏可以在这里找到：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();

标签： javascript

解决方案

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

第一个是@Shilly说你的条件是错误的，它总是会返回true，所以你必须解决这个问题，所以不要只使用=代表赋值运算符，而是使用比较运算符==，检查这个以获得更好的理解（我猜你已经从您的其余代码中知道这一点）。

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

这是带有解决方案的笔：

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

推荐阅读