扫雷小游戏的制作方法

2023-09-10 13:52:41

现在让我们着手制作一个有趣的扫雷小游戏。本教程将带领您逐步实现这个项目。

首先，我们需要创建一个新的React项目。您可以使用命令行或您喜欢的代码编辑器来完成这一步。在终端输入以下命令：

npx create-react-app扫雷小游戏

然后，您需要安装必要的依赖项。在终端中输入以下命令：

npm install typescript react-router-dom

接着，我们需要创建一个新的Typescript文件来定义游戏逻辑。在src文件夹中创建一个名为game.ts的文件，并在其中输入以下代码：

class MineSweeper {
    private rows: number;
    private columns: number;
    private mineNumber: number;
    private grid: Array<Array<boolean>>;

    constructor(rows: number, columns: number, mineNumber: number) {
        this.rows = rows;
        this.columns = columns;
        this.mineNumber = mineNumber;
        this.grid = Array(rows).fill(Array(columns).fill(false));
        this.init();
    }

    private init() {
        // 随机放置雷
        for (let i = 0; i < this.mineNumber; i++) {
            let row = Math.floor(Math.random() * this.rows);
            let column = Math.floor(Math.random() * this.columns);
            while (this.grid[row][column]) {
                row = Math.floor(Math.random() * this.rows);
                column = Math.floor(Math.random() * this.columns);
            }
            this.grid[row][column] = true;
        }

        // 计算每个单元格周围的雷数
        for (let i = 0; i < this.rows; i++) {
            for (let j = 0; j < this.columns; j++) {
                let mineCount = 0;
                for (let x = i - 1; x <= i + 1; x++) {
                    for (let y = j - 1; y <= j + 1; y++) {
                        if (x >= 0 && x < this.rows && y >= 0 && y < this.columns && this.grid[x][y]) {
                            mineCount++;
                        }
                    }
                }
                if (!this.grid[i][j]) {
                    this.grid[i][j] = mineCount;
                }
            }
        }
    }

    public getGrid() {
        return this.grid;
    }
}

接下来，我们需要创建一个新的React组件来显示游戏界面。在src文件夹中创建一个名为MineSweeper.tsx的文件，并在其中输入以下代码：

import React, { useState } from "react";
import "./MineSweeper.css";
import { MineSweeper } from "./game";

const MineSweeper = () => {
    const [rows, setRows] = useState(10);
    const [columns, setColumns] = useState(10);
    const [mineNumber, setMineNumber] = useState(10);
    const [grid, setGrid] = useState([]);

    const initGame = () => {
        const game = new MineSweeper(rows, columns, mineNumber);
        setGrid(game.getGrid());
    };

    return (
        <div className="mine-sweeper">
            <div className="settings">
                <label htmlFor="rows">Rows:</label>
                <input type="number" id="rows" value={rows} onChange={(e) => setRows(parseInt(e.target.value))} />
                <label htmlFor="columns">Columns:</label>
                <input type="number" id="columns" value={columns} onChange={(e) => setColumns(parseInt(e.target.value))} />
                <label htmlFor="mineNumber">Mine Number:</label>
                <input type="number" id="mineNumber" value={mineNumber} onChange={(e) => setMineNumber(parseInt(e.target.value))} />
                <button onClick={initGame}>Start Game</button>
            </div>
            <div className="game-board">
                {grid.map((row, i) => (
                    <div key={i} className="row">
                        {row.map((cell, j) => (
                            <div key={j} className="cell">
                                {cell}
                            </div>
                        ))}
                    </div>
                ))}
            </div>
        </div>
    );
};

export default MineSweeper;

最后，我们需要在src/index.js文件中导入MineSweeper组件并将其渲染到根元素中。

import React from "react";
import ReactDOM from "react-dom";
import MineSweeper from "./MineSweeper";

ReactDOM.render(<MineSweeper />, document.getElementById("root"));