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 3×3 grid of Buttons and an 3×3 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()