how to blit an image multiple times in pygame

Question

I'm making tic tac toe with python. If you click a specific square inside the game, an x image is supposed to be blitted onto the screen. I did this by using pygame.MOUSEBUTTONDOWN and specifying the coordinates. When I click on a square, the image gets blitted onto the screen. The problem is that when I click on another square, another x is blitted in this square but the x in the other square disappears. here's the code:

    if event.type == pygame.MOUSEBUTTONDOWN and 250 < mouse_pos[0] < 300 and 250 > mouse_pos[1] > 199:
        mouse_clicked1 = True
    if event.type == pygame.MOUSEBUTTONDOWN and 301 < mouse_pos[0] < 351 and 249 > mouse_pos[1] > 201:
        mouse_clicked2 = True
    if event.type == pygame.MOUSEBUTTONDOWN and 399 > mouse_pos[0] > 351 and 250 > mouse_pos[1] > 199:
        mouse_clicked3 = True
    if event.type == pygame.MOUSEBUTTONDOWN and 251 < mouse_pos[0] < 301 and 310 > mouse_pos[1] > 252:
        mouse_clicked4 = True
    if event.type == pygame.MOUSEBUTTONDOWN and 303 < mouse_pos[0] < 351 and 310 > mouse_pos[1] > 252:
        mouse_clicked5 = True
    if event.type == pygame.MOUSEBUTTONDOWN and 353 < mouse_pos[0] < 400 and 312 > mouse_pos[1] > 250:
        mouse_clicked6 = True
    if event.type == pygame.MOUSEBUTTONDOWN and 251 < mouse_pos[0] < 300 and 372 > mouse_pos[1] > 314:
        mouse_clicked7 = True
    if event.type == pygame.MOUSEBUTTONDOWN and 302 < mouse_pos[0] < 350 and 372 > mouse_pos[1] > 313:
        mouse_clicked8 = True
    if event.type == pygame.MOUSEBUTTONDOWN and 352 < mouse_pos[0] < 399 and 369 > mouse_pos[1] > 310:
        mouse_clicked9 = True
drawing = False
if mouse_clicked1:
    screen.blit(x, object_top_left)
    top_left = True
if mouse_clicked2:
    screen.blit(x, object_top)
    top = True
if mouse_clicked3:
    screen.blit(x, object_top_right)
    top_right = True
if mouse_clicked4:
    screen.blit(x, object_left)
    left = True
if mouse_clicked5:
    screen.blit(x, object_middle)
    middle = True
if mouse_clicked6:
    screen.blit(x, object_right)
    right = True
if mouse_clicked7:
    screen.blit(x, object_bottom_left)
    bottom_left = True
if mouse_clicked8:
    screen.blit(x, object_bottom)
    bottom = True
if mouse_clicked9:
    screen.blit(x, object_bottom_right)
    bottom_right = True

I can know it from your code but you are probably drawing the background and the last clicked area each iteration, and thus the background is covering your previously drawed X. — Adirio, Sep 16 '20 at 13:19
The provided code is not self-contained, I can't run it top see what it fails. You need to make a simplified example where the same error happens and post it here. — Adirio, Sep 16 '20 at 13:23
Store the current grid in an array (list) and use the mouse events to update the array. The blit code should just draw the current array. — Mike67, Sep 16 '20 at 13:47

Rabbid76 · Answer 1 · 2020-09-16T14:24:31.580

Create a list which specifies the rectangular areas:

rect_range = [
    (250, 300, 250, 199),
    (301, 351, 249, 201),
    (351, 399, 250, 199),
    (251, 301, 310, 252),
    (303, 351, 310, 252),
    (353, 400, 312, 250),
    (251, 300, 372, 314),
    (302, 350, 372, 313),
    (352, 399, 369, 310)]

Create a class with the attributes rect and clicked:

class MyRect:
    def __init__(self, x1, x2, y2, y1):
        self.rect = pygame.Rect(x1+1, y1+1, x2-x1-1, y2-y1-1)
        self.clicked = False

Create a list of objects:

rectObjects = [MyRect(*rr) for rr in rect_range]

Test if a rectangle is clicked in a loop:

for event in pygame.event.get():
    # [...]

    if event.type == pygame.MOUSEBUTTONDOWN:
        for rectObj in rectObjects:
            if rectObj.rect.collidepoint(event.pos):
                rectObj.clicked = True

Draw the objects in a loop:

for rectObj in rectObjects:
    if rectObj.clicked:
        screen.blit(x, rectObj.rect)

how to blit an image multiple times in pygame

1 Answers1