why when the x and y size are not the same the grid is not showing properly

问题

I have this code that is used to display a grid but when size_x and size_y are not the same the grid is not shown properly. For exemple, if size_x = 16 and size_y =8, the grid that is displayed is this:

If size_x and size_y are the same everything works fine, if size_x and size_y are the same in this case there value is 16:

import pygame
 
# Define some colors
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
GREEN = (0, 255, 0)
RED = (255, 0, 0)
 
# This sets the WIDTH and HEIGHT of each grid location
WIDTH = 10
HEIGHT = 10
 
# This sets the margin between each cell
MARGIN = 5


# gride size
size_x=16
size_y=16

# window size
window_size_x=size_x*WIDTH+((size_x+1)*MARGIN)
window_size_y=size_y*HEIGHT+((size_y+1)*MARGIN)
#window_size=


# Create a 2 dimensional array. A two dimensional
# array is simply a list of lists.
grid = []
for row in range(size_x):
    # Add an empty array that will hold each cell
    # in this row
    grid.append([])
    for column in range(size_y):
        grid[row].append(0)  # Append a cell
 
# Set row 1, cell 5 to one. (Remember rows and
# column numbers start at zero.)
grid[1][5] = 1
 
# Initialize pygame
pygame.init()
 
# Set the HEIGHT and WIDTH of the screen
WINDOW_SIZE = [window_size_x, window_size_y]
screen = pygame.display.set_mode(WINDOW_SIZE)
 
# Set title of screen
pygame.display.set_caption("Array Backed Grid")
 
# Loop until the user clicks the close button.
done = False
 
# Used to manage how fast the screen updates
clock = pygame.time.Clock()
 
# -------- Main Program Loop -----------

print(grid)

    while not done:
        for event in pygame.event.get():  # User did something
            if event.type == pygame.QUIT:  # If user clicked close
                done = True  # Flag that we are done so we exit this loop
            elif event.type == pygame.MOUSEBUTTONDOWN:
                # User clicks the mouse. Get the position
                pos = pygame.mouse.get_pos()
                # Change the x/y screen coordinates to grid coordinates
                column = pos[0] // (WIDTH + MARGIN)
                row = pos[1] // (HEIGHT + MARGIN)
                # Set that location to one
                grid[row][column] = 1
                print("Click ", pos, "Grid coordinates: ", row, column)
     
        # Set the screen background
        screen.fill(BLACK)
     
        # Draw the grid
        for row in range(size_x):
            for column in range(size_y):
                color = WHITE
                if grid[row][column] == 1:
                    color = GREEN
                pygame.draw.rect(screen,
                                 color,
                                 [(MARGIN + WIDTH) * column + MARGIN,
                                  (MARGIN + HEIGHT) * row + MARGIN,
                                  WIDTH,
                                  HEIGHT])
     
        # Limit to 60 frames per second
        clock.tick(60)
     
        # Go ahead and update the screen with what we've drawn.
        pygame.display.flip()
     
    # Be IDLE friendly. If you forget this line, the program will 'hang'
    # on exit.
    pygame.quit()

回答1:

You accidentally swapped size_x and size_y. The x axis is the horizontal axis and the y axis is the vertical axis. The rows are the y dimension from top to bottom and the columns are the x dimension from left to right. Hence size_y is the number of rows and size_x is the number of columns:

# Create a 2 dimensional array. A two dimensional
# array is simply a list of lists.
grid = []
for row in range(size_y):                              # <--- size_y
    # Add an empty array that will hold each cell
    # in this row
    grid.append([])
    for column in range(size_x):                       # <--- size_x
        grid[row].append(0)  # Append a cell

while not done:
    # [...]

     # Draw the grid
    for row in range(size_y):                          # <--- size_y
        for column in range(size_x):                   # <--- size_x
            color = WHITE
            if grid[row][column] == 1:
                color = GREEN
            pygame.draw.rect(screen,
                             color,
                             [(MARGIN + WIDTH) * column + MARGIN,
                              (MARGIN + HEIGHT) * row + MARGIN,
                              WIDTH,
                              HEIGHT])

回答2:

You got the math wrong at the nested for loops drawing the squares, this fix:

for row in range(size_x):
    for column in range(size_y):
        color = WHITE
        if grid[row][column] == 1:
            color = GREEN
        pygame.draw.rect(screen,
                         color,
       **notice the change** --------v
                         [(MARGIN + WIDTH) * row + MARGIN,
                          (MARGIN + HEIGHT) * column + MARGIN,
                          WIDTH,
                          HEIGHT])

You need draw the rectangle using the width as your first point (upper left corner).

来源：https://stackoverflow.com/questions/65656047/why-when-the-x-and-y-size-are-not-the-same-the-grid-is-not-showing-properly

标签

python

pygame