C#でぷよぷよもどきを作る

2020年4月17日

今回はぷよぷよもどきを作ります。

によると

フィールドは基本的に縦12マス×横6マスの格子で構成される。
上からぷよが2つ1組で落下してくる（「組ぷよ」と呼ばれる）。
ぷよは種類ごとに色が異なり、色は3-5色（通常は4色）ある。
プレイヤーはぷよに対して回転、横移動、高速落下のいずれかの操作を行う。
次に落下するぷよはフィールドの枠外に「NEXTぷよ（ネクストぷよ）」として予告される。

落下してきたぷよがフィールドの床やほかのぷよに衝突すると、その位置にぷよが固定される。
ただし組ぷよを横にして置いたりなどして、ぷよに1マス分でも下方向に空白がある場合は、強制的にそのぷよだけ落下する。

固定されたぷよと同色のぷよが周囲4方向にいる場合、それらは互いにくっつく。
ぷよが4個以上くっつくと消滅し得点となる。
ぷよの消滅により上にあったぷよが落下する。このとき再びぷよが4個以上くっつくと消滅し、連鎖が起きる。

なお、普通に4つ色を並べて消す行為だけでも1連鎖と考え、消滅した回数（○回）に応じて○連鎖と呼ばれる。複数色を同時に消した場合や同色を別箇所で消した場合でも、1連鎖扱いとなる。

となっています。

Contents

1 フィールドをつくる

フィールドをつくる

まず最初にフィールドをつくります。縦12マス×横6マスですが、外枠になる部分もつくりたいので

    int FIELD_WIDTH = 6 + 2;
    int FIELD_HEIGHT = 12 + 1 + 1;

1 2	int FIELD_WIDTH = 6 + 2; int FIELD_HEIGHT = 12 + 1 + 1;

とします。

ユーザーコントロールでフィールドをつくる

幅は左右の枠をつくるため、2つ分広くしています。高さは底の部分と「組ぷよ」を出現させる都合上、2つ分高くなっています。

フォームのうえにあるのはユーザーコントロールです。名前はFieldとします。

変更している部分はDoubleBufferedをtrueにしています。

まずはUserControl1クラスを示します。IsInputKeyメソッドをオーバーライドしていますが、これをしておかないとキーが押されたときにイベントを捕捉することができないからです。

UserControlでカーソルキーを押した時のKeyDownイベント – アンの開発日記によると、

NET FrameworkでUserControlクラスを継承した独自コントロールを作成した場合、そのままではカーソルキーを押してもKeyDownイベントが発生しない。

これはUserControlクラスの親クラスであるContainerControlクラスの内部でカーソルキーの押下処理が行われているため。

この問題を解決するにはIsInputKeyメソッドを下記のようにオーバーライドすればよい。

と説明がされています。

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
    }

    protected override bool IsInputKey(Keys keyData)
    {
        if(keyData == Keys.Right || keyData == Keys.Left ||
            keyData == Keys.Up || keyData == Keys.Down)
        {
            return true;
        }
        return base.IsInputKey(keyData);
    }
}

public partial class UserControl1 : UserControl

{

public UserControl1()

{

InitializeComponent();

}

protected override bool IsInputKey(Keys keyData)

{

if(keyData == Keys.Right || keyData == Keys.Left ||

keyData == Keys.Up || keyData == Keys.Down)

{

return true;

}

return base.IsInputKey(keyData);

}

ぷよの位置を示すCellクラス

またCellというクラスを作成しています。これはユーザーコントロールに「ぷよ」を描画するときにどの部分に描画すればよいかをわかりやすくするためのものです。

public class Cell
{
    public Cell(int x, int y)
    {
        LeftTop = new Point(x, y);
    }

    // 矩形の左上の座標
    public Point LeftTop
    {
        get;
        private set;
    } = new Point(0, 0);

    // サイズはすべて同じ
    static public Size Size
    {
        get;
    } = new Size(30, 30);

    // そのセルは左から何番目、上から何番目にあるか指定
    public void SetColumRow(int colum, int row)
    {
        Colum = colum;
        Row = row;
    }

    // そのセルは左から何番目にあるか
    public int Colum
    {
        get;
        private set;
    } = 0;

    // そのセルは上から何番目にあるか
    public int Row
    {
        get;
        private set;
    } = 0;

