javascript - 图片内存游戏

标签 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>

最佳答案

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

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

关于javascript - 图片内存游戏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44734750/

相关文章:

javascript - 如何在 Shadow DOM 上应用样式

html - 如何垂直对齐 ul 内的按钮?

javascript - 使用 jquery 加载页面时出现的小问题

javascript - Angular2组件变量被多个promise修改

javascript - 使用 jQuery 选择器,即使我可以在屏幕上看到它并且选择器是正确的,也无法拾取元素

javascript - Esc取消拖动事件jquery拖动

javascript - 让我的时钟动画提前一秒/分钟触发

javascript - jQuery 验证 contenteditable span 或 div 的自定义消息

javascript - 如何在 node.js 中创建路由并包含 html 代码

html - w3css 单元格行重叠