基于jquery实现九宫格拼图小游戏

感谢您的询问。以下是基于 jQuery 实现九宫格拼图小游戏的完整攻略：

一、准备工作

创建 HTML 页面，并在页面中引入 jQuery 库。
在 HTML 页面中添加一个九宫格拼图小游戏的容器，例如：

<div id="game"></div>

在 CSS 文件中为九宫格容器添加样式，包括宽度、高度、边框等，并将每个拼图块设置为等宽、等高的正方形。

二、生成拼图块

在 JavaScript 文件中定义一个数组，用来存放九个拼图块的原始位置、当前位置和背景图片。

var blocks = [
  { x: 0, y: 0, left: 0, top: 0, bg: 'url(1.jpg) -0px -0px' },
  { x: 1, y: 0, left: 100, top: 0, bg: 'url(1.jpg) -100px -0px' },
  { x: 2, y: 0, left: 200, top: 0, bg: 'url(1.jpg) -200px -0px' },
  { x: 0, y: 1, left: 0, top: 100, bg: 'url(1.jpg) -0px -100px' },
  { x: 1, y: 1, left: 100, top: 100, bg: 'url(1.jpg) -100px -100px' },
  { x: 2, y: 1, left: 200, top: 100, bg: 'url(1.jpg) -200px -100px' },
  { x: 0, y: 2, left: 0, top: 200, bg: 'url(1.jpg) -0px -200px' },
  { x: 1, y: 2, left: 100, top: 200, bg: 'url(1.jpg) -100px -200px' },
  { x: 2, y: 2, left: 200, top: 200, bg: '' },
];

在 JavaScript 文件中定义一个函数，用来将拼图块按照数组中的数据生成到九宫格容器中。

function createBlocks() {
  for (var i = 0; i < blocks.length; i++) {
    var block = $('<div class="block"></div>');
    block.css({
      left: blocks[i].left + 'px',
      top: blocks[i].top + 'px',
      background: blocks[i].bg,
    });
    block.data('x', blocks[i].x);
    block.data('y', blocks[i].y);
    $('#game').append(block);
  }
}

在 JavaScript 文件中调用 createBlocks() 函数，生成拼图块并显示在九宫格容器中。

三、移动拼图块

在 JavaScript 文件中定义一个函数，用来移动拼图块，并更新拼图块的位置。

function moveBlock(block, x, y) {
  block.animate(
    {
      left: x * 100 + 'px',
      top: y * 100 + 'px',
    },
    200
  );
  block.data('x', x);
  block.data('y', y);
}

在 JavaScript 文件中为每个拼图块添加点击事件，当点击拼图块时，判断该拼图块是否可以移动（即是否与空白块相邻），如果可以移动，则调用 moveBlock() 函数，移动该拼图块。

$('.block').click(function () {
  var x = $(this).data('x');
  var y = $(this).data('y');
  var emptyBlock = $('.block').filter(function () {
    return $(this).data('x') == x - 1 && $(this).data('y') == y && $(this).css('background-image') == '';
  });
  if (emptyBlock.length == 0) {
    emptyBlock = $('.block').filter(function () {
      return $(this).data('x') == x + 1 && $(this).data('y') == y && $(this).css('background-image') == '';
    });
  }
  if (emptyBlock.length == 0) {
    emptyBlock = $('.block').filter(function () {
      return $(this).data('x') == x && $(this).data('y') == y - 1 && $(this).css('background-image') == '';
    });
  }
  if (emptyBlock.length == 0) {
    emptyBlock = $('.block').filter(function () {
      return $(this).data('x') == x && $(this).data('y') == y + 1 && $(this).css('background-image') == '';
    });
  }
  if (emptyBlock.length != 0) {
    moveBlock($(this), emptyBlock.data('x'), emptyBlock.data('y'));
  }
});

四、判断游戏结束

在 JavaScript 文件中定义一个函数，用来判断是否完成拼图游戏。

function checkFinish() {
  for (var i = 0; i < blocks.length; i++) {
    var block = $('.block').filter(function () {
      return $(this).data('x') == blocks[i].x && $(this).data('y') == blocks[i].y;
    });
    if (block.css('background-image') != blocks[i].bg) {
      return false;
    }
  }
  return true;
}

在 JavaScript 文件中为每个拼图块添加一个 load 事件，当所有拼图块加载完成后，绑定一个定时器，每隔一定时间检测一次游戏是否完成。

var timerId = setInterval(function () {
  if (checkFinish()) {
    clearInterval(timerId);
    alert('Congratulations!');
  }
}, 1000);

以上是基于 jQuery 实现九宫格拼图小游戏的完整攻略。下面给出两个示例说明：

示例一

