用js和jq创建一个消消乐游戏

好的，下面是一个简单的消消乐游戏的代码示例：

HTML代码：

<div id="game-container">
  <div class="score">得分: <span id="score">0</span></div>
  <div class="game-board"></div>
  <button id="new-game">新游戏</button>
</div>

CSS代码：

#game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score {
  margin-top: 20px;
  font-size: 24px;
}

.game-board {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.game-board div {
  width: 30px;
  height: 30px;
  margin: 1px;
  background-color: #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.game-board div.selected {
  background-color: #f00;
}

JS/jQuery代码：

// 定义颜色数组
var colors = ['red', 'green', 'blue', 'yellow', 'purple'];

// 生成随机颜色
function randomColor() {
  return colors[Math.floor(Math.random() * colors.length)];
}

// 创建游戏面板
function createGameBoard() {
  var gameBoard = $('.game-board');
  for (var i = 0; i < 100; i++) { // 生成 10 行 10 列的格子
    var div = $('<div></div>');
    div.data('color', randomColor()); // 为每个格子设置随机颜色
    gameBoard.append(div);
  }
}

// 游戏初始化
function initGame() {
  $('#score').text(0); // 得分清零
  $('.game-board').empty(); // 清空游戏面板
  createGameBoard(); // 重新生成游戏面板
}

// 计算得分
function calculateScore(selected) {
  return selected.length * selected.length; // 得分为选中格子数量的平方
}

// 消除相邻同色格子
function removeSelected() {
  var selected = $('.game-board div.selected');
  var color = selected.first().data('color');
  var score = calculateScore(selected);

  selected.fadeOut(500, function() { // 渐隐消除选中格子
    $(this).remove();
  });

  $('#score').text(function(index, text) { // 更新得分
    return parseInt(text) + score;
  });
}

// 选中相邻同色格子
function selectSameColor() {
  var selected = $(this).addClass('selected');
  var color = selected.data('color');

  // 递归查找相邻同色格子
  var left = selected.prev();
  if (left.length && left.data('color') === color && !left.hasClass('selected')) {
    selectSameColor.call(left);
  }

  var right = selected.next();
  if (right.length && right.data('color') === color && !right.hasClass('selected')) {
    selectSameColor.call(right);
  }

  var top = selected.parent().prev().children().eq(selected.index());
  if (top.length && top.data('color') === color && !top.hasClass('selected')) {
    selectSameColor.call(top);
  }

  var bottom = selected.parent().next().children().eq(selected.index());
  if (bottom.length && bottom.data('color') === color && !bottom.hasClass('selected')) {
    selectSameColor.call(bottom);
  }
}

$(function() {
  initGame();

  $('#new-game').on('click', function() { // 点击新游戏按钮重新开始游戏
    initGame();
  });

  $('.game-board').on('click', 'div', function() { // 点击格子选中相邻同色格子
    if ($(this).hasClass('selected')) {
      removeSelected();
    } else {
      $('.game-board div').removeClass('selected');
      selectSameColor.call(this);
      if ($('.game-board div.selected').length > 1) {
        removeSelected();
      }
    }
  });
});

这个代码示例只是一个简单的实现，还有很多细节可以优化和改进。如果你想要更加完整和复杂的消消乐游戏，建议使用专业的游戏引擎和框架进行开发。