使用 react-jigsaw-puzzle 包拼图

简介：拼图是在漫长的一天后在家放松的好方法。在搜索、寻找、组装并最终看到拼图场景融合在一起的同时，令人兴奋。但更令人着迷的是设计自己的拼图游戏是多么容易。本文将向您展示如何使用 react-jigsaw-puzzle 包逐步制作拼图游戏。

React 拼图模块： react-jigsaw-puzzle包为拼图提供了一个易于使用的组件。该工具具有调整大小功能以及无需先平铺即可输入任何图像 URL 的能力。我们可以为拼图设置一些属性，例如图像源，我们可以指定它可以具有的行数和列数。默认情况下，它有三行四列。当谜题解决后，我们可以指定一个函数来处理它。

该包还提供了允许我们覆盖默认样式的类。这个包包括以下样式类：

• .jigsaw-puzzle：包含拼图的容器。
• .jigsaw-puzzle__piece：拼图的一部分。
• .jigsaw-puzzle__piece-solved：拼图在正确的位置。
• .jigsaw-puzzle__piece–dragging：正在拖动的拼图。

方法：我们将使用 react-jigsaw-puzzle 包创建一个由 3 行和 3 列组成的拼图。您可以使用您选择的任何图像，而不必担心将其分解成图块。我们将使用 jigsaw-puzzle CSS 类设置拼图容器的样式。通过使用 useState 钩子，如果拼图解决，我们将显示祝贺文本。按照以下步骤创建您自己的拼图。

创建 React 应用程序并安装模块：

第 1 步：创建一个项目目录，前往终端，并使用以下命令创建一个名为“jigsaw-puzzle”的 React 应用程序：

npx create-react-app jigsaw-puzzle

第 2 步：创建 jigsaw-puzzle 应用程序后，使用以下命令切换到新文件夹 jigsaw-puzzle：

cd jigsaw-puzzle

第 3 步：创建 React 应用程序后，使用以下命令安装 react-jigsaw-puzzle 包：

npm install react-jigsaw-puzzle

第 4 步：修改您的项目结构。目录结构目前看起来像这样。

默认项目目录

我们将修改文件夹并保留该项目所需的文件。创建一个puzzle.css 文件来为我们的组件设置样式。现在，确保你的文件结构看起来像这样

最终项目目录结构。

第 5 步：在您的 index.html 文件中添加代码。在您的 index.html 文件中包含以下代码，该文件位于项目目录的公共文件夹中。

index.html

第 6 步：在 App.js 文件中制作拼图组件。

首先，我们将从 react-jigsaw-puzzle 包中导入 jigsawPuzzle 组件以及内置的 CSS 文件以在我们的项目中使用。

import { JigsawPuzzle } from 'react-jigsaw-puzzle/lib'
import 'react-jigsaw-puzzle/lib/jigsaw-puzzle.css'

然后我们将添加一个自定义 CSS 文件来覆盖一些默认样式。

在 jigsawPuzzle 组件中，我们将指定图像源。您可以使用您选择的任何图像。然后我们将行和列设置为 3，以制作 3*3 的拼图。我们将在 onSolved 方法中定义一个函数，一旦成功解决难题就会调用该函数。一旦这些片段被解开，一条祝贺消息将使用 useState 钩子替换标题。最后，我们将介绍一个类来为我们的容器设置样式。

将以下代码添加到您的 app.js 文件中。

应用程序.js

import React, { useState } from "react";
import "./App.css";
import "./puzzle.css";
import { JigsawPuzzle } from "react-jigsaw-puzzle/lib";
import "react-jigsaw-puzzle/lib/jigsaw-puzzle.css";
import img from "./gfgg.png";
  
function App() {
    const [text, setText] = useState("Unpuzzle the pieces!!");
      
    const set = () => {
        setText("Congratulations!!");
    };
      
    return (
        <>
            
{text}
            
        
    );
}
  
export default App;

第 7 步：让我们设置标题和拼图组件的样式。在您的拼图.css 文件中添加以下代码。

拼图.css

/* for the heading  */
.tag {
    text-align: center;
    color: green;
    margin: 2rem;
}
  
/* for the jigsaw puzzle container */
.jigsaw-puzzle {
    width: 38%;
    height: 38%;
    border: 2px solid black;
    margin: auto;
    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.25);
}

第 8 步：您的 index.js 文件应如下所示。 index.js 文件作为主要入口点，其中 App.js 文件在 DOM 的根 ID 处呈现。

应用程序.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
  
ReactDOM.render(, document.getElementById("root"));

我们的拼图现在完成了，让我们组装起来玩吧。

运行应用程序的步骤：使用以下命令运行应用程序：

npm start 

输出：默认情况下，React 项目将在端口 3000 上运行。您可以在浏览器上通过localhost:3000访问它。这就是我们的项目的外观。

我们的谜题

让我们拖动碎片来解决这个难题。

拼图应用程序

拼图块组装好后，会出现祝贺信息。

解决难题