如何修复图像冲突 - Pygame

Question

I'm pretty new to Pygame and I don't really understand collision and images. My game is a basic screen saver animation but my image bounces the wrong way when it touches the borders.

This is the image(Note: I resized the image in photoshop): https://lh3.googleusercontent.com/kN3Hrnzx2W1Fln0kkmYymfycyU3R4FCjt-3e9hGINPkblk00pEwJFbxOCJ8wW8rA6sg

import pygame
pygame.init()

width, height = (624, 392)
bg = (0,0,0)
img = pygame.image.load(r"C:\Users\victo\Downloads\sony_dvd.png")
win = pygame.display.set_mode((width, height))

pygame.display.set_caption("Screen Saver")
win.fill(bg)
clock = pygame.time.Clock()

x = 0
y = 0
w = 78
h = 49
vel = 2
direct = 'se'
running = True
while running:
    clock.tick(27)

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    if direct == 'nw':
        x = x - vel
        y = y - vel
        win.blit(img, (x, y))
        if x <= 10:
            direct = 'sw'
        elif y <= 10:
            direct = 'ne'
    if direct == 'ne':
        x = x + vel
        y = y - vel
        win.blit(img, (x, y))
        if x >= 614 - w:
            direct = 'nw'
        elif y <= 10:
            direct = 'se'
    if direct == 'sw':
        x = x - vel
        y = y + vel
        win.blit(img, (x, y))
        if x <= 10:
            direct = 'se'
        elif y >= 392 - h:
            direct = 'nw'
    if direct == 'se':
        x = x + vel
        y = y + vel
        win.blit(img, (x, y))
        if x >= 614 - w:
            direct = 'sw'
        elif y >= 382 - h:
            direct = 'ne'

    pygame.display.update()

pygame.quit()

Answer 1

Nothing gets drawn on the screen that you do not draw, and conversely everything you draw on the screen stays there unless you draw over it.

You are getting after images of the things you draw because the old images drawn are still on the screen.

The easiest way to stop that is to fill(bg) the screen each frame (at the start of your loop) before you redraw the images.

while running:
    clock.tick(27)

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    win.fill(bg) # <--- add this here

There are other ways, but that is the simplest for someone starting out.

A more complicated approach is just to draw over the area that your moved image used to cover with a section of the background, but for most simple situations just redrawing the entire thing is easier.

Edit:

The OP edited and changed the question after getting an answer to the original question of why it was getting ghost trails behind the image. Normally I believe this is not considered good form and so would not answer the revised question, however the OP is new and the issue is a simple typo so I will address it anyway.

There is a small typo in the code which is why it is bouncing the wrong way of some of the edges. You have the ne and sw flipped in the nw check. This:

    if direct == 'nw':
        x = x - vel
        y = y - vel
        win.blit(img, (x, y))
        if x <= 10:
            direct = 'sw'
        elif y <= 10:
            direct = 'ne'

should be:

        if direct == 'nw':
            x = x - vel
            y = y - vel
            win.blit(img, (x, y))
            if x <= 10:
                direct = 'ne'
            elif y <= 10:
                direct = 'sw'

Answer 2

win.fill(bg) needs to go inside while loop.