How to change rect color on mouse click Python (pygame)

Question

I created a window with a width and height of 800 pixels using pygame then drew rectangles with size 32 to make the window a 25x25 grid. What I want to do is change the color of the rectangle I click to change.

My Code:

def createGrid():
    SCREEN_WIDTH = 800
    SCREEN_HEIGHT = 800
    BLOCK_SIZE = 32
    WHITE = (255,255,255)

    pygame.init()
    frame = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
    pygame.display.set_caption("PathFinder")
    frame.fill(WHITE)
    for y in range(SCREEN_HEIGHT):
            for x in range(SCREEN_WIDTH):
                rect = pygame.Rect(x*BLOCK_SIZE, y*BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1)
                pygame.draw.rect(frame, (0,250,0), rect)


    while True:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit() 
        pygame.display.update()

That question has already been answerd here: https://stackoverflow.com/questions/10990137/pygame-mouse-clicking-detection — Clinton Graham, Dec 30 '19 at 23:13
use `rect = pygame.Rect(...)` to keep rectangle position (every rectangle need own `rect`). Use `pygame.MOUSEBUTTONUP` to recognize mouse click - and then you can use `rect.colidepoint(event.pos)` to check if you clicked rectangle (you have to use it with every `rect`). And then assing new color to variable which you use to display this rectangle (every rectangle new own variable). And you have to draw rectangles inside `while True` — furas, Dec 31 '19 at 00:36

score 0 · Accepted Answer · answered Dec 31 '19 at 00:50

First you should create list with all rects and they colors.

Next you should draw all rect inside while loop.

And finally you have to use event.MOUSEBUTTONDOWN to get mouse click and compare mouse position with every rect on list and change color on list.

import pygame
import sys

SCREEN_WIDTH = 800
SCREEN_HEIGHT = 800
BLOCK_SIZE = 32
WHITE = (255,255,255)

pygame.init()

frame = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("PathFinder")

# create list with all rects
all_rects = []
for y in range(0, SCREEN_HEIGHT, BLOCK_SIZE):
    row = []
    for x in range(0, SCREEN_WIDTH, BLOCK_SIZE):
        rect = pygame.Rect(x, y, BLOCK_SIZE-1, BLOCK_SIZE-1)
        row.append([rect, (0, 255, 0)])            
    all_rects.append(row)

while True:

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()
        elif event.type == pygame.MOUSEBUTTONDOWN:
            # check which rect was clicked and change its color on list
            for row in all_rects:
                for item in row:
                    rect, color = item
                    if rect.collidepoint(event.pos):
                        if color == (0, 255, 0):
                            item[1] = (255, 0, 0)
                        else:
                            item[1] = (0, 255, 0)

    # draw all in every loop

    frame.fill(WHITE)

    for row in all_rects:
        for item in row:
            rect, color = item
            pygame.draw.rect(frame, color, rect)

    pygame.display.flip()

Eventually you could draw all rects before loop and use event to draw new rect on clicked rect. But you still need list with all rects to check which rect was click and what is its color.

score 0 · Answer 2 · answered Dec 31 '19 at 06:36

It depends on what your code is intended to do? This example shows how to paint to the primary display surface but doesn't keep track of which colour is where.

import pygame

white = (255, 255, 255)
red = (255, 0, 0)

size = 32

pygame.init()
s = pygame.display.set_mode((800, 800))
s.fill(white)

# press escape to exit example
while True:
    e = pygame.event.get()
    if pygame.key.get_pressed()[pygame.K_ESCAPE]: break

    x = int(pygame.mouse.get_pos()[0] / size) * size
    y = int(pygame.mouse.get_pos()[1] / size) * size

    if pygame.mouse.get_pressed()[0]:
        pygame.draw.rect(s, red, (x, y, size, size), 0)

    pygame.display.update()
    pygame.time.Clock().tick(60)
pygame.quit()

How to change rect color on mouse click Python (pygame)

2 Answers2