Question

So I am new to C# programming, and I am creating a connect four game with graphics. I have a grid with circles. What I need to do is, see the chip move down when the user clicks in a certain column. Do I need to use a timer or something? or do I do a loop and maybe move the circle downwards by giving a smaller yCoordinate every time?

Also, is there a way that this circle will not be overlapping the grid? As in, can I make it look as if it is being moved behind the grid?

This is what I have done so far…

    private int columnPosition = 0;
    private int xCoordinate;
    private int yCoordinate;

    public Form1()
    {
        InitializeComponent();
    }

    private void panel1_Paint(object sender, PaintEventArgs e)
    {

        Graphics g = grid.CreateGraphics();
        Pen pen = new Pen(Color.White, 1);
        Pen pen2 = new Pen(Color.Black, 4);

        for (int i = 0; i < 7; i++)
        {
            for (int j = 0; j < 6; j++)
            {
                g.DrawEllipse(pen2, new System.Drawing.Rectangle((i * 70) + 20, (j * 60) + 10, 50, 50));
                g.FillEllipse(pen.Brush, new System.Drawing.Rectangle((i *70) + 20, (j * 60) + 10, 50, 50));



            }
        }
    }

    private void panel2_Paint(object sender, PaintEventArgs e)
    {
        Graphics g = panel2.CreateGraphics();
        Pen pen = new Pen(Color.Red, 5);
        Pen pen2 = new Pen(Color.Black, 3);

        if (columnPosition != -1)
        {
            g.DrawEllipse(pen2, new System.Drawing.Rectangle(columnPosition * 35 - 15, 0, 50, 50));
            g.FillEllipse(pen.Brush, new System.Drawing.Rectangle(columnPosition * 35 - 15, 0, 50, 50));

        }

    }

    private void panel1_MouseMove(object sender, MouseEventArgs e)
    {
        columnPosition = e.X / 35;
        Console.WriteLine(e.X);
        panel2.Refresh();
    }

    private void panel1_MouseLeave(object sender, EventArgs e)
    {
        columnPosition = -1;
        panel2.Refresh();
    }

    private void panel1_MouseClick(object sender, EventArgs e) 
    {
          ///// THIS IS WHERE I AM STUCK
    }

}

Sorry I wanted to upload an image of the grid but since I am a new user I can’t -.- !!

Thanks in advance for any help 🙂

Answer 1

You could use a timer, but you would also need to keep track of each circle through the entire animation. What if a user clicks another column while the animation is still happening? You wouldn’t want to reuse the same timer, you would want another.

One downside to the timer is the the circle won’t flow smoothly, unless you have the timer go off frequently, but then you have the issue of moving the right amount for the amount of time that has passed (what if the computer is under heavy load, and can’t handle the timer right away?). Also, the WinForms API was not designed to handle high refresh rates (other libraries such as DirectX were developed for this purpose).

Most games that have animations use another method of handling all of this. Essentially the applications becomes one big while(true) loop. It may no literally be while(true), but the idea is that as long as the game is running, the loop continues iterating. Upon each iteration of the loop, you draw the game. The next time the loop iterates, you calculate how much time has passed, then use that to determine how far each sprite (graphic) should have moved, then draw them accordingly. This is very analogous to how actual animation works (such as a movie in a theater). To the human eye, it looks like a moving picture, but in reality it is a series of still images that are refreshed at a high rate (usually 30 – 60 times per second).

I’m not a professional game developer. I’m not even sure I would consider myself a “hobbiest”. I’m sure modern game programming is much more evolved then what I have described, but the basic concepts are all there. I would recommend picking up a book (or finding a good tutorial online) that is aimed at teaching game development to a non-game developer (a beginner’s guide).