Pygame Tic Tak Toe Logic? How Would I Do It

Question

I am trying to make a tic tak toe game with pygame and I was wondering how would I do the logic here is what I have so far. VIDEO < I only have it when I click on the mid

Answer 1

Class names should normally use the CapWords convention. The name of the class should be Button rather than button. Instance Variables should be lowercase. Hence the name of an object of the typ Button should be button.
Furthermore use a pygame.Rect object and collidepoint. See How do I detect if the mouse is hovering over a button? PyGame button class is not displaying the text or changing colour on hover.
For Instance:

class Button():
    def __init__(self, color, x, y, width, height, text=''):
        self.color = color
        self.rect = pygame.Rect(x, y, width, height)
        self.text = text
        self.over = False

    def draw(self, window, outline=None):
        pygame.draw.rect(window, self.color, self.rect)
        if outline:
            pygame.draw.rect(window, outline, self.rect.inflate(-4, -4), 3)

    def isOver(self, pos):
        return self.rect.collidepoint(pos)

Create a 3x3 grid of Buttons and an 3x3 grid for the Particle objects. The initial value of the particle grid is None:

button_grid = [[Button((0, 128, 0), 70+i*120, 90+j*120, 100, 100, '') for i in range(3)] for j in range(3)]
particle_grid = [[None for i in range(3)] for j in range(3)]

Draw the grids in redraw

def redraw():
    window.fill((32, 32, 32))

    for i in range(len(button_grid)):
        for j in range(len(button_grid[0])):
            b = button_grid[i][j]
            p = particle_grid[i][j]

            is_over = p == None and b.isOver(pygame.mouse.get_pos())
            b.draw(window, (255, 255, 255) if is_over else None)
            if p:
                p.draw(window)

The particle image ahs to be an argument of the constructor of the class Particle. Add a method to the class to set the position:

class Particle:
    def __init__(self, image):
        self.pos = (0, 0)
        self.image = image
    def set_pos(self, pos):
        self.pos = pos
    def draw(self, window):
        window.blit(self.image, self.image.get_rect(center = self.pos))

Create a method that creates a new particle dependent on the current turn:

def new_particle(turn):
    image = MANUAL_CURSOR if turn % 2 == 0 else MANUAL_CURSOR2
    return Particle(image)

Add a variable for the current turn and create an initial Particle object:

turn = 0
particle = new_particle(turn)

Set the position of the Particle object using the current mouse position and draw the object in the application loop:

runninggame = True
while runninggame:
    # [...]

    particle.set_pos(pygame.mouse.get_pos())

    redraw()
    particle.draw(window)
    pygame.display.update()

When you click a field, check that the corresponding field in the particle grid is empty. Copy the center of the field to the position of the particle. Assign the particle to the grid. Increment the turn and create a new particle:

while runninggame:
    clock.tick(fps)
    for event in pygame.event.get():
        if event.type ==  pygame.QUIT:
            runninggame = False

        if event.type == pygame.MOUSEBUTTONDOWN:
            for i in range(len(button_grid)):
                for j in range(len(button_grid[0])):
                    b = button_grid[i][j]
                    if b.isOver(event.pos) and particle_grid[i][j] == None:
                        particle.set_pos(b.rect.center)
                        particle_grid[i][j] = particle
                        turn += 1
                        particle = new_particle(turn)

Add a score for both players:

score1 = 0
score2 = 0

Add a function that evaluates whether there are 3 identical images in a row:

def has_won(pg):
    pg = particle_grid
    for i in range(3):
        if pg[i][0] and pg[i][1] and pg[i][2]:
            if pg[i][0].image == pg[i][1].image == pg[i][2].image:
                return pg[i][0].image
    for j in range(3):
        if pg[0][j] and pg[1][j] and pg[2][j]:
            if pg[0][j].image == pg[1][j].image == pg[2][j].image:
                return pg[0][j].image
    if pg[0][0] and pg[1][1] and pg[2][2]:
        if pg[0][0].image == pg[1][1].image == pg[2][2].image:
            return pg[0][0].image
    if pg[0][2] and pg[1][1] and pg[2][0]:
        if pg[0][2].image == pg[1][1].image == pg[2][0].image:
            return pg[0][2].image
    return None

Test to see if a player has won after clicking a button. When a player wins, increase the appropriate score and reset the particle grid:

while runninggame:
    clock.tick(fps)
    for event in pygame.event.get():
        # [...]

        if event.type == pygame.MOUSEBUTTONDOWN:
            [...]

            won = has_won(particle_grid)
            if won:
                if won == MANUAL_CURSOR:
                    score1 += 1
                else:
                    score2 += 1
                print(score1, score2)
                particle_grid = [[None for i in range(3)] for j in range(3)]

Add a function that evaluates whether the grid is full:

def grid_is_full(pg):
    return all(cell for row in pg for cell in row)

Clear the grid when it's full:

while runninggame:
    clock.tick(fps)
    for event in pygame.event.get():
        # [...]

        if event.type == pygame.MOUSEBUTTONDOWN:
            [...]

            if grid_is_full(particle_grid):
                particle_grid = [[None for i in range(3)] for j in range(3)]

---

Minimal example:

import pygame,random
pygame.init()

class Button():
    def __init__(self, color, x, y, width, height, text=''):
        self.color = color
        self.rect = pygame.Rect(x, y, width, height)
        self.text = text
        self.over = False

    def draw(self, window, outline=None):
        pygame.draw.rect(window, self.color, self.rect)
        if outline:
            pygame.draw.rect(window, outline, self.rect.inflate(-4, -4), 3)

    def isOver(self, pos):
        return self.rect.collidepoint(pos)

class Particle:
    def __init__(self, image):
        self.pos = (0, 0)
        self.image = image
    def set_pos(self, pos):
        self.pos = pos
    def draw(self, window):
        window.blit(self.image, self.image.get_rect(center = self.pos))

def new_particle(turn):
    image = MANUAL_CURSOR if turn % 2 == 0 else MANUAL_CURSOR2
    return Particle(image)

def has_won(pg):
    pg = particle_grid
    for i in range(3):
        if pg[i][0] and pg[i][1] and pg[i][2]:
            if pg[i][0].image == pg[i][1].image == pg[i][2].image:
                return pg[i][0].image
    for j in range(3):
        if pg[0][j] and pg[1][j] and pg[2][j]:
            if pg[0][j].image == pg[1][j].image == pg[2][j].image:
                return pg[0][j].image
    if pg[0][0] and pg[1][1] and pg[2][2]:
        if pg[0][0].image == pg[1][1].image == pg[2][2].image:
            return pg[0][0].image
    if pg[0][2] and pg[1][1] and pg[2][0]:
        if pg[0][2].image == pg[1][1].image == pg[2][0].image:
            return pg[0][2].image
    return None

def grid_is_full(pg):
    return all(cell for row in pg for cell in row)

def redraw():
    window.fill((32, 32, 32))
    
    for i in range(len(button_grid)):
        for j in range(len(button_grid[0])):
            b = button_grid[i][j]
            p = particle_grid[i][j]
            
            is_over = p == None and b.isOver(pygame.mouse.get_pos())
            b.draw(window, (255, 255, 255) if is_over else None)
            if p:
                p.draw(window)
        
window = pygame.display.set_mode((500,540))
pygame.display.set_caption("Tic Tac TOE")
fps = 40
clock = pygame.time.Clock()
font =  pygame.font.SysFont(None, 50)

#MANUAL_CURSOR = pygame.image.load('nw.png').convert_alpha()
#MANUAL_CURSOR2 = pygame.image.load('nOW.png').convert_alpha()
size = (60, 60)
MANUAL_CURSOR = pygame.Surface(size)
MANUAL_CURSOR.fill((127, 127, 127))
pygame.draw.line(MANUAL_CURSOR, (0, 127, 255), (5, 5), (size[0]-5, size[1]-5), 3)
pygame.draw.line(MANUAL_CURSOR, (0, 127, 255), (size[0]-5, 5), (5, size[1]-5), 3)
MANUAL_CURSOR2 = pygame.Surface(size)
MANUAL_CURSOR2.fill((127, 127, 127))
pygame.draw.circle(MANUAL_CURSOR2, (127, 0, 255), (size[0]//2, size[1]//2), size[0]//2-5, 3)

score1 = 0
score2 = 0

button_grid = [[Button((0, 128, 0), 70+i*120, 90+j*120, 100, 100, '') for i in range(3)] for j in range(3)]
particle_grid = [[None for i in range(3)] for j in range(3)]
turn = 0
particle = new_particle(turn)
      
runninggame = True
while runninggame:
    clock.tick(fps)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            runninggame = False

        if event.type == pygame.MOUSEBUTTONDOWN:
            for i in range(len(button_grid)):
                for j in range(len(button_grid[0])):
                    b = button_grid[i][j]
                    if b.isOver(event.pos) and particle_grid[i][j] == None:
                        particle.set_pos(b.rect.center)
                        particle_grid[i][j] = particle
                        turn += 1
                        particle = new_particle(turn)
        
            won = has_won(particle_grid)
            if won:
                if won == MANUAL_CURSOR:
                    score1 += 1
                else:
                    score2 += 1
                print(score1, score2)
                particle_grid = [[None for i in range(3)] for j in range(3)]

            if grid_is_full(particle_grid):
                particle_grid = [[None for i in range(3)] for j in range(3)]

    particle.set_pos(pygame.mouse.get_pos())
    scoreText1 =  font.render("Player 1   Score: " + str(score1), True, (128, 0, 0))
    scoreText2 =  font.render("Player 2   Score: " + str(score2), True, (128, 0, 0))

    redraw()
    window.blit(scoreText1, (70, 30))
    window.blit(scoreText2, (70, 460))
    particle.draw(window)
    pygame.display.update()

pygame.quit()
exit()