Grid/Overlay 的 C# 面板

C# Panel with Grid/Overlay

你好我想用 c# 实现一个小游戏的控件,用户可以在其中单击面板并绘制一条穿过迷宫的路径。之后我想传输在某处路径上交叉的每个 "point" 的坐标。

为了做到这一点,我尝试实现某种网格,其中每一块都具有相同的大小。然后我想创建某种叠加层,以便用户可以单击网格,然后网格变为绿色并显示用户选择的方式。

我在下面做了一个小例子,希望能解释我的意思:

我的问题是我对一般的面板和图形不是特别熟练,希望这里的人可能有某种来源或教程来完成我想做的事情。

提前致谢!

很久以前我做了某事。像这样使用 Primitives 中的 Togglebutton :

System.Windows.Controls.Primitives.ToggleButton tb = new ToggleButton();

创建仅包含网格的 WPF 解决方案

  • Xaml 文件:

< Grid Name="DynamicGrid" ShowGridLines="True">

  • Cs 文件:

    public partial class MainWindow : Window
    {
    public MainWindow()
    {
        InitializeComponent();
        fillWithToggles();
    }
    
    public void fillWithToggles()
    {
        for (int i = 0; i < 10; i++)
        {
            ColumnDefinition gridCol = new ColumnDefinition();
            gridCol.Name = "Column" + i.ToString();
            DynamicGrid.ColumnDefinitions.Add(gridCol);
        }
    
        for (int i = 0; i < 10; i++)
        {
            RowDefinition gridRow = new RowDefinition();
            gridRow.Name = "Row" + i.ToString();
            DynamicGrid.RowDefinitions.Add(gridRow);
        }
    
        for (int x = 0; x < 10; x++)
        {
            for (int y = 0; y < 10; y++)
            {
                System.Windows.Controls.Primitives.ToggleButton tb = new ToggleButton();
                tb.VerticalAlignment = VerticalAlignment.Stretch;
                tb.HorizontalAlignment = HorizontalAlignment.Stretch;
                Grid.SetColumn(tb, x);
                Grid.SetRow(tb,y);
                DynamicGrid.Children.Add(tb);
            }                
        }
    }}
    

结果:

稍后您可以玩边框和整个逻辑等。

游戏设计包括(至少)三个方面:艺术设计、技术设计和策略设计。

我不会深入探讨它的外观、颜色和效果等艺术方面。

给大家一些技术设计上的提示,就是用什么平台,用什么控件,用什么方法,用什么数据结构。

第三个区域是最难的,在你的情况下主要是因为其他的都相当简单..: 战略设计是关于如何创建一个可玩的迷宫。随机创建一个很简单,但很可能无法播放。或者是一个可玩但太简单的游戏。所以需要良好的判断力和一些想象力才能创造出好的板子..

Zbig的回答给了你一个WPF程序的例子;我的提示是使用 WinForms。

有很多可能的方法,从

  • 绘制一切
  • 或使用支持单元格的控件
  • 对每个单元格使用单独的控件。

要绘制所有内容,您可以选择一个控件,可能是 PictureBox 或 Panel,然后在 Paint 事件中将当前状态绘制到它上面。为此,您需要一个数据结构来保存有关电路板及其每个单元格的信息:

  • 行和列 (x, y)
  • 一组墙(上、下、左、右)
  • 颜色状态(空或已访问)

可以容纳单元格数组的控件是 DataGridview,您可以使用它,这是一个不错的选择,尤其是当您的电路板变得非常大时..(多于 2-3000 个单元格)

我会坚持使用第三个选项:创建一组控件,每个单元格一个。

以下是我处理技术方面的方法:

  1. 为单元格使用按钮(尽管其他控件也可以)并像这样存储游戏数据:

    • 状态在BackColor
    • 四个墙在其ImageIndex的低四位
    • 行和列在其名称或标签中
  2. 创建一个包含 16 个图像的 ImageList,动态绘制:透明且仅由墙壁组成,一个对应于设置的索引中的每一位。

  3. 动态创建按钮并将它们的 Clicked 事件映射到一个公共事件,其中 sender 参数用于处理点击。

  4. 游戏规则可能很简单:如果它的四个邻居之一被访问并且它们之间没有墙,则绘制单击的单元格。访问退出单元格后游戏结束。

好吧,我相信您会发现细节比一个精通编码的人要难一些;搭建上面的系统最多需要他1-2个小时..

..但现在我们到了困难的部分:如何布局可玩的棋盘?!

游戏中的一个不错的功能是它们提供了游戏玩法应该有多难的选择。

这里是创建板程序的简单计划:

  • 从随机棋盘开始
  • 为了让它更难在上面洒更多的墙
  • 设置外墙
  • 创建开始和退出单元格,也许设置访问的开始单元格
  • 创建一条从开始到结束的随机路径
  • 在随机边界单元格之间创建更多路径,您创建的路径越多,电路板应该变得越简单,因为将有更多可能的横向方式。

请注意,其中一个隐藏的困难是我设置每个(内)墙的方式确实属于两个单元格,这在游戏过程中没有问题,但每当您创建单元格时都必须考虑and/or 设置或删除一堵墙。所以最好有一个 setWall(int row, int column, bool wall) 函数来处理它..

另一个隐藏的问题是如何创建一个随机路径而不用把自己画在角落里..

还要确保您了解使用 4 位表示四壁并将这些位用作细胞壁图像的索引的技巧。