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 middle button it will display the player 2 x on the screen and then the image that is hovering over my mouse will turn into O for player 1 turn to go BUT my question is how would I do the logic like if player 1 gets 3 in a row or player 2 gets 3 across in a row I am really confused on this and I need someone to walk me throw it

my tic tak toe game right now CODE

import pygame,random
pygame.init()

# draw our window
window = pygame.display.set_mode((500,540),pygame.NOFRAME)
pygame.display.set_caption("Tic Tac TOE")



MANUAL_CURSOR = pygame.image.load('nw.png').convert_alpha()


MANUAL_CURSOR2 = pygame.image.load('nOW.png').convert_alpha()



bg = pygame.image.load("ticO.png")
fps = 40

clock = pygame.time.Clock()

class button():
    def __init__(self, color, x,y,width,height, text=''):
        self.color = color
        self.x = x
        self.y = y
        self.width = width
        self.height = height
        self.text = text
        self.over = False

    def draw(self,window,outline=None):
                #Call this method to draw the button on the screen
        if outline:
            pygame.draw.rect(window, outline, (self.x-2,self.y-2,self.width+4,self.height+4),0)
                    
        pygame.draw.rect(window, self.color, (self.x,self.y,self.width,self.height),0)
                
        if self.text != '':
            font = pygame.font.SysFont('comicsans', 60)
            text = font.render(self.text, 1, (0,0,0))
            window.blit(text, (self.x + (self.width/2 - text.get_width()/2), self.y + (self.height/2 - text.get_height()/2)))

    def isOver(self, pos):
                #Pos is the mouse position or a tuple of (x,y) coordinates
        if pos[0] > self.x and pos[0] < self.x + self.width:
            if pos[1] > self.y and pos[1] < self.y + self.height:
                return True
                    
        return False

    def playSoundIfMouseIsOver(self, pos, sound):
        if self.isOver(pos):            
            if not self.over:
                beepsound.play()
                self.over = True
        else:
            self.over = False



class particle:
    def __init__(self,x):
        self.x = x
        self.partilight = pygame.image.load("noW.png")
    def draw(self,window):
        window.blit(self.partilight,(self.x))


                    
white = (250,250,250)
greenbutton2 = button((0,255,0),190,215,100,100, '')

greenbutton3 = button((0,255,0),335,215,100,100, '')

greenbutton4 = button((0,255,0),70,215,100,100, '')

greenbutton5 = button((0,255,0),70,350,100,100, '')

greenbutton6 = button((0,255,0),190,350,100,100, '')

greenbutton7 = button((0,255,0),335,350,100,100, '')


greenbutton8 = button((0,255,0),70,90,100,100, '')

greenbutton9 = button((0,255,0),190,90,100,100, '')

greenbutton10 = button((0,255,0),335,90,100,100, '')



            
font = pygame.font.Font("fos.ttf", 60)
score = 1
cointext = font.render("" + str(score), True, (255,255,255))
coinrect = cointext.get_rect()
coinrect.center = ((100,50))

particles = []


pos = pygame.mouse.get_pos()
def redraw():
    window.fill((174, 214, 241))
    window.blit(bg,(0,0))
    greenbutton2.draw(window)
    greenbutton3.draw(window)
    greenbutton4.draw(window)
    greenbutton5.draw(window)
    greenbutton6.draw(window)
    greenbutton7.draw(window)

    greenbutton8.draw(window)
    greenbutton9.draw(window)
    greenbutton10.draw(window)


    for particle in particles:
        particle.draw(window)
        
    pos = pygame.mouse.get_pos()
    if score >= 0:
        window.blit(MANUAL_CURSOR, MANUAL_CURSOR.get_rect(center = pygame.mouse.get_pos()))
        pygame.mouse.set_visible(False)

        
    if score >= 1:
        window.blit(MANUAL_CURSOR2, MANUAL_CURSOR2.get_rect(center = pygame.mouse.get_pos()))


    if score >= 2:
        window.blit(MANUAL_CURSOR, MANUAL_CURSOR.get_rect(center = pygame.mouse.get_pos()))


    if score >= 3:
        window.blit(MANUAL_CURSOR2, MANUAL_CURSOR2.get_rect(center = pygame.mouse.get_pos()))

        

    if score >= 4:
        window.blit(MANUAL_CURSOR, MANUAL_CURSOR.get_rect(center = pygame.mouse.get_pos()))


    if score >= 5:
        window.blit(MANUAL_CURSOR2, MANUAL_CURSOR2.get_rect(center = pygame.mouse.get_pos()))


    if score >= 6:
        window.blit(MANUAL_CURSOR, MANUAL_CURSOR.get_rect(center = pygame.mouse.get_pos()))



    if score >= 7:
        window.blit(MANUAL_CURSOR2, MANUAL_CURSOR2.get_rect(center = pygame.mouse.get_pos()))



    if score >= 8:
        window.blit(MANUAL_CURSOR, MANUAL_CURSOR.get_rect(center = pygame.mouse.get_pos()))


        
# our main loop
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:
            pos = pygame.mouse.get_pos()
            if greenbutton2.isOver(pos):
                score += 1
                cointext = font.render("" + str(score), True, (255,255,255))
                coinrect.center = ((100,50))
                for x in range(4):
                    particles.append(particle(MANUAL_CURSOR.get_rect(center = pygame.mouse.get_pos())))



                    
    redraw()


    pygame.display.update()

pygame.quit()

    

the assets I am using Please! use so when your testing out the code

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()