正文

揭秘：从零开始，学会用jQuery打造2048小游戏，附完整源码教程

/0 浏览量
0518

了解2048小游戏

2048是一款简单的数字拼图游戏，玩家通过上下左右滑动来组合相同的数字，目标是拼出2048这个数字。这款游戏因其简单易学、玩法丰富而受到广泛欢迎。现在，我们将使用jQuery来打造这个小游戏。

准备工作

在开始之前，你需要以下准备工作：

  1. HTML结构：一个包含16个方格的容器，每个方格代表一个数字或空白。
  2. CSS样式：为方格、数字和游戏界面添加样式。
  3. JavaScript逻辑：使用jQuery编写游戏的逻辑，包括随机生成数字、滑动操作、合并数字、判断游戏结束等。

步骤一：HTML结构

<div id="game-board">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

步骤二：CSS样式

#game-board {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
}

.tile {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
}

/* 其他样式 */

步骤三：JavaScript逻辑

初始化游戏

$(document).ready(function() {
  // 初始化游戏
  initGame();
});

function initGame() {
  // 清空游戏板
  $('#game-board').empty();
  // 生成初始数字
  generateRandomTile();
  generateRandomTile();
}

生成随机数字

function generateRandomTile() {
  var tile = $('<div class="tile"></div>');
  var tileValue = Math.random() < 0.9 ? Math.floor(Math.random() * 10) : 4;
  tile.html(tileValue);
  var emptyTile = getRandomEmptyTile();
  $(emptyTile).append(tile);
}

获取随机空方格

function getRandomEmptyTile() {
  var tiles = $('#game-board .tile');
  var emptyTiles = [];
  tiles.each(function() {
    if ($(this).html() === '') {
      emptyTiles.push(this);
    }
  });
  return $(emptyTiles[Math.floor(Math.random() * emptyTiles.length)]);
}

添加滑动事件

$(document).on('keydown', function(e) {
  var direction = '';
  switch (e.keyCode) {
    case 37: // 向左
      direction = 'left';
      break;
    case 38: // 向上
      direction = 'up';
      break;
    case 39: // 向右
      direction = 'right';
      break;
    case 40: // 向下
      direction = 'down';
      break;
  }
  if (direction !== '') {
    slideTiles(direction);
    generateRandomTile();
    checkGameEnd();
  }
});

滑动方格

function slideTiles(direction) {
  var tiles = $('#game-board .tile');
  var tileValues = [];
  var newRow = [];
  var newCol = [];
  var moved = false;

  tiles.each(function() {
    tileValues.push(parseInt($(this).html()));
  });

  switch (direction) {
    case 'left':
      newRow = tileValues.map(function(value, index) {
        if (index % 4 === 0) {
          return [value];
        }
        newRow[newRow.length - 1].push(value);
        return newRow;
      }).flat();
      break;
    case 'up':
      newCol = tileValues.map(function(value, index) {
        return [value];
      }).flat();
      break;
    case 'right':
      newRow = tileValues.map(function(value, index) {
        if (index % 4 === 0) {
          return [value];
        }
        newRow[newRow.length - 1].push(value);
        return newRow;
      }).flat().reverse();
      break;
    case 'down':
      newCol = tileValues.map(function(value, index) {
        return [value];
      }).flat().reverse();
      break;
  }

  // 合并数字
  newRow = mergeNumbers(newRow);
  newCol = mergeNumbers(newCol);

  // 重置游戏板
  tiles.empty();
  for (var i = 0; i < newRow.length; i++) {
    for (var j = 0; j < newRow[i].length; j++) {
      var tile = $('<div class="tile"></div>');
      tile.html(newRow[i][j]);
      $('#game-board').append(tile);
    }
  }
}

合并数字

function mergeNumbers(numbers) {
  for (var i = 0; i < numbers.length; i++) {
    for (var j = 0; j < numbers.length; j++) {
      if (numbers[i][j] !== 0 && numbers[i][j] === numbers[i][j + 1]) {
        numbers[i][j] *= 2;
        numbers[i][j + 1] = 0;
      }
    }
  }
  return numbers;
}

判断游戏结束

function checkGameEnd() {
  var tiles = $('#game-board .tile');
  var tileValues = [];
  tiles.each(function() {
    tileValues.push(parseInt($(this).html()));
  });

  // 检查是否有空方格
  for (var i = 0; i < tileValues.length; i++) {
    if (tileValues[i] === 0) {
      return;
    }
  }

  // 检查是否有移动的可能
  for (var i = 0; i < tileValues.length; i++) {
    if (tileValues[i] === tileValues[i + 1]) {
      return;
    }
  }

  // 游戏结束
  alert('Game Over!');
}

总结

通过以上步骤，我们使用jQuery成功打造了一个2048小游戏。这个游戏不仅可以让我们在娱乐的同时锻炼大脑，还可以加深我们对JavaScript和jQuery的理解。希望这个教程能够帮助你入门并进一步提升你的技能。

-- 展开阅读全文 --