    // ぷよは固定されているか
    public bool IsFixed
    {
        get;
        set;
    } = false;

    // ぷよのタイプ
    public Puyo Puyo
    {
        get;
        set;
    } = Puyo.None;

    // ぷよを消す処理をするときに使う
    public bool isChecked
    {
        get;
        set;
    } = false;
}

public class Cell

{

public Cell(int x, int y)

{

LeftTop = new Point(x, y);

}

// 矩形の左上の座標

public Point LeftTop

{

get;

private set;

} = new Point(0, 0);

// サイズはすべて同じ

static public Size Size

{

get;

} = new Size(30, 30);

// そのセルは左から何番目、上から何番目にあるか指定

public void SetColumRow(int colum, int row)

{

Colum = colum;

Row = row;

}

// そのセルは左から何番目にあるか

public int Colum

{

get;

private set;

} = 0;

// そのセルは上から何番目にあるか

public int Row

{

get;

private set;

} = 0;

// ぷよは固定されているか

public bool IsFixed

{

get;

set;

} = false;

// ぷよのタイプ

public Puyo Puyo

{

get;

set;

} = Puyo.None;

// ぷよを消す処理をするときに使う

public bool isChecked

{

get;

set;

} = false;

}

ぷよのタイプを示す列挙体

これはぷよのタイプを示す列挙体です。

public enum Puyo
{
    None = 0, // なにもない
    Wall = -1, // 壁

    Puyo1 = 1, // ぷよ1
    Puyo2 = 2, // ぷよ2
    Puyo3 = 3, // ぷよ3
    Puyo4 = 4, // ぷよ4
}

public enum Puyo

{

None = 0, // なにもない

Wall = -1, // 壁

Puyo1 = 1, // ぷよ1

Puyo2 = 2, // ぷよ2

Puyo3 = 3, // ぷよ3

Puyo4 = 4, // ぷよ4

}

Form1クラスのコンストラクタとフィールド変数

Form1クラスのコンストラクタとフィールド変数は以下のとおりです。Fieldはデザイナでフォームにはりつけたユーザーコントロールです。

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        Field.Paint += Field_Paint;
        Field.KeyDown += Field_KeyDown;

        InitCells();
    }

    // セルの配列
    Cell[,] Cells = null;

    // フィールドの幅と高さ
    int FIELD_WIDTH = 6 + 2;
    int FIELD_HEIGHT = 12 + 1 + 1;

    // 組ぷよの回転軸になる側の位置
    int puyoPositionX = puyoStartPositionX;
    int puyoPositionY = puyoStartPositionY;

    // 組ぷよが最初にあらわれる部分の位置
    const int puyoStartPositionX = 3;
    const int puyoStartPositionY = 1;

    // 組プヨはどれだけ回転したか？
    Angle PuyoAngle = Angle.Angle0;
    Puyo DropingPuyo = Puyo.Puyo1;
}

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

Field.Paint += Field_Paint;

Field.KeyDown += Field_KeyDown;

InitCells();

}

// セルの配列

Cell[,] Cells = null;

// フィールドの幅と高さ

int FIELD_WIDTH = 6 + 2;

int FIELD_HEIGHT = 12 + 1 + 1;

// 組ぷよの回転軸になる側の位置

int puyoPositionX = puyoStartPositionX;

int puyoPositionY = puyoStartPositionY;

// 組ぷよが最初にあらわれる部分の位置

const int puyoStartPositionX = 3;

const int puyoStartPositionY = 1;

// 組プヨはどれだけ回転したか？

Angle PuyoAngle = Angle.Angle0;

Puyo DropingPuyo = Puyo.Puyo1;

}

Angleは以下のようになっています。

public enum Angle
{
    Angle0 = 0,
    Angle90 = 1,
    Angle180 = 2,
    Angle270 =3,
}

public enum Angle

{

Angle0 = 0,

Angle90 = 1,

Angle180 = 2,

Angle270 =3,

}

フィールドの初期化

InitCellsメソッドはセルを作成してこれを配列のなかに格納します。また一番上の行はぷよを回転させるときにつかわれる部分で表示はさせません。

