How to fill in colour between the grid in my snake application

Question

I am having this problem where I can draw a grid for my snake but I cant fill in the colour between it.It seems like the problem is that because the grid on the surface overrides the actual colour of the background but I dont know how to fix this, can anyone who knows more about pygame help. See line 74 of my code and that is the colour it should be. How could I optimise this simple python pygame code

import pygame
import time
import random

pygame.init()

display_width = 960
display_height = 540
display = pygame.display.set_mode((display_width,display_height))
pygame.display.set_caption("Snake")

pureblue = (0,0,255)
purered = (255,0,0)
puregreen = (0,255,0)
green = (0,150,0)
white = (255,255,255)
black = (1,1,1)
grey = (75,75,75)
darkgrey = (50,50,50)


clock = pygame.time.Clock()

snake_block = 10
snake_speed = 5

font_style = pygame.font.SysFont(None, 50)

def drawGrid(surf):
    blockSize = snake_block 
    for x in range(display_width):
        for y in range(display_height):
            rect = pygame.Rect(x*blockSize, y*blockSize,blockSize, blockSize)
            pygame.draw.rect(surf, darkgrey, rect, 1)
grid_surf = pygame.Surface(display.get_size())
drawGrid(grid_surf)

def message(msg, colour):
    text = font_style.render(msg, True, colour)
    display.blit(text, [display_width/2, display_height/2])

def SnakeGameLoop():
    game_over = False

    X = display_width/2
    Y = display_height/2

    X_change = 0
    Y_change = 0

    while not game_over:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                game_over = True
            if event.type == pygame.KEYDOWN:
                if event.key == pygame.K_LEFT:
                    X_change = -snake_block
                    Y_change = 0
                elif event.key == pygame.K_RIGHT:
                    X_change = snake_block
                    Y_change = 0
                elif event.key == pygame.K_UP:
                    X_change = 0
                    Y_change = -snake_block
                elif event.key == pygame.K_DOWN:
                    X_change = 0
                    Y_change = snake_block

        if X >= display_width or X < 0 or Y >= display_height or Y < 0:
            game_over = True

        X += X_change
        Y += Y_change
        display.fill(grey)
        display.blit(grid_surf, (0,0))

        pygame.draw.rect(display,puregreen,[X,Y,snake_block,snake_block])

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

    message("You lost", purered)
    pygame.display.update()
    time.sleep(2)

    pygame.quit()
    quit()
SnakeGameLoop()

Answer 1

You need to fill the grid Surface with the background color:

def drawGrid(surf):

    surf.fill(grey) # <--- ADD

    blockSize = snake_block 
    for x in range(display_width):
        for y in range(display_height):
            rect = pygame.Rect(x*blockSize, y*blockSize,blockSize, blockSize)
            pygame.draw.rect(surf, darkgrey, rect, 1)

grid_surf = pygame.Surface(display.get_size())
drawGrid(grid_surf)

Since the grid Surface covers the entire display it is not necessary to clear the display in the application loop:

def SnakeGameLoop():
    # [...]

    while not game_over:
        # [...]

        # display.fill(grey) <--- DELETE

        display.blit(grid_surf, (0,0))

        pygame.draw.rect(display,puregreen,[X,Y,snake_block,snake_block])

        pygame.display.update()
 
        # [...]