html 别踩白块

“别踩白块”（Piano Tiles）是一款非常经典的音乐游戏，也是一款很好的 HTML/CSS/Javascript 练手项目。下面是一个简单的 “别踩白块” 游戏的实现示例。

HTML 代码：

<div id="game">
  <div class="row">
    <div class="tile white"></div>
    <div class="tile black"></div>
    <div class="tile white"></div>
    <div class="tile black"></div>
  </div>
  <div class="row">
    <div class="tile black"></div>
    <div class="tile white"></div>
    <div class="tile black"></div>
    <div class="tile white"></div>
  </div>
  <div class="row">
    <div class="tile white"></div>
    <div class="tile black"></div>
    <div class="tile white"></div>
    <div class="tile black"></div>
  </div>
  <div class="row">
    <div class="tile black"></div>
    <div class="tile white"></div>
    <div class="tile black"></div>
    <div class="tile white"></div>
  </div>
</div>

CSS 代码：

#game {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid black;
  background-color: #333;
  overflow: hidden;
}

.row {
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
}

.tile {
  width: 25%;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.white {
  background-color: white;
}

.black {
  background-color: black;
}

.active {
  background-color: #999;
}

Javascript 代码：

var game = document.getElementById('game');
var rows = game.getElementsByClassName('row');
var tiles = game.getElementsByClassName('tile');
var score = 0;
var gameOver = false;

// 遍历所有黑块，添加点击事件
for (var i = 0; i < tiles.length; i++) {
  if (tiles[i].classList.contains('black')) {
    tiles[i].addEventListener('click', function() {
      if (gameOver) {
        return;
      }
      this.classList.remove('black');
      this.classList.add('active');
      score++;
      if (score === tiles.length / 2) {
        alert('游戏结束，您的得分是 ' + score);
        gameOver = true;
      }
    });
  }
}

// 定时器，每隔 1 秒钟随机选一个黑块添加 active 类
setInterval(function() {
  if (gameOver) {
    return;
  }
  var activeTile = document.querySelector('.active');
  if (activeTile) {
    activeTile.classList.remove('active');
    activeTile.classList.add('black');
  }
  var randomIndex = Math.floor(Math.random() * tiles.length);
  var tile = tiles[randomIndex];
  while (tile.classList.contains('active')) {
    randomIndex = Math.floor(Math.random() * tiles.length);
    tile = tiles[randomIndex];
  }
  tile.classList.add('active');
}, 1000);

在上面的代码中，我们使用了 HTML 和 CSS 来创建了一个 “别踩白块” 游戏的界面，通过 Javascript 实现了游戏的逻辑。具体来说，我们使用了定时器来每隔一秒钟随机选一个黑块并添加 `active` 类，然后通过点击黑块来移除 `black` 类并添加 `active` 类，直到所有的黑块都被点击完毕，游戏结束。