图片记忆游戏

时间:2017-06-24 09:04:52

标签: javascript html css

这是一封记忆游戏。我想通过图片制作这个游戏,但是我不能生成图像并将它们写在数组中。

<script>
  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;
  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;

    }
  }

  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] + '\')"></div>';
    }
    document.getElementById('memory_board').innerHTML = output;
  }
</script>
</head>

<body>
  <div id="memory_board"></div>
  <script>
    newBoard();
  </script>

1 个答案:

答案 0 :(得分:0)

您可以添加style标记,如下例所示,

output += "<div id='tile_"+i+"' style=\"background-image:url('images/" + i + ".png');background-size:100% 100%; background-repeat:no-repeat;></div>";