用jquery写一个2048数字合并游戏

2023-07-20 10:01 jQuery

下面是一个使用 jQuery 编写的简单的 2048 数字合并游戏的示例：

HTML 代码：

html
```
<!DOCTYPE html>
<html>
<head>
  <title>2048 Game</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="game-container">
    <div id="score">Score: <span id="score-value">0</span></div>
    <div id="grid-container"></div>
    <button id="new-game-btn">New Game</button>
  </div>

css
```
#game-container {
  text-align: center;
}

#score {
  font-size: 24px;
  margin-bottom: 20px;
}

#grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 340px;
  height: 340px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.cell {
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 24px;
  line-height: 80px;
  font-weight: bold;
}

#new-game-btn {
  font-size: 20px;
  padding: 10px 20px;
  margin-top: 20px;
}
```
JavaScript 代码（script.js）：

javascript
```
$(document).ready(function() {
  var score = 0;
  var grid = [];

// 创建游戏网格
  function createGrid() {
    var gridContainer = $('#grid-container');
    gridContainer.empty();
    for (var i = 0; i < 4; i++) {
      for (var j = 0; j < 4; j++) {
        var cell = $('<div class="cell" id="cell-' + i + '-' + j + '"></div>');
        gridContainer.append(cell);
        grid.push(0);
      }
    }
  }

// 随机生成新的数字
  function generateNewNumber() {
    var availableCells = [];
    for (var i = 0; i < grid.length; i++) {
      if (grid[i] === 0) {
        availableCells.push(i);
      }
    }

if (availableCells.length === 0) {
      return;
    }

var randomIndex = Math.floor(Math.random() * availableCells.length);
    var randomNumber = Math.random() < 0.9 ? 2 : 4;
    var cellIndex = availableCells[randomIndex];

grid[cellIndex] = randomNumber;
    $('#cell-' + Math.floor(cellIndex / 4) + '-' + (cellIndex % 4)).text(randomNumber);
  }

// 更新分数
  function updateScore(value) {
    score += value;
    $('#score-value').text(score);
  }

// 移动格子
  function moveGrid(direction) {
    // 实现移动逻辑
    // ...

// 生成新数字
    generateNewNumber();
  }

// 处理按键事件
  $(document).keydown(function(e) {
    if (e.keyCode === 37) { // 左箭头键
      moveGrid('left');
    } else if (e.keyCode === 38) { // 上箭头键
      moveGrid('up');
    } else if (e.keyCode === 39) { // 右箭头键
      moveGrid('right');
    } else if (e.keyCode === 40) { // 下箭头键
      moveGrid('down');
    }
  });

// 开始新游戏
  $('#new-game-btn').click(function() {
    score = 0;
    grid = [];
    createGrid();
    generateNewNumber();
    generateNewNumber();
    $('#score-value').text(score);
  });

// 初始化游戏
  createGrid();
  generateNewNumber();
  generateNewNumber();
});
```
请注意，这只是一个简化的示例，实际上，2048 游戏的逻辑和移动算法会更加复杂。你可以根据需要自行修改和扩展代码来完善游戏功能和体验。