HTML Memory Matching Game - Simple & Fun - 常规

<!DOCTYPE html>
<html>
<head>
  <title>Memory Matching Game</title>
  <style type='text/css'>
    #container{
      margin: 0 auto;
      width: 600px;
    }
    #gameBoard{
      width: 600px;
      height: 400px;
      border: 1px solid #000;
      margin: 0 auto;
      padding: 20px;
    }
    .tile{
      width: 70px;
      height: 70px;
      background-color: #ccc;
      float: left;
      margin: 10px;
      padding: 10px;
    }
    .tile img{
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
  <div id='container'>
    <div id='gameBoard'>
    </div>
  </div>
  <script type='text/javascript'>
    // Set up the game
    var tiles_array = [
      {
        name: 'A',
        img: '1.jpg'
      },
      {
        name: 'B',
        img: '2.jpg'
      },
      {
        name: 'C',
        img: '3.jpg'
      },
      {
        name: 'D',
        img: '4.jpg'
      }
    ];
<pre><code>// Shuffle the tiles
for (var i = tiles_array.length - 1; i &gt; 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = tiles_array[i];
    tiles_array[i] = tiles_array[j];
    tiles_array[j] = temp;
}

// Draw the tiles on the board
for (var i=0;i&lt;tiles_array.length;i++){
  var tile = document.createElement('div');
  tile.className = 'tile';
  tile.id = 'tile_'+i;
  tile.dataset.name = tiles_array[i].name;
  
  var front = document.createElement('div');
  front.className = 'front';

  var back = document.createElement('div');
  back.className = 'back';
  back.style.backgroundImage = 'url('+tiles_array[i].img+')';

  tile.appendChild(front);
  tile.appendChild(back);

  document.getElementById('gameBoard').appendChild(tile);
  tile.addEventListener('click',function(){
    this.classList.toggle('flipped');
  });
}
</code></pre>
  </script>
</body>
</html>