トレーニング | 三目並べ

2 人で遊ぶ三目並べを作ります。

1. 格子を表示する

# include <Siv3D.hpp>

class GameBoard
{
private:

    // 格子を描く
    void drawGridLines() const
    {
        // 線を引く
        for (auto i : { 1, 2 })
        {
            Line(i * CellSize, 0, i * CellSize, 3 * CellSize)
                .draw(4, ColorF(0.25));

            Line(0, i * CellSize, 3 * CellSize, i * CellSize)
                .draw(4, ColorF(0.25));
        }
    }

public:

    // セルの大きさ
    static constexpr int32 CellSize = 150;

    // 描画
    void draw() const
    {
        drawGridLines();
    }
};

void Main()
{
    // 背景色
    Scene::SetBackground(ColorF(0.8, 1.0, 0.9));

    GameBoard gameBoard;

    while (System::Update())
    {
        gameBoard.draw();
    }
}

2. マウスオーバーしたセルを強調表示

# include <Siv3D.hpp>

class GameBoard
{
private:

    // 格子を描く
    void drawGridLines() const
    {
        // 線を引く
        for (auto i : { 1, 2 })
        {
            Line(i * CellSize, 0, i * CellSize, 3 * CellSize)
                .draw(4, ColorF(0.25));

            Line(0, i * CellSize, 3 * CellSize, i * CellSize)
                .draw(4, ColorF(0.25));
        }
    }

    // セルを描く
    void drawCells() const
    {
        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルがマウスオーバーされたら
            if (cell.mouseOver())
            {
                // カーソルを手のアイコンに
                Cursor::RequestStyle(CursorStyle::Hand);

                // セルの上に半透明の白を描く
                cell.stretched(-2).draw(ColorF(1.0, 0.6));
            }
        }
    }

public:

    // セルの大きさ
    static constexpr int32 CellSize = 150;

    // 描画
    void draw() const
    {
        drawGridLines();

        drawCells();
    }
};

void Main()
{
    // 背景色
    Scene::SetBackground(ColorF(0.8, 1.0, 0.9));

    GameBoard gameBoard;

    while (System::Update())
    {
        gameBoard.draw();
    }
}

3. 〇 と × を表示

セルに書き込まれたマークを Grid<int32> で管理し、書き込まれたセルはマークを表示します。

# include <Siv3D.hpp>

class GameBoard
{
private:

    // 3x3 の二次元配列 (初期値は全要素 0)
    Grid<int32> m_grid = Grid<int32>(3, 3);

    // 格子を描く
    void drawGridLines() const
    {
        // 線を引く
        for (auto i : { 1, 2 })
        {
            Line(i * CellSize, 0, i * CellSize, 3 * CellSize)
                .draw(4, ColorF(0.25));

            Line(0, i * CellSize, 3 * CellSize, i * CellSize)
                .draw(4, ColorF(0.25));
        }
    }

    // セルを描く
    void drawCells() const
    {
        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // X マークだったら
            if (mark == X_Mark)
            {
                // X マークを描く
                Shape2D::Cross(CellSize * 0.4, 10, cell.center())
                    .draw(ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }
            else if (mark == O_Mark) // O マークだったら
            {
                // 〇 マークを描く
                Circle(cell.center(), CellSize * 0.4 - 10)
                    .drawFrame(10, 0, ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }

            // セルがマウスオーバーされたら
            if (cell.mouseOver())
            {
                // カーソルを手のアイコンに
                Cursor::RequestStyle(CursorStyle::Hand);

                // セルの上に半透明の白を描く
                cell.stretched(-2).draw(ColorF(1.0, 0.6));
            }
        }
    }

public:

    // セルの大きさ
    static constexpr int32 CellSize = 150;

    // O マークの値
    static constexpr int32 O_Mark = 1;

    // X マークの値
    static constexpr int32 X_Mark = 2;

    GameBoard()
    {
        // 表示テスト用にマークを書き込む
        m_grid[{0, 0}] = O_Mark;
        m_grid[{1, 0}] = X_Mark;
    }

    // 描画
    void draw() const
    {
        drawGridLines();

        drawCells();
    }
};

void Main()
{
    // 背景色
    Scene::SetBackground(ColorF(0.8, 1.0, 0.9));

    GameBoard gameBoard;

    while (System::Update())
    {
        gameBoard.draw();
    }
}

4. クリックでマークを置けるようにする

空白のセルをクリックしたときに、交互に 〇 と × のマークを書き込めるようにします。

# include <Siv3D.hpp>

class GameBoard
{
private:

