Making tic-tac-toe with Pygame, blit doesn't work

Question

I'm making a tic-tac-toe game using Pygame. Everything is good except that I don't arrive to make image2 and image3, who correspond to X and O, appear even after an hour:(

Here's my code. They are in main() function and image is a background img as its name says and I can see this background when I run the code but image2 and image3.

import pygame, sys, random
from pygame.locals import *
import math

(width, height)  = (600,600)
window = pygame.display.set_mode((width, height))
image = pygame.image.load("background.jpg").convert_alpha()
image2 = pygame.image.load("croix.png").convert_alpha()
image3 = pygame.image.load("rond.png").convert_alpha()

joueur1 = 0
joueur2 = 1

map = [['-', '-', '-'], ['-', '-', '-'], ['-', '-', '-']]

def pleine(map_game):
    for ligne in map_game:
        for symbole in ligne:
            if symbole == '-':
                return False
    return True

def gagne_j1(map_game):
    for ligne in map_game:
        if ligne == [joueur1,joueur1,joueur1]:
            return True
        for indice_colonne in range(3):
            if (map_game[0][indice_colonne] == joueur1 and map_game[1][indice_colonne] == joueur1\
                    and map_game[2][indice_colonne] == joueur1):
                return True

def gagne_j2(map_game):
    for ligne in map_game:
        if ligne == [joueur2, joueur2, joueur2]:
            return True
    for indice_colonne in range(3):
        if (map_game[0][indice_colonne] == joueur2 and map_game[1][indice_colonne] == joueur2 \
              and map_game[2][indice_colonne] == joueur2):
            return True

def turn(num):
    if num%2 == 0:
        num = 0
        image_joueur = image2
    else:
        num = 1
        image_joueur = image3
    return num

def main():
    joueur_actif = 0
    image_joueur = image2

    while True:
        window.blit(image, (0, 0))
        for event in pygame.event.get():
            if event.type == QUIT:
                pygame.quit()
                sys.exit()
            if event.type == pygame.MOUSEBUTTONDOWN:
                if pygame.mouse.get_pressed() == (1,0,0):
                    x,y = pygame.mouse.get_pos()
                    i = math.trunc(y/200)
                    j = math.trunc(x/200)
                    if map[i][j] == '-':
                        map[i][j] = joueur_actif
                        window.blit(image_joueur, (i,j))
                        joueur_actif+=1
                        joueur_actif = turn(joueur_actif)
                        if gagne_j1(map) or gagne_j2(map) or pleine(map):
                            pygame.quit()
                            sys.exit()
        pygame.display.flip()

main()

Answer 1

The scene is redrawn in every frame. So you have to draw the images in the application loop. Iterate over the TicTacToe map and draw an image if tictactoe_map[i][j] is not '-':

tictactoe_map = [['-', '-', '-'], ['-', '-', '-'], ['-', '-', '-']]

def main():
    joueur_actif = 0
    image_joueur = image2

    run = True
    while run:
        for event in pygame.event.get():
            if event.type == QUIT:
                run = False
            if event.type == pygame.MOUSEBUTTONDOWN:
                if pygame.mouse.get_pressed() == (1,0,0):
                    x, y = pygame.mouse.get_pos()
                    i, j = y // 200, x // 200
                    if tictactoe_map[i][j] == '-':
                        tictactoe_map[i][j] = joueur_actif
                        joueur_actif = (joueur_actif + 1) % 2
                        if gagne_j1(tictactoe_map) or gagne_j2(tictactoe_map) or pleine(tictactoe_map):
                            run = False

        window.blit(image, (0, 0))
        for i in range(3):
            for j in range(3):
                if tictactoe_map[i][j] == 0:
                    window.blit(image2, (j*200, i*200))
                elif tictactoe_map[i][j] == 1:
                    window.blit(image3, (j*200, i*200))  
        pygame.display.flip()

    pygame.quit()

---

Complete code:

import pygame, sys, random
from pygame.locals import *
import math

(width, height)  = (600,600)
window = pygame.display.set_mode((width, height))
image = pygame.image.load("background.jpg").convert_alpha()
image2 = pygame.image.load("croix.png").convert_alpha()
image3 = pygame.image.load("rond.png").convert_alpha()

joueur1 = 0
joueur2 = 1

tictactoe_map = [['-', '-', '-'], ['-', '-', '-'], ['-', '-', '-']]

def pleine(map_game):
    for ligne in map_game:
        for symbole in ligne:
            if symbole == '-':
                return False
    return True

def gagne_j1(map_game):
    for ligne in map_game:
        if ligne == [joueur1,joueur1,joueur1]:
            return True
        for indice_colonne in range(3):
            if (map_game[0][indice_colonne] == joueur1 and map_game[1][indice_colonne] == joueur1\
                    and map_game[2][indice_colonne] == joueur1):
                return True

def gagne_j2(map_game):
    for ligne in map_game:
        if ligne == [joueur2, joueur2, joueur2]:
            return True
    for indice_colonne in range(3):
        if (map_game[0][indice_colonne] == joueur2 and map_game[1][indice_colonne] == joueur2 \
              and map_game[2][indice_colonne] == joueur2):
            return True

def main():
    joueur_actif = 0
    image_joueur = image2

    run = True
    while run:
        for event in pygame.event.get():
            if event.type == QUIT:
                run = False
            if event.type == pygame.MOUSEBUTTONDOWN:
                if pygame.mouse.get_pressed() == (1,0,0):
                    x, y = pygame.mouse.get_pos()
                    i, j = y // 200, x // 200
                    if tictactoe_map[i][j] == '-':
                        tictactoe_map[i][j] = joueur_actif
                        joueur_actif = (joueur_actif + 1) % 2
                        if gagne_j1(tictactoe_map) or gagne_j2(tictactoe_map) or pleine(tictactoe_map):
                            run = False

        window.blit(image, (0, 0))
        for i in range(3):
            for j in range(3):
                if tictactoe_map[i][j] == 0:
                    window.blit(image2, (j*200, i*200))
                elif tictactoe_map[i][j] == 1:
                    window.blit(image3, (j*200, i*200))  
        pygame.display.flip()

    pygame.quit()
    sys.exit()

main()