public partial class Form1 : Form
{
    void InitCells()
    {
        Cells = new Cell[FIELD_HEIGHT, FIELD_WIDTH];

        int selWidth = Cell.Size.Width;
        int selHeight = Cell.Size.Height;

        for(int i = 0; i < FIELD_HEIGHT; i++)
        {
            for(int j = 0; j < FIELD_WIDTH; j++)
            {
                // (i - 1)とすることで一番上の行は
                // コントロールの外側になり表示されない
                Cells[i, j] = new Cell(j * selWidth, (i - 1) * selHeight);
                Cells[i, j].SetColumRow(j, i);
            }
        }

        // 外枠を表示させる
        for(int i = 0; i < FIELD_HEIGHT; i++)
            SetPuyo(0, i, Puyo.Wall);
        for(int i = 0; i < FIELD_HEIGHT; i++)
            SetPuyo(FIELD_WIDTH - 1, i, Puyo.Wall);
        for(int i = 0; i < FIELD_WIDTH; i++)
            SetPuyo(i, FIELD_HEIGHT - 1, Puyo.Wall);
    }
}

public partial class Form1 : Form

{

void InitCells()

{

Cells = new Cell[FIELD_HEIGHT, FIELD_WIDTH];

int selWidth = Cell.Size.Width;

int selHeight = Cell.Size.Height;

for(int i = 0; i < FIELD_HEIGHT; i++)

{

for(int j = 0; j < FIELD_WIDTH; j++)

{

// (i - 1)とすることで一番上の行は

// コントロールの外側になり表示されない

Cells[i, j] = new Cell(j * selWidth, (i - 1) * selHeight);

Cells[i, j].SetColumRow(j, i);

}

// 外枠を表示させる

for(int i = 0; i < FIELD_HEIGHT; i++)

SetPuyo(0, i, Puyo.Wall);

for(int i = 0; i < FIELD_HEIGHT; i++)

SetPuyo(FIELD_WIDTH - 1, i, Puyo.Wall);

for(int i = 0; i < FIELD_WIDTH; i++)

SetPuyo(i, FIELD_HEIGHT - 1, Puyo.Wall);

}

ぷよを表示させる

ぷよを表示させるためにはぷよを表示するセルにデータをセットして、Invalidateメソッドを呼びます。SetPuyoメソッドはぷよを表示するセルにデータをセットするためのものです。

public partial class Form1 : Form
{
    void SetPuyo(int colum, int row, Puyo puyo)
    {
        Cell cell = Cells[row, colum];
        cell.Puyo = puyo;
        Field.Invalidate();
    }

    private void Field_Paint(object sender, PaintEventArgs e)
    {
        DrawPuyos(e.Graphics);
    }

    // DrawPuyos(Graphics g)は後述
}

public partial class Form1 : Form

{

void SetPuyo(int colum, int row, Puyo puyo)

{

Cell cell = Cells[row, colum];

cell.Puyo = puyo;

Field.Invalidate();

}

private void Field_Paint(object sender, PaintEventArgs e)

{

DrawPuyos(e.Graphics);

}

// DrawPuyos(Graphics g)は後述

}

Invalidateメソッドを呼ぶことで、そのセルがある位置にぷよを表示させます。

ぷよを表示させるのであればイメージが必要です。使用したPNGファイルはここからダウンロードしました。

ぷよぷよ通 – 素材 – しろま空間

作者のサイト
しろま空間

取得したPNGファイルをリソースに追加

public partial class Form1 : Form
{
    Image redPuyoImage = null;
    Image bluePuyoImage = null;
    Image greenPuyoImage = null;
    Image yellowPuyoImage = null;
    Image wallImage = null;

    void GetPuyoImages()
    {
        redPuyoImage = Properties.Resources.Red;
        bluePuyoImage = Properties.Resources.Blue;
        greenPuyoImage = Properties.Resources.Green;
        yellowPuyoImage = Properties.Resources.Yellow;
        wallImage = Properties.Resources.Wall;
    }

    public Form1()
    {
        InitializeComponent();
        Field.Paint += Field_Paint;
        Field.KeyDown += Field_KeyDown;

        this.BackColor = Color.Black;
        Field.BorderStyle = BorderStyle.None;

        GetPuyoImages(); // 追加
        InitCells();
    }
}

public partial class Form1 : Form

{

Image redPuyoImage = null;

Image bluePuyoImage = null;

Image greenPuyoImage = null;

Image yellowPuyoImage = null;

Image wallImage = null;

void GetPuyoImages()

{

redPuyoImage = Properties.Resources.Red;

bluePuyoImage = Properties.Resources.Blue;

greenPuyoImage = Properties.Resources.Green;

yellowPuyoImage = Properties.Resources.Yellow;

wallImage = Properties.Resources.Wall;

}

public Form1()

{

InitializeComponent();

Field.Paint += Field_Paint;

Field.KeyDown += Field_KeyDown;

this.BackColor = Color.Black;

Field.BorderStyle = BorderStyle.None;

GetPuyoImages(); // 追加

InitCells();

}

これでぷよのイメージを描画することができます。

GetImageFromPuyoTypeメソッド

GetImageFromPuyoTypeメソッドはぷよのタイプを指定すると対応するイメージを返します。

public partial class Form1 : Form
{
    Image GetImageFromPuyoType(Puyo puyo)
    {
        if(puyo == Puyo.Puyo1)
            return redPuyoImage;
        else if(puyo == Puyo.Puyo2)
            return bluePuyoImage;
        else if(puyo == Puyo.Puyo3)
            return greenPuyoImage;
        else if(puyo == Puyo.Puyo4)
            return yellowPuyoImage;
        else if(puyo == Puyo.Wall)
            return wallImage;

        return null;
    }
}

public partial class Form1 : Form

{

Image GetImageFromPuyoType(Puyo puyo)

{

if(puyo == Puyo.Puyo1)

return redPuyoImage;

else if(puyo == Puyo.Puyo2)

return bluePuyoImage;

else if(puyo == Puyo.Puyo3)

return greenPuyoImage;

else if(puyo == Puyo.Puyo4)

return yellowPuyoImage;

else if(puyo == Puyo.Wall)

return wallImage;

return null;

}

DrawPuyosメソッドでぷよを描画する

DrawPuyosメソッドでぷよを描画します。ぷよが描画される矩形を取得し、そこにGetImageFromPuyoTypeメソッドで取得したイメージを描画します。

public partial class Form1 : Form
{
    void DrawPuyos(Graphics g)
    {
        Field.BackColor = Color.Black;
        for(int i = 0; i < FIELD_HEIGHT; i++)
        {
            for(int j = 0; j < FIELD_WIDTH; j++)
            {
                Cell cell = Cells[i, j];
                Rectangle rect = new Rectangle(cell.LeftTop, Cell.Size);

                Image image = GetImageFromPuyoType(cell.Puyo);
                if(image != null)
                    g.DrawImage(image, rect);
            }
        }
    }
}

public partial class Form1 : Form

{

void DrawPuyos(Graphics g)

{

Field.BackColor = Color.Black;

for(int i = 0; i < FIELD_HEIGHT; i++)

{

for(int j = 0; j < FIELD_WIDTH; j++)

{

Cell cell = Cells[i, j];

Rectangle rect = new Rectangle(cell.LeftTop, Cell.Size);

Image image = GetImageFromPuyoType(cell.Puyo);

if(image != null)

g.DrawImage(image, rect);

}

よろしければ記事の拡散をお願いします。

自作ゲームリンク集

鳩でも分かるC#管理人からのお願い

できる仕事であれば請け負います。鳩でもわかるC#管理人はクラウドワークスに在宅ワーカーとして登録しています。お仕事の依頼もお待ちしております。

⇒ 仕事を依頼する

コメントについて

コメントで英語などの外国語でコメントをされる方がいますが、管理人は日本語以外はわからないので基本的に内容が理解できず、承認することもありません。それからへんな薬を売っているサイトやリンク先のサイトが存在しないというスパムコメントも多々あります。

Some people make comments in foreign languages such as English, but since the manager does not understand anything other than Japanese, he basically cannot understand the content and does not approve it. Please use Japanese when making comments.

そんななか日本語のコメントもいただけるようになりました。「○○という変数はどこで宣言されているのか？」「××というメソッドはどこにあるのか」「例外が発生する」「いっそのことソース丸ごとくれ」という質問ですが、管理人としては嬉しく思います。「自分が書いた記事は読まれているんだな」と。疑問点には可能な限り答えます。記事に問題があれば修正いたします。

そのうえでお願いがあります。「匿名」という味も素っ気もない名前ではなく、捨てハンでいいのでなにかハンドルネームをつくってほしいと思います。

管理人のモチベーションアップのために

よろしければご支援お願いします。

⇒ 管理人の物乞いリスト

「ぷよを落下させる C#でぷよぷよもどきを作る」