    // 3x3 の二次元配列 (初期値は全要素 0)
    Grid<int32> m_grid = Grid<int32>(3, 3);

    // これから置くマーク
    int32 m_currentMark = O_Mark;

    // 格子を描く
    void drawGridLines() const
    {
        // 線を引く
        for (auto i : { 1, 2 })
        {
            Line(i * CellSize, 0, i * CellSize, 3 * CellSize)
                .draw(4, ColorF(0.25));

            Line(0, i * CellSize, 3 * CellSize, i * CellSize)
                .draw(4, ColorF(0.25));
        }
    }

    // セルを描く
    void drawCells() const
    {
        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // X マークだったら
            if (mark == X_Mark)
            {
                // X マークを描く
                Shape2D::Cross(CellSize * 0.4, 10, cell.center())
                    .draw(ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }
            else if (mark == O_Mark) // O マークだったら
            {
                // 〇 マークを描く
                Circle(cell.center(), CellSize * 0.4 - 10)
                    .drawFrame(10, 0, ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }

            // セルがマウスオーバーされたら
            if (cell.mouseOver())
            {
                // カーソルを手のアイコンに
                Cursor::RequestStyle(CursorStyle::Hand);

                // セルの上に半透明の白を描く
                cell.stretched(-2).draw(ColorF(1.0, 0.6));
            }
        }
    }

public:

    // セルの大きさ
    static constexpr int32 CellSize = 150;

    // O マークの値
    static constexpr int32 O_Mark = 1;

    // X マークの値
    static constexpr int32 X_Mark = 2;

    void update()
    {
        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // セルが空白で、なおかつクリックされたら
            if ((mark == 0) && cell.leftClicked())
            {
                // セルに現在のマークを書き込む
                m_grid[p] = m_currentMark;

                // 現在のマークを入れ替える
                m_currentMark = ((m_currentMark == O_Mark) ? X_Mark : O_Mark);
            }
        }
    }

    // 描画
    void draw() const
    {
        drawGridLines();

        drawCells();
    }
};

void Main()
{
    // 背景色
    Scene::SetBackground(ColorF(0.8, 1.0, 0.9));

    GameBoard gameBoard;

    while (System::Update())
    {
        gameBoard.update();

        gameBoard.draw();
    }
}

5. ゲーム盤を移動させる

Transofrmer2D で、2D 描画座標とマウスカーソル座標をシフトし、ゲームの盤面を画面の中心に移動させます。

# include <Siv3D.hpp>

class GameBoard
{
private:

    // 3x3 の二次元配列 (初期値は全要素 0)
    Grid<int32> m_grid = Grid<int32>(3, 3);

    // これから置くマーク
    int32 m_currentMark = O_Mark;

    // 格子を描く
    void drawGridLines() const
    {
        // 線を引く
        for (auto i : { 1, 2 })
        {
            Line(i * CellSize, 0, i * CellSize, 3 * CellSize)
                .draw(4, ColorF(0.25));

            Line(0, i * CellSize, 3 * CellSize, i * CellSize)
                .draw(4, ColorF(0.25));
        }
    }

    // セルを描く
    void drawCells() const
    {
        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // X マークだったら
            if (mark == X_Mark)
            {
                // X マークを描く
                Shape2D::Cross(CellSize * 0.4, 10, cell.center())
                    .draw(ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }
            else if (mark == O_Mark) // O マークだったら
            {
                // 〇 マークを描く
                Circle(cell.center(), CellSize * 0.4 - 10)
                    .drawFrame(10, 0, ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }

            // セルがマウスオーバーされたら
            if (cell.mouseOver())
            {
                // カーソルを手のアイコンに
                Cursor::RequestStyle(CursorStyle::Hand);

                // セルの上に半透明の白を描く
                cell.stretched(-2).draw(ColorF(1.0, 0.6));
            }
        }
    }

public:

    // セルの大きさ
    static constexpr int32 CellSize = 150;

    // O マークの値
    static constexpr int32 O_Mark = 1;

    // X マークの値
    static constexpr int32 X_Mark = 2;

    void update()
    {
        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // セルが空白で、なおかつクリックされたら
            if ((mark == 0) && cell.leftClicked())
            {
                // セルに現在のマークを書き込む
                m_grid[p] = m_currentMark;

                // 現在のマークを入れ替える
                m_currentMark = ((m_currentMark == O_Mark) ? X_Mark : O_Mark);
            }
        }
    }

    // 描画
    void draw() const
    {
        drawGridLines();

        drawCells();
    }
};

void Main()
{
    // 背景色
    Scene::SetBackground(ColorF(0.8, 1.0, 0.9));

    constexpr Point offset(175, 30);

    GameBoard gameBoard;

    while (System::Update())
    {
        {
            // 2D 描画とマウスカーソル座標を移動
            Transformer2D tr(Mat3x2::Translate(offset), true);

            gameBoard.update();

            gameBoard.draw();
        }
    }
}

6. ゲーム終了判定

残りの空白セルが 0 になるか、マークがつながったらゲームを終了し、つながったラインを表示します。

# include <Siv3D.hpp>

// マークがつながったかを返す関数
bool CheckLine(const Grid<int32>& grid, const Point& cellA, const Point& cellB, const Point& cellC)
{
    const int32 a = grid[cellA];
    const int32 b = grid[cellB];
    const int32 c = grid[cellC];
    return ((a != 0) && a == b && b == c);
}

// マークがつながったラインの一覧を返す関数
Array<std::pair<Point, Point>> CheckLines(const Grid<int32>& grid)
{
    Array<std::pair<Point, Point>> results;

    // 縦 3 列を調べる
    for (auto x : step(3))
    {
        if (CheckLine(grid, Point(x, 0), Point(x, 1), Point(x, 2)))
        {
            results.emplace_back(Point(x, 0), Point(x, 2));
        }
    }

    // 横 3 行を調べる
    for (auto y : step(3))
    {
        if (CheckLine(grid, Point(0, y), Point(1, y), Point(2, y)))
        {
            results.emplace_back(Point(0, y), Point(2, y));
        }
    }

    // 斜め（左上 -> 右下) を調べる
    if (CheckLine(grid, Point(0, 0), Point(1, 1), Point(2, 2)))
    {
        results.emplace_back(Point(0, 0), Point(2, 2));
    }

    // 斜め（右上 -> 左下) を調べる
    if (CheckLine(grid, Point(2, 0), Point(1, 1), Point(0, 2)))
    {
        results.emplace_back(Point(2, 0), Point(0, 2));
    }

    return results;
}

class GameBoard
{
private:

    // 3x3 の二次元配列 (初期値は全要素 0)
    Grid<int32> m_grid = Grid<int32>(3, 3);

    // これから置くマーク
    int32 m_currentMark = O_Mark;

    // ゲーム終了フラグ
    bool m_gameOver = false;

    // 3 つ連続したラインの一覧
    Array<std::pair<Point, Point>> m_lines;

    // 格子を描く
    void drawGridLines() const
    {
        // 線を引く
        for (auto i : { 1, 2 })
        {
            Line(i * CellSize, 0, i * CellSize, 3 * CellSize)
                .draw(4, ColorF(0.25));

            Line(0, i * CellSize, 3 * CellSize, i * CellSize)
                .draw(4, ColorF(0.25));
        }
    }

    // セルを描く
    void drawCells() const
    {
        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // X マークだったら
            if (mark == X_Mark)
            {
                // X マークを描く
                Shape2D::Cross(CellSize * 0.4, 10, cell.center())
                    .draw(ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }
            else if (mark == O_Mark) // O マークだったら
            {
                // 〇 マークを描く
                Circle(cell.center(), CellSize * 0.4 - 10)
                    .drawFrame(10, 0, ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }

            // セルがマウスオーバーされたら
            if (!m_gameOver && cell.mouseOver())
            {
                // カーソルを手のアイコンに
                Cursor::RequestStyle(CursorStyle::Hand);

                // セルの上に半透明の白を描く
                cell.stretched(-2).draw(ColorF(1.0, 0.6));
            }
        }
    }

    // つながったラインを描く
    void drawResults() const
    {
        for (const auto& line : m_lines)
        {
            // つながったラインの始点と終点のセルを取得
            const Rect cellBegin(line.first * CellSize, CellSize);
            const Rect cellEnd(line.second * CellSize, CellSize);

            // 線を引く
            Line(cellBegin.center(), cellEnd.center())
                .stretched(CellSize * 0.45)
                .draw(LineStyle::RoundCap, 5, ColorF(0.6));
        }
    }

public:

    // セルの大きさ
    static constexpr int32 CellSize = 150;

    // O マークの値
    static constexpr int32 O_Mark = 1;

    // X マークの値
    static constexpr int32 X_Mark = 2;

    void update()
    {
        if (m_gameOver)
        {
            return;
        }

        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // セルが空白で、なおかつクリックされたら
            if ((mark == 0) && cell.leftClicked())
            {
                // セルに現在のマークを書き込む
                m_grid[p] = m_currentMark;

                // 現在のマークを入れ替える
                m_currentMark = ((m_currentMark == O_Mark) ? X_Mark : O_Mark);

                // つながったラインを探す
                m_lines = CheckLines(m_grid);

                // 空白セルが 0 になるか、つながったラインが見つかったら
                if (m_grid.count(0) == 0 || m_lines)
                {
                    // ゲーム終了
                    m_gameOver = true;
                }
            }
        }
    }

    // 描画
    void draw() const
    {
        drawGridLines();

        drawCells();

        drawResults();
    }
};

void Main()
{
    // 背景色
    Scene::SetBackground(ColorF(0.8, 1.0, 0.9));

    constexpr Point offset(175, 30);

    GameBoard gameBoard;

    while (System::Update())
    {
        {
            // 2D 描画とマウスカーソル座標を移動
            Transformer2D tr(Mat3x2::Translate(offset), true);

            gameBoard.update();

            gameBoard.draw();
        }
    }
}

7. ゲーム終了後にリセットできるようにする

ゲームが終了すると「Reset」ボタンが現れ、ゲームをリセットできるようにします。

# include <Siv3D.hpp>

// 3 つのマークがつながったかを返す関数
bool CheckLine(const Grid<int32>& grid, const Point& cellA, const Point& cellB, const Point& cellC)
{
    const int32 a = grid[cellA];
    const int32 b = grid[cellB];
    const int32 c = grid[cellC];
    return ((a != 0) && a == b && b == c);
}

// マークがつながったラインの一覧を返す関数
Array<std::pair<Point, Point>> CheckLines(const Grid<int32>& grid)
{
    Array<std::pair<Point, Point>> results;

    // 縦 3 列を調べる
    for (auto x : step(3))
    {
        if (CheckLine(grid, Point(x, 0), Point(x, 1), Point(x, 2)))
        {
            results.emplace_back(Point(x, 0), Point(x, 2));
        }
    }

    // 横 3 行を調べる
    for (auto y : step(3))
    {
        if (CheckLine(grid, Point(0, y), Point(1, y), Point(2, y)))
        {
            results.emplace_back(Point(0, y), Point(2, y));
        }
    }

    // 斜め（左上 -> 右下) を調べる
    if (CheckLine(grid, Point(0, 0), Point(1, 1), Point(2, 2)))
    {
        results.emplace_back(Point(0, 0), Point(2, 2));
    }

    // 斜め（右上 -> 左下) を調べる
    if (CheckLine(grid, Point(2, 0), Point(1, 1), Point(0, 2)))
    {
        results.emplace_back(Point(2, 0), Point(0, 2));
    }

    return results;
}

class GameBoard
{
private:

    // 3x3 の二次元配列 (初期値は全要素 0)
    Grid<int32> m_grid = Grid<int32>(3, 3);

    // これから置くマーク
    int32 m_currentMark = O_Mark;

    // ゲーム終了フラグ
    bool m_gameOver = false;

    // 3 つ連続したラインの一覧
    Array<std::pair<Point, Point>> m_lines;

    // 格子を描く
    void drawGridLines() const
    {
        // 線を引く
        for (auto i : { 1, 2 })
        {
            Line(i * CellSize, 0, i * CellSize, 3 * CellSize)
                .draw(4, ColorF(0.25));

            Line(0, i * CellSize, 3 * CellSize, i * CellSize)
                .draw(4, ColorF(0.25));
        }
    }

    // セルを描く
    void drawCells() const
    {
        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // X マークだったら
            if (mark == X_Mark)
            {
                // X マークを描く
                Shape2D::Cross(CellSize * 0.4, 10, cell.center())
                    .draw(ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }
            else if (mark == O_Mark) // O マークだったら
            {
                // 〇 マークを描く
                Circle(cell.center(), CellSize * 0.4 - 10)
                    .drawFrame(10, 0, ColorF(0.2));

                // このセルはこれ以上処理しない
                continue;
            }

            // セルがマウスオーバーされたら
            if (!m_gameOver && cell.mouseOver())
            {
                // カーソルを手のアイコンに
                Cursor::RequestStyle(CursorStyle::Hand);

                // セルの上に半透明の白を描く
                cell.stretched(-2).draw(ColorF(1.0, 0.6));
            }
        }
    }

    // つながったラインを描く
    void drawResults() const
    {
        for (const auto& line : m_lines)
        {
            // つながったラインの始点と終点のセルを取得
            const Rect cellBegin(line.first * CellSize, CellSize);
            const Rect cellEnd(line.second * CellSize, CellSize);

            // 線を引く
            Line(cellBegin.center(), cellEnd.center())
                .stretched(CellSize * 0.45)
                .draw(LineStyle::RoundCap, 5, ColorF(0.6));
        }
    }

public:

    // セルの大きさ
    static constexpr int32 CellSize = 150;

    // O マークの値
    static constexpr int32 O_Mark = 1;

    // X マークの値
    static constexpr int32 X_Mark = 2;

    void update()
    {
        if (m_gameOver)
        {
            return;
        }

        // 3x3 のセル
        for (auto p : step(Size(3, 3)))
        {
            // セル
            const Rect cell(p * CellSize, CellSize);

            // セルのマーク
            const int32 mark = m_grid[p];

            // セルが空白で、なおかつクリックされたら
            if ((mark == 0) && cell.leftClicked())
            {
                // セルに現在のマークを書き込む
                m_grid[p] = m_currentMark;

                // 現在のマークを入れ替える
                m_currentMark = ((m_currentMark == O_Mark) ? X_Mark : O_Mark);

                // つながったラインを探す
                m_lines = CheckLines(m_grid);

                // 空白セルが 0 になるか、つながったラインが見つかったら
                if (m_grid.count(0) == 0 || m_lines)
                {
                    // ゲーム終了
                    m_gameOver = true;
                }
            }
        }
    }

    // ゲームをリセット
    void reset()
    {
        m_currentMark = O_Mark;

        m_grid.fill(0);

        m_lines.clear();

        m_gameOver = false;
    }

    // 描画
    void draw() const
    {
        drawGridLines();

        drawCells();

        drawResults();
    }

    // ゲームが終了したかを返す
    bool isGameOver() const
    {
        return m_gameOver;
    }
};

void Main()
{
    // 背景色
    Scene::SetBackground(ColorF(0.8, 1.0, 0.9));

    constexpr Point offset(175, 30);

    GameBoard gameBoard;

    while (System::Update())
    {
        {
            // 2D 描画とマウスカーソル座標を移動
            Transformer2D tr(Mat3x2::Translate(offset), true);

            gameBoard.update();

            gameBoard.draw();
        }

        // ゲームが終了していたら
        if (gameBoard.isGameOver())
        {
            // Reset ボタンを押せばリセット
            if (SimpleGUI::ButtonAt(U"Reset", Vec2(400, 520)))
            {
                gameBoard.reset();
            }
        }
    }
}