炫酷拼图小游戏，前端技术打造，代码奉上！

2023-09-23 22:48:08

HTML篇：搭建游戏框架

拼图游戏的骨架是由HTML元素构建的，包括游戏区域、拼图块容器和控制按钮等。这些元素共同构成游戏的整体结构，为后续的样式和脚本提供基础。

<!DOCTYPE html>
<html>
  <head>
    
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="game-area">
      <div id="puzzle-pieces"></div>
      <div id="control-buttons"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS篇：美化游戏界面

CSS负责美化游戏界面，包括背景颜色、字体样式、按钮样式等。通过CSS的点缀，游戏界面变得更加美观动人，吸引玩家的目光。

/* 游戏区域样式 */
#game-area {
  width: 600px;
  height: 600px;
  background-color: #f0f0f0;
  margin: 0 auto;
}

/* 拼图块容器样式 */
#puzzle-pieces {
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

/* 控制按钮样式 */
#control-buttons {
  width: 200px;
  height: 100px;
  margin: 0 auto;
}

JavaScript篇：实现游戏逻辑

JavaScript是游戏的核心，负责实现拼图块的拖动、拼合、计时以及游戏结束判定等功能。它是游戏的灵魂，让玩家真正体验到拼图的乐趣。

拼图块对象

function PuzzlePiece(id, src, x, y) {
  this.id = id;
  this.src = src;
  this.x = x;
  this.y = y;

  this.element = document.createElement("div");
  this.element.className = "puzzle-piece";
  this.element.style.backgroundImage = `url(${this.src})`;
  this.element.style.backgroundPosition = `${this.x}px ${this.y}px`;
  this.element.style.left = `${this.x}px`;
  this.element.style.top = `${this.y}px`;

  // 绑定拖拽事件
  this.element.addEventListener("mousedown", this.startDrag.bind(this));
}

拼图块拖拽事件处理函数

PuzzlePiece.prototype.startDrag = function (e) {
  // 记录鼠标按下时拼图块的位置
  this.startX = e.clientX;
  this.startY = e.clientY;

  // 绑定鼠标移动和鼠标松开事件
  document.addEventListener("mousemove", this.drag.bind(this));
  document.addEventListener("mouseup", this.stopDrag.bind(this));
};

拼图块拖拽中事件处理函数

PuzzlePiece.prototype.drag = function (e) {
  // 计算鼠标移动的距离
  const dx = e.clientX - this.startX;
  const dy = e.clientY - this.startY;

  // 更新拼图块的位置
  this.x += dx;
  this.y += dy;
  this.element.style.left = `${this.x}px`;
  this.element.style.top = `${this.y}px`;

  // 检查拼图块是否拼合成功
  this.checkPuzzle();
};

拼图块拖拽结束事件处理函数

PuzzlePiece.prototype.stopDrag = function () {
  // 移除鼠标移动和鼠标松开事件
  document.removeEventListener("mousemove", this.drag);
  document.removeEventListener("mouseup", this.stopDrag);
};

检查拼图块是否拼合成功

PuzzlePiece.prototype.checkPuzzle = function () {
  // 获取拼图块的边界
  const rect = this.element.getBoundingClientRect();

  // 检查拼图块是否在目标区域内
  const targetArea = document.getElementById("target-area");
  const targetRect = targetArea.getBoundingClientRect();
  if (rect.left >= targetRect.left && rect.right <= targetRect.right && rect.top >= targetRect.top && rect.bottom <= targetRect.bottom) {
    // 拼图块拼合成功，将拼图块移动到目标区域
    targetArea.appendChild(this.element);

    // 检查是否所有拼图块都已拼合成功
    const allPieces = document.querySelectorAll(".puzzle-piece");
    const allPiecesInTargetArea = document.querySelectorAll("#target-area .puzzle-piece");
    if (allPieces.length === allPiecesInTargetArea.length) {
      // 所有拼图块都已拼合成功，游戏结束
      alert("恭喜你，拼图游戏完成！");
    }
  }
};

初始化游戏

function initGame() {
  // 创建拼图块对象
  const puzzlePieces = [];
  for (let i = 0; i < 9; i++) {
    const id = `puzzle-piece-${i}`;
    const src = `images/puzzle${i+1}.jpg`;
    const x = i % 3 * 100;
    const y = Math.floor(i / 3) * 100;
    const puzzlePiece = new PuzzlePiece(id, src, x, y);
    puzzlePieces.push(puzzlePiece);
  }

  // 将拼图块随机打乱
  puzzlePieces.sort(() => Math.random() - 0.5);

  // 将拼图块添加到游戏区域
  const puzzlePiecesContainer = document.getElementById("puzzle-pieces");
  puzzlePieces.forEach((piece) => {
    puzzlePiecesContainer.appendChild(piece.element);
  });

  // 创建目标区域
  const targetArea = document.createElement("div");
  targetArea.id = "target-area";
  targetArea.style.width = "400px";
  targetArea.style.height = "400px";
  targetArea.style.backgroundColor = "#fff";
  targetArea.style.margin = "0 auto";
  document.body.appendChild(targetArea);
}

// 窗口加载完成后初始化游戏
window.addEventListener("load", initGame);