Question

再次感谢一些帮助，因为我大部分时间迷失了JavaScript。感谢我们的兄弟Max，我有这个代码（下面）;我现在意识到我需要：

1）重启按钮，随机播放/随机化卡片，点击。

2）当选择两个选项（一个单词和一个数字）时，每个'卡'的背景颜色或边框颜色应该改变，以显示用户已经选择了这两个卡。

window.onload = function() {
  var words = document.querySelectorAll('.word');
  var numbers = document.querySelectorAll('.number');
  var selectedWordIndex;
  var selectedNumberIndex;
  var timerInstance;

  // Validate game settings
  if (words.length !== numbers.length) {
    return console.error('Words list size should be same as numbers list');
  }

  // Register click event handlers on all words and numbers
  for (var i = 0; i < words.length; i++) {
    words[i].setAttribute('data-index', i);
    words[i].addEventListener('click', function(event) {
      selectedWordIndex = this.dataset.index;
      checkMatching();
    });
  }

  for (var i = 0; i < numbers.length; i++) {
    numbers[i].setAttribute('data-index', i);
    numbers[i].addEventListener('click', function(event) {
      selectedNumberIndex = this.dataset.index;
      checkMatching();
    });
  }

  function checkMatching() {
    // When user selection matches
    if (selectedWordIndex === selectedNumberIndex) {
      // Remove pair
      var word = document.querySelector('.word[data-index="' + selectedWordIndex + '"]')
      var number = document.querySelector('.number[data-index="' + selectedNumberIndex + '"]')
      word.parentNode.removeChild(word);
      number.parentNode.removeChild(number);

      // Reset selection
      selectedWordIndex = null;
      selectedNumberIndex = null;

      // Check if game is ended
      if (document.querySelectorAll('.word').length === 0) {
        // Remove blocks and stop the timer
        var words = document.querySelector('.words');
        var numbers = document.querySelector('.numbers');
        words.parentNode.removeChild(words);
        numbers.parentNode.removeChild(numbers);
        clearInterval(timerInstance);
      }
    } else if (selectedWordIndex && selectedNumberIndex) {
      // Register an error while selection does not match and reset the selection
      var errorCounter = document.querySelector('.errors .counter');
      errorCounter.innerHTML = parseInt(errorCounter.innerHTML, 10) + 1;

      selectedWordIndex = null;
      selectedNumberIndex = null;
    }
  }

  function startTimer() {
    var display = document.querySelector('.time');
    var timer = 0,
      minutes, seconds;
    timerInstance = setInterval(function() {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.innerHTML = minutes + ":" + seconds;

      timer++;
    }, 1000);
  }

  startTimer();
};

.words {
  width: 168px;
  height: 168px;
  border: 1px grey solid;
  text-align: center;
  padding: 1px;
  float: left;
}
.word {
  width: 165px;
  height: 40px;
  border: 1px grey solid;
}
.numbers {
  width: 50%;
  height: 400px;
  border: 1px blue solid;
  text-align: center;
  margin: 1px;
  float: left;
  overflow: hidden;
}
.number {
  width: 180px;
  height: 70px;
  border: 1px blue solid;
  margin: 2px;
  float: left;
  font-size: 11pt;
}

<div class="words">
  <div class="word">aaaaaaaa</div>
  <div class="word">bbbbbbbb</div>
  <div class="word">cccccccc</div>
  <div class="word">dddddddd</div>
</div>

<div class="numbers">
  <div class="number">11111111</div>
  <div class="number">22222222</div>
  <div class="number">33333333</div>
  <div class="number">44444444</div>
</div>

<div class="errors">
  Errors: <span class="counter">0</span>
</div>

<div class="time"></div>

Answer 1

我从第3点开始：

3-文档准备就绪后，您只需创建两个阵列即可你的单词和另一个数字，并创建一个div foreach项目并将其添加到所需的父级。

            if option.text == "Easy":
                walls, players, finishes = load_level(0)
                currentlevel = 0
                main(walls, players, finishes, currentlevel)
-------------
def main(walls, players, finishes, currentlevel):
[put your old code here]

1-您可以添加一个按钮并附加var cards_words=["A","B","C","D","E"]; $('.words').empty(); $.each(cards_words, function( index, value ) { $('.words').append("<div class='word' id='word_"+index+"'>"+value+"</div>"); });事件。一旦这样单击按钮，您可以随机播放上述两个数组的顺序而不是创建两个父div。

HTML：

click

JQuery的：

<input type="button" value="start" id="start_game">

PS：上面的函数$('#start_game').click(function(){ $('.words').empty(); $.each(shuffle(cards_words), function( index, value ) { $('.words').append("<div class='word' id='word_"+index+"'>"+value+"</div>"); }); });我发现它here。

每个所需div字或数字的2-on shuffle事件会更改当前单击div的背景颜色，并更改div兄弟的背景颜色。

click

完整解决方案：see Fiddle

shuffle，bordercolor更改和填充框的脚本

1 个答案: