Question

我正在为我的主要项目制作一组迷你游戏，正在关注互联网上的教程，为其中一个制作记忆游戏。

代码可以在我生成新电路板的地方工作，但其余的代码似乎无法正常工作。我的剪辑中是否做错了什么？谁能告诉我哪里出错？

这是我的内存迷你游戏的代码。

＆＃13;

$userPolicyIds

＆＃13;

$(document).ready(function() {

  //speech
  var progress = 0;
  var txt;
  $('#complete, #speech').hide();

  function eventHandler() {
    switch (progress) {
      case 0:
        txt = "Complete";
        break;
      case 1:
        txt = "Move on the the next game";
        $('#speech').click(function() {
          window.location.href = "minigame4.html"; //next minigame
        });
        break;
    }
    progress++;
    $('#speech').html(txt);
  }

  $('#speech').click(eventHandler);

  // Memory Game //

  var memory_array = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H', 'I', 'I', 'J', 'J', 'K', 'K', 'L', 'L'];
  var memory_values = [];
  var memory_tile_ids = [];
  var tiles_flipped = 0;

  //shuffle method
  Array.prototype.memory_tile_shuffle = function() {
    var i = this.length,
      j, temp;
    while (--i > 0) {
      j = Math.floor(Math.random() * (i + 1));
      temp = this[j];
      this[j] = this[i];
      this[i] = temp;
    }
  }

  //generate new board
  function newBoard() {
    tiles_flipped = 0;
    var output = '';
    memory_array.memory_tile_shuffle();
    for (var i = 0; i < memory_array.length; i++) {
      output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')" class="tiles"></div>';
    }
    $('#memory_board').html(output);
  }

  newBoard();

  //
  // all code works up to here

  function memoryFlipTile(tile, val) {
    // When tile is clicked, change colour to white along with its letter
    if (tile.html == "" && memory_values.length < 2) {
      tile.style.background = '#FFF';
      tile.html = val;
      // If no tiles are flipped
      if (memory_values.length == 0) {
        memory_values.push(val);
        memory_tile_ids.push(tile.id);
        // If one tile is already flipped
      } else if (memory_values.length == 1) {
        memory_values.push(val);
        memory_tile_ids.push(tile.id);
        // See if both tiles are a match
        if (memory_values[0] == memory_values[1]) {
          tiles_flipped += 2;
          // Clear both arrays
          memory_values = [];
          memory_tile_ids = [];
          // Check to see if the whole board is cleared
          // then display complete
          if (tiles_flipped == memory_array.length) {
            $("#complete").show(0, function() {
              eventHandler()
              $('#speech').show();
            });
          }
        } else {
          function flip2Back() {
            // Flip the 2 tiles back over
            var tile_1 = document.getElementById(memory_tile_ids[0]);
            var tile_2 = document.getElementById(memory_tile_ids[1]);
            tile_1.style.background - image = 'url(images/puzzle5/blank.png) no-repeat';
            tile_1.html = "";
            tile_2.style.background - image = 'url(images/puzzle5/blank.png) no-repeat';
            tile_2.html = "";
            // Clear both arrays
            memory_values = [];
            memory_tile_ids = [];
          }
          setTimeout(flip2Back, 700);
        }
      }
    }
  }
});

＆＃13;

div#memory_board {
  padding: 24px;
  margin: 0px auto;
  width: 456px;
  height: 300px;
}

div#memory_board div {
  float: left;
  margin: 10px;
  padding: 28px;
  font-size: 50px;
  cursor: pointer;
  text-align: center;
  background-image: url(images/puzzle5/blank.png);
}

#complete {
  position: absolute;
  width: 105px;
  height: 25px;
  top: 240px;
  left: 289px;
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 10px;
  border-style: solid;
  border-width: 5px;
  border-color: white;
  z-index: 5;
}

#speech {
  position: absolute;
  width: 655px;
  height: 100px;	
  top: 330px;
  left: 15px;
  background-color: black;
  color: white;
  font-size: 25px;
  padding: 10px;
  border-style: solid;
  border-width: 5px;
  border-color: white;
  z-index: 99;
}

＆＃13;

Answer 1

第93行和第95行中存在语法错误。此外，html应为innerHTML 变化

tile_1.style.background - image = 'url(images/puzzle5/blank.png) no-repeat';

tile_1.html = "";

tile_2.style.background - image = 'url(images/puzzle5/blank.png) no-repeat';

tile_2.html = "";

要

tile_1.style.['background-image'] = 'url(images/puzzle5/blank.png) no-repeat';

tile_1.innerHTML = "";

tile_2.style.['background-image'] = 'url(images/puzzle5/blank.png) no-repeat';

tile_2.innerHTML = "";

Answer 2

除了一些用户提到的更改之外，您的脚本还需要进行其他更改。因为你已经在使用jQuery，为什么不完全使用它呢？

还使用jQuery附加了事件，因为我怀疑它能够在将元素放入dom时看到脚本中定义的函数。（虽然还不确定原因）

我在下面的小提琴中更改了你的代码。请检查它是否适合您（只是更正了语法并用jquery替换了一些javascript代码）

$(document).on('click','.tiles',function(){ memoryFlipTile($(this),$(this).data("memchar")) })

Check Fiddle

仍然有优化代码的范围。

在JQuery（Javascript）中构建记忆游戏迷你游戏

2 个答案: