image showing until mouse button is up in pygame?

Question

when I click on the image it is supposed to show me an image on top of it and the image stays until the mouse button is up so i put if event.type == pygame.MOUSEBUTTONUP: then blit the image but still it stays for a second after the mouse button is up im sure its because of my if statement here is my code:

where my problem is:

for i in range(4):
    pygame.draw.rect(screen, (colors[i]), (17 + 80 * i, 265, 50, 50))
    pygame.draw.rect(screen, (0,0,0), (17 + 80 * i, 265, 50, 50),5)
    if mouse_x > mouse_pos_x_left[i] and mouse_x < mouse_pos_x_right[i]:
        if mouse_y > 5.4 and mouse_y < 6.26:
            pygame.draw.rect(screen, (255,255,255), (17 + 80 * i, 265, 50, 50), 5)
            if event.type == pygame.MOUSEBUTTONDOWN:
                food_selected = foods[i]
                screen.blit(check, (17 + 80 * i, 210, 50, 50))  
            if event.type == pygame.MOUSEBUTTONUP:
                screen.blit(check, (17 + 80 * i, 210, 50, 50))
            if click == 3:
                click = 0

all my code:

import pygame
import pdb
import random as r
pygame.init()
screen = pygame.display.set_mode((325,325))
running = True
colors = [(199,203,132), (255,0,0), (0,255,0), (84,87,44)]
mouse_pos_x_left = [0.4, 1.98, 3.62, 5.22]
mouse_pos_x_right = [1.26, 2.86, 4.46, 6.06]
foods = ['bread', 'tomato', 'lettuce', 'ham']
food_selected = ''
customer1 = pygame.image.load('customer1.png')
food_box = pygame.image.load('food_box.png')
check = pygame.image.load('check.png')
same = False
#rand
random_num_1 = r.randint(1,4)
random_num_2 = r.randint(1,4)
randoms = [1,2,3,4]
food_1 = ''
food_2 = ''
click = 0
able = False
"""Bugs:
- when selected same food as customer and clicked on other food it removes checkmark
- when clicked on food shows checkmark for a sec
- when selected same food as customer and then chose another same food as customer first checkmark removes 
"""

while running:
    same_foods = False
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        screen.fill((255,255,255))
        pos = pygame.mouse.get_pos()
        mouse_x = pos[0] / 50
        mouse_y = pos[1] / 50
        mouse = pygame.mouse.get_pos()
        #draw foods:
        for i in range(4):
            pygame.draw.rect(screen, (colors[i]), (17 + 80 * i, 265, 50, 50))
            pygame.draw.rect(screen, (0,0,0), (17 + 80 * i, 265, 50, 50),5)
            if mouse_x > mouse_pos_x_left[i] and mouse_x < mouse_pos_x_right[i]:
                if mouse_y > 5.4 and mouse_y < 6.26:
                    pygame.draw.rect(screen, (255,255,255), (17 + 80 * i, 265, 50, 50), 5)
                    if event.type == pygame.MOUSEBUTTONDOWN:
                        food_selected = foods[i]
                        screen.blit(check, (17 + 80 * i, 210, 50, 50))  
                    if event.type == pygame.MOUSEBUTTONUP:
                        screen.blit(check, (17 + 80 * i, 210, 50, 50))
            if click == 3:
                    click = 0   
        #customer:
        customer1_img = pygame.transform.scale(customer1, (150,150))
        food_box_img = pygame.transform.scale(food_box, (100, 125))
        screen.blit(customer1_img, (50,50))
        screen.blit(food_box_img, (170,0))
        #random food:
        for i in range(4):
            #if random number is == 1 
            if random_num_1 == randoms[i]:
                #then food_1 == to the first food
                food_1 = foods[i]
                #then draw the first food 
                pygame.draw.rect(screen, (colors[i]), (195, 5, 50, 50))
            if random_num_2 == randoms[i]:
                food_2 = foods[i]
                pygame.draw.rect(screen, (colors[i]), (195, 60, 50, 50))
            if food_1 == food_2:
                same_foods = True
                if click == 1:
                    img = pygame.transform.scale(check, (30,30))
                    screen.blit(img, (285, 10))
                if click == 2:
                    screen.blit(img, (285, 70))
            if same_foods == False:
                if food_selected == food_1:
                    same = True
                    img = pygame.transform.scale(check, (30,30))
                    screen.blit(img, (285, 10))
                else:
                    same = False
                if food_selected == food_2:
                    same = True
                    img = pygame.transform.scale(check, (30,30))
                    screen.blit(img, (285, 70))
                else:
                    same = False
                if same:
                    click = 0
            pass

    pygame.display.flip()
pygame.quit()

Rabbid76 · Accepted Answer · 2021-07-31T15:30:46.093

I recommend using pygame.Rect.collidepoint for the mouse click detection. See Pygame mouse clicking detection

Add a list that indicates if a button is clicked:

clicked = [False, False, False, False]

Toggle the state of the button saved in the list when the mouse button is clicked:

if event.type == pygame.MOUSEBUTTONDOWN:
    for i in range(4):
        if pygame.Rect(17 + 80 * i, 265, 50, 50).collidepoint(event.pos):
            clicked[i] = not clicked[i]

Do not draw the scene in the event loop. Draw the scene in the application loop, depending on the variables that indicate the state of the game.
Do not scale the images in the application loop. Scale the images once before the loop. Scaling the images every frame is a waste of performance and causes the game to lag:

# [...]

customer1_img = pygame.transform.scale(customer1, (150,150))
food_box_img = pygame.transform.scale(food_box, (100, 125))
check_img = pygame.transform.scale(check, (30,30))

clicked = [False, False, False, False]

# application loop
while running:
    same_foods = False

    # event loop
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.MOUSEBUTTONDOWN:
            for i in range(4):
                if pygame.Rect(17 + 80 * i, 265, 50, 50).collidepoint(event.pos):
                    clicked[i] = not clicked[i]
   
    # clear display
    screen.fill((255,255,255))

    # draw scene 
    mouse_pos = pygame.mouse.get_pos()
    for i in range(4):
        pygame.draw.rect(screen, (colors[i]), (17 + 80 * i, 265, 50, 50))
        pygame.draw.rect(screen, (0,0,0), (17 + 80 * i, 265, 50, 50),5)
        if pygame.Rect(17 + 80 * i, 265, 50, 50).collidepoint(mouse_pos):
            pygame.draw.rect(screen, (255,255,255), (17 + 80 * i, 265, 50, 50), 5)

    for i in range(4):
        if clicked[i]:
            screen.blit(check, (17 + 80 * i, 210, 50, 50))

    screen.blit(customer1_img, (50,50))
    screen.blit(food_box_img, (170,0))
     
    # [...]

    # update display
    pygame.display.flip()

pygame.quit()

The typical PyGame application loop has to:

handle the events by calling either pygame.event.pump() or pygame.event.get().
update the game states and positions of objects dependent on the input events and time (respectively frames)
clear the entire display or draw the background
draw the entire scene (blit all the objects)
update the display by calling either pygame.display.update() or pygame.display.flip()
limit the frames per second to limit CPU usage with pygame.time.Clock.tick

@Morris Note, `[False for i in range(4)]` is called [List comprehensions](https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions) and generates `[False, False, False, False]` — Rabbid76, Jul 31 '21 at 15:36
THANK YOUso much you are the most helpful person i met in months <3 — Morris, Jul 31 '21 at 16:19

image showing until mouse button is up in pygame?

1 Answers1