CODEWITHSUNDEEP
pythonpygame
Shees Hunain
Shees Hunain

Reputation: 45

I want to blit an image on key press in pygame

I am trying to create a Tic tac toe game in pygame. I want to display an image on screen when a key is pressed. Pressing the escape key allows me to quit game however when I press key 1 to blit the image nothing happens. Here is the code

import pygame
from pygame.locals import (
    K_1,
    K_2,
    K_3,
    K_4,
    K_5,
    K_6,
    K_7,
    K_8,
    K_9,
    K_ESCAPE,
    K_UP,
    KEYDOWN,
    QUIT
)
clock = pygame.time.Clock()
pygame.init()

# Constants
display_width = 300
display_height = 300
white = (255, 255, 255)
black = (0, 0, 0)
run = True

# Creating game screen
display = pygame.display.set_mode((300, 300))
pygame.display.set_caption("Tic Tac Toe Game")
display.fill(white)

# importing images to pygame
circle_image = pygame.image.load("resizedimage1.png")
cross_image = pygame.image.load("resizedimage2.png")

# main game loop
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False
        elif event.type == KEYDOWN:
            if event.key == K_ESCAPE:
                run = False
            elif event.key == K_1:
                display.blit(cross_image, (10, 10))
                clock.tick(30)

    display.fill(white)
    pygame.draw.line(display, black, (100, 0), (100, 300))
    pygame.draw.line(display, black, (200, 0), (200, 300))
    pygame.draw.line(display, black, (0, 100), (300, 100))
    pygame.draw.line(display, black, (0, 200), (300, 200))
    pygame.display.update()

pygame.quit()

Upvotes: 2

Views: 363

Answers (2)

Rabbid76
Rabbid76

Reputation: 210878

Of course you have to draw an blit all the objects after display.fill(), because pygame.Surface.fill fill the Surface with a solid color.
Anyway, I recommend to create a list of images for the nine fields of the game. Init the list by None:

field = [None] * 9

Set the corresponding filed in the list if a button is pressed. Note list indices start at 0:

elif event.key == K_1:
    field[0] = cross_image

Draw the fields of the list in a loop. Use enumerate() to iterate through the list. The row of a field can be computed by the // (floor division) operator and the column by the % (modulo) operator (see Binary arithmetic operations):

for i, img in enumerate(field):
    if img:
        column = i % 3
        row = i // 3
        display.blit(img, (column * 100 + 10, row * 100 + 10))

Example code:

import pygame
from pygame.locals import (
    K_1, K_2, K_3, K_4, K_5, K_6, K_7, K_8, K_9,
    K_ESCAPE, K_UP, KEYDOWN,
    QUIT
)
clock = pygame.time.Clock()
pygame.init()

# Constants
display_width = 300
display_height = 300
white = (255, 255, 255)
black = (0, 0, 0)
run = True

# Creating game screen
display = pygame.display.set_mode((300, 300))
pygame.display.set_caption("Tic Tac Toe Game")
display.fill(white)

# importing images to pygame
circle_image = pygame.image.load("resizedimage1.png")
cross_image = pygame.image.load("resizedimage2.png")

field = [None] * 9

# main game loop
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False
        elif event.type == KEYDOWN:
            if event.key == K_ESCAPE:
                run = False
            elif event.key == K_1:
                field[0] = cross_image

    display.fill(white)
    pygame.draw.line(display, black, (100, 0), (100, 300))
    pygame.draw.line(display, black, (200, 0), (200, 300))
    pygame.draw.line(display, black, (0, 100), (300, 100))
    pygame.draw.line(display, black, (0, 200), (300, 200))

    for i, img in enumerate(field):
        if img:
            column = i % 3
            row = i // 3
            display.blit(img, (column * 100 + 10, row * 100 + 10))

    pygame.display.update()

pygame.quit()

Upvotes: 1

Christian
Christian

Reputation: 749

You have to put the line

display.fill(white)

at the top of your while run. Because now you are rendering the picture and in the next frame you paint everything white. So you are not able to see the image.

You also should use the event KEYUP. Because KEYDOWN will be fired multiple times, so it will lead to flickering effects.

Upvotes: 1

Related Questions