以下是一个简单的九宫格拼图小游戏，完成拼图后会弹出一个提示框。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>九宫格拼图小游戏</title>
    <style>
      #game {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 0 auto;
        position: relative;
      }
      .block {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        position: absolute;
        background-repeat: no-repeat;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="game"></div>
  </body>
</html>

$(function () {
  createBlocks();
  $('.block').click(function () {
    var x = $(this).data('x');
    var y = $(this).data('y');
    var emptyBlock = $('.block').filter(function () {
      return $(this).data('x') == x - 1 && $(this).data('y') == y && $(this).css('background-image') == '';
    });
    if (emptyBlock.length == 0) {
      emptyBlock = $('.block').filter(function () {
        return $(this).data('x') == x + 1 && $(this).data('y') == y && $(this).css('background-image') == '';
      });
    }
    if (emptyBlock.length == 0) {
      emptyBlock = $('.block').filter(function () {
        return $(this).data('x') == x && $(this).data('y') == y - 1 && $(this).css('background-image') == '';
      });
    }
    if (emptyBlock.length == 0) {
      emptyBlock = $('.block').filter(function () {
        return $(this).data('x') == x && $(this).data('y') == y + 1 && $(this).css('background-image') == '';
      });
    }
    if (emptyBlock.length != 0) {
      moveBlock($(this), emptyBlock.data('x'), emptyBlock.data('y'));
    }
  });
  var timerId = setInterval(function () {
    if (checkFinish()) {
      clearInterval(timerId);
      alert('Congratulations!');
    }
  }, 1000);
});

示例二

以下是一个带有随机排列和重设按钮的九宫格拼图小游戏，可以点击重设按钮重新开始游戏。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>九宫格拼图小游戏</title>
    <style>
      #game {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 0 auto;
        position: relative;
      }
      .block {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        position: absolute;
        background-repeat: no-repeat;
      }
      #reset {
        display: block;
        margin: 20px auto;
        font-size: 20px;
        cursor: pointer;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="game"></div>
    <button id="reset">重设</button>
  </body>
</html>

$(function () {
  var originalBlocks = [
    { x: 0, y: 0, left: 0, top: 0, bg: 'url(1.jpg) -0px -0px' },
    { x: 1, y: 0, left: 100, top: 0, bg: 'url(1.jpg) -100px -0px' },
    { x: 2, y: 0, left: 200, top: 0, bg: 'url(1.jpg) -200px -0px' },
    { x: 0, y: 1, left: 0, top: 100, bg: 'url(1.jpg) -0px -100px' },
    { x: 1, y: 1, left: 100, top: 100, bg: 'url(1.jpg) -100px -100px' },
    { x: 2, y: 1, left: 200, top: 100, bg: 'url(1.jpg) -200px -100px' },
    { x: 0, y: 2, left: 0, top: 200, bg: 'url(1.jpg) -0px -200px' },
    { x: 1, y: 2, left: 100, top: 200, bg: 'url(1.jpg) -100px -200px' },
    { x: 2, y: 2, left: 200, top: 200, bg: '' },
  ];
  var blocks = [];
  function generateBlocks() {
    blocks = [];
    var indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    while (indexes.length > 0) {
      var index = Math.floor(Math.random() * indexes.length);
      blocks.push(originalBlocks[indexes[index]]);
      indexes.splice(index, 1);
    }
  }
  function resetBlocks() {
    generateBlocks();
    for (var i = 0; i < blocks.length; i++) {
      var block = $('.block').eq(i);
      block.css({
        left: blocks[i].left + 'px',
        top: blocks[i].top + 'px',
        background: blocks[i].bg,
      });
      block.data('x', blocks[i].x);
      block.data('y', blocks[i].y);
    }
  }
  function init() {
    createBlocks();
    $('#reset').click(resetBlocks);
    $('.block').click(function () {
      var x = $(this).data('x');
      var y = $(this).data('y');
      var emptyBlock = $('.block').filter(function () {
        return $(this).data('x') == x - 1 && $(this).data('y') == y && $(this).css('background-image') == '';
      });
      if (emptyBlock.length == 0) {
        emptyBlock = $('.block').filter(function () {
          return $(this).data('x') == x + 1 && $(this).data('y') == y && $(this).css('background-image') == '';
        });
      }
      if (emptyBlock.length == 0) {
        emptyBlock = $('.block').filter(function () {
          return $(this).data('x') == x && $(this).data('y') == y - 1 && $(this).css('background-image') == '';
        });
      }
      if (emptyBlock.length == 0) {
        emptyBlock = $('.block').filter(function () {
          return $(this).data('x') == x && $(this).data('y') == y + 1 && $(this).css('background-image') == '';
        });
      }
      if (emptyBlock.length != 0) {
        moveBlock($(this), emptyBlock.data('x'), emptyBlock.data('y'));
      }
    });
    resetBlocks();
    var timerId = setInterval(function () {
      if (checkFinish()) {
        clearInterval(timerId);
        alert('Congratulations!');
      }
    }, 1000);
  }
  init();
});

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery实现九宫格拼图小游戏 - Python技术站

基于jquery实现九宫格拼图小游戏

一、准备工作

二、生成拼图块

三、移动拼图块

四、判断游戏结束

示例一

示例二

相关文章