iam trying to make pygame tic-tac-toe but dont work

January 3, 2022

so i am doing that when i click in this box load X image . so when i run it, it is working but when i move my mouse a bit the X image go away ? did i do somthing roung whith my code?

my code :

import pygame
import time

from pygame import surface

pygame.init()
(width,height) = (400,600)
screen = pygame.display.set_mode((width,height))
pygame.display.set_caption("PUBG M")
clock = pygame.time.Clock()
test_font = pygame.font.Font('game/cool/pixeled/pixeled.ttf', 20)



back_surface = pygame.image.load('game/cool/XO.png')
back_surface = pygame.transform.scale(back_surface, (400,600))
sccor_font = test_font.render('sccore : ',False, 'white')

f11 = pygame.draw.rect(screen, ('white'), (5,5,110,110))
f12 = pygame.draw.rect(screen, ('white'), (145,5,110,110))
f13 = pygame.draw.rect(screen, ('white'), (280,5,115,110))

f21 = pygame.draw.rect(screen, ('white'), (5,140,110,110))
f22 = pygame.draw.rect(screen, ('white'), (145,140,110,110))
f23 = pygame.draw.rect(screen, ('white'), (280,140,115,110))

f31 = pygame.draw.rect(screen, ('white'), (5,275,110,110))
f32 = pygame.draw.rect(screen, ('white'), (145,275,110,110))
f33 = pygame.draw.rect(screen, ('white'), (280,275,115,110))


running = True
while running:

   screen.blit(back_surface,(0,0))
   screen.blit(sccor_font,(20,450))


   for event in pygame.event.get():
       if event.type == pygame.QUIT:
           pygame.quit()
           exit()

   if event.type == pygame.MOUSEBUTTONUP:
       pos = pygame.mouse.get_pos()

       if f11.collidepoint(pos):
           xf11 = pygame.image.load('game/cool/XX.png')
           xf11 = pygame.transform.scale(xf11, (100,100))
           screen.blit(xf11,(f11))
           

       if f12.collidepoint(pos):
           print("rrrrrrr")     

       if f13.collidepoint(pos):
           print("sssssss")       

   

   pygame.display.update() 
   clock.tick(30)

i am not sure if i did not right some thing or i am just dump and blind bacause i spend 45 min trying to see did i do somthing roung

>Solution :

You have to redraw the entire scene every frame. Add the clicked position to a list and draw the images at the positions saved in the list in the application loop.
Manage the 9 fields in a list and check whether one of the fields is clicked in a loop.

import pygame

pygame.init()
(width,height) = (400,600)
screen = pygame.display.set_mode((width,height))
pygame.display.set_caption("PUBG M")
clock = pygame.time.Clock()
test_font = pygame.font.SysFont('game/cool/pixeled/pixeled.ttf', 20)

back_surface = pygame.image.load('game/cool/XO.png')
back_surface = pygame.transform.scale(back_surface, (400,600))
xf11 = pygame.image.load('game/cool/XX.png')
xf11 = pygame.transform.scale(xf11, (100,100))

fields = [pygame.Rect(5+140*x, 5+135*y, 110, 110) for x in range(3) for y in range(3)]
xf11_list = []

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

        if event.type == pygame.MOUSEBUTTONUP:
            for rect in fields:
                if rect.collidepoint(event.pos):
                    xf11_list.append(rect)
               
    screen.blit(back_surface,(0,0))
    screen.blit(sccor_font,(20,450))
    for rect in fields:
        pygame.draw.rect(screen, 'white', rect)
    for pos in xf11_list:
        screen.blit(xf11, pos)
    pygame.display.update() 
    clock.tick(30)   

pygame.quit()
exit()