Im trying to make the game Towers of hanoi with pygame.
My biggest struggle is now that i have to move the disks, this is my code so far, but it is not moving the disks and i dont know why. I think it is also registering only the first mouseclick and not the second. but it isnt removing the disc either.
import pygame, sys
from pygame.locals import*
pygame.init()
screen = pygame.display.set_mode((500, 300))
pygame.display.set_caption("Towers of Hanoi")
# Colours
BLACK = ( 0, 0, 0)
WHITE = (255, 255, 255)
RED = (255, 0, 0)
GREEN = ( 0, 255, 0)
BLUE = ( 0, 0, 255)
SILVER = (192, 192, 192)
AQUA = (0, 255, 255)
PURPLE = (128, 0, 128)
# Background
background = screen.fill(WHITE)
# Platform
pygame.draw.rect(screen, BLUE,(50, 250, 400, 20))
# Towers
tower_left = pygame.draw.line(screen, SILVER,(125, 100), (125, 249), 20)
tower_middle = pygame.draw.line(screen, SILVER,(250, 100), (250, 249), 20)
tower_right = pygame.draw.line(screen, SILVER,(375, 100), (375, 249), 20)
# Discs
big = pygame.draw.ellipse(screen, RED,(70, 235, 115, 15))
middle = pygame.draw.ellipse(screen, GREEN,(75, 220, 105, 15))
small = pygame.draw.ellipse(screen, BLACK,(85, 205, 85, 15))
# List of towers (3 being the biggest)
left_tower = [big, middle, small]
middle_tower = []
right_tower = []
count = 0
# Click locations
clicks = []
for c in range(0, 1):
for event in pygame.event.get():
if event.type == MOUSEBUTTONDOWN:
x, y = pygame.mouse.get_pos()
clicks.append([x, y])
# Main game loop
while True:
for event in pygame.event.get():
if event.type == QUIT:
pygame.quit()
sys.quit()
# Getting the mouseposition and moving the disc
elif event.type == MOUSEBUTTONDOWN:
x, y = pygame.mouse.get_pos()
first_click = x, y
# Remove the disc if it is in the range of the first tower
if (x > 100) and (x < 140) and (y > 150) and (y < 250):
if len(left_tower) == 0:
print "That's not valid"
elif len(left_tower) in (big, middle, small):
upper_disc = left_tower[-1]
left_tower.remove(upper_disc)
if event.type == MOUSEBUTTONDOWN:
x, y = pygame.mouse.get_pos()
second_click = x, y
# Add the upper disc to the tower where the second click was
if (x > 140) and (x < 220) and (y > 150) and (y < 250):
middle_tower.append(upper_disc)
elif (x > 350) and (x < 450) and (y > 150) and (y < 250):
right_tower.append(upper_disc)
else:
left_tower.append(upper_disc)
pygame.display.update()
pygame.time.wait(10)
A couple things I see. There appears to be some indentation issues with your code. When I fix this how I believe it should be fixed it never falls into the last elif so elif len(left_tower) in (big, middle, small): is never returning True.
Related
Game Target is for android device.
When i add the buttons, they seem only to work one at a time, how can i make it so more button could work?
Here's the function:
def button_move(player_car):
pressed = pygame.mouse.get_pressed()
pos = pygame.mouse.get_pos()
moved = False
if pressed[0] == 1:
if 300 < pos[0] < 400 and 800 < pos[1] < 900:
player_car.move_forward()
moved = True
if 300 < pos[0] < 400 and 1100 < pos[1] < 1200:
player_car.move_backward()
moved = True
if 100 < pos[0] < 200 and 950 < pos[1] < 1050:
player_car.rotate(left=True)
if 500 < pos[0] < 600 and 950 < pos[1] < 1050:
player_car.rotate(right=True)
if not moved:
player_car.reduce_speed()
[...] they seem only to work one at a time [...]"
You only have one mouse. You have to use the "touch" events. Use the FINGERDOWN and FINGERUP event. Store the position of the finger into a dictionary when a FINGERDOWN event occurs and remove it on FINGERUP:
fingers = {}
run = True
while run:
clock.tick(60)
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
if event.type == pygame.FINGERDOWN:
x = event.x * window.get_height()
y = event.y * window.get_width()
fingers[event.finger_id] = x, y
if event.type == pygame.FINGERUP:
fingers.pop(event.finger_id, None)
# [...]
Use the positions to detect if a button is touched. Use pygame.Rect and pygame.Rect.collidepoint for the "touch" detection. e.g.:
rect = pygame.Rect(300, 800, 100, 100)
touched = False
for finger, pos in fingers.items():
if rect.collidepoint(pos):
touched = True
Minimal example:
import pygame
pygame.init()
window = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()
buttons = [
pygame.Rect(25, 25, 100, 100),
pygame.Rect(175, 25, 100, 100),
pygame.Rect(25, 175, 100, 100),
pygame.Rect(175, 175, 100, 100)]
colors = [(64, 0, 0), (64, 64, 0), (0, 64, 0), (0, 0, 64)]
colorsH = [(255, 0, 0), (255, 255, 0), (0, 255, 0), (0, 0, 255)]
fingers = {}
run = True
while run:
clock.tick(60)
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
if event.type == pygame.FINGERDOWN:
x = event.x * window.get_height()
y = event.y * window.get_width()
fingers[event.finger_id] = x, y
if event.type == pygame.FINGERUP:
fingers.pop(event.finger_id, None)
highlight = []
for i, rect in enumerate(buttons):
touched = False
for finger, pos in fingers.items():
if rect.collidepoint(pos):
touched = True
highlight.append(touched)
# the same with list comprehensions
#highlight = [any(r.collidepoint(p) for _, p in fingers.items()) for _, r in enumerate(buttons)]
window.fill(0)
for rect, color, colorH, h in zip(buttons, colors, colorsH, highlight):
c = colorH if h else color
pygame.draw.rect(window, c, rect)
pygame.display.flip()
pygame.quit()
exit()
I'm trying to create this program in pygame to study code/math, but i don't know how to lock the mouse position around a circle in pygame, any help?
import pygame
pygame.init()
x = 250
y = 250
window = pygame.display.set_mode((500, 500))
pygame.display.set_caption("around circle")
#line to be created
def Lin(xref, yref):
lin = pygame.draw.line(window, (250, 250, 0), (x, y), (xref, yref), 1)
window_open = True
while window_open:
pygame.display.update()
window.fill((0, 0, 0))
for event in pygame.event.get():
if event.type == pygame.QUIT:
window_open = False
mousepos = pygame.mouse.get_pos()
xref = mousepos[0]
yref = mousepos[1]
# 2 circles to get only the border
cir0 = pygame.draw.circle(window, (250, 250, 250), (x, y), 100, 1)
cir1 = pygame.draw.circle(window, (250, 250, 250), (x, y), 99, 1)
Lin(xref, yref)
pygame.quit()
I would do something similar to Mike67 answer, but would take advantage of the features of pygame's Vector's (see docs here).
import pygame
pygame.init()
x = 250
y = 250
radius = 100
center = pygame.Vector2(x, y)
window = pygame.display.set_mode((500, 500))
pygame.display.set_caption("around circle")
#line to be created
def Lin(start_point, vector):
pygame.draw.line(window, (250, 250, 0), start_point, start_point+vector, 1)
window_open = True
while window_open:
pygame.display.update()
window.fill((0, 0, 0))
for event in pygame.event.get():
if event.type == pygame.QUIT:
window_open = False
mousepos = pygame.mouse.get_pos()
line_vector = pygame.Vector2(mousepos) - center
if line_vector.length() > radius:
line_vector.scale_to_length(radius)
# 2 circles to get only the border
cir0 = pygame.draw.circle(window, (250, 250, 250), (x, y), radius, 1)
cir1 = pygame.draw.circle(window, (250, 250, 250), (x, y), radius-1, 1)
Lin(center, line_vector)
pygame.quit()
I modified the Lin() function as well.
EDIT:
From your comment you indicated that you want it to always scale to the side of the circle. In that case just skip the test if line_vector.length() > radius and always scale it. You might be tempted to only scale it if length != radius, but when comparing floating point calculated numbers they are very unlikely to actually be the same (because of the decimal places involved) and you could see if the difference is less than a threshold and call them equal, but it really isn't worth the complication.
import pygame
pygame.init()
x = 250
y = 250
radius = 100
center = pygame.Vector2(x, y)
window = pygame.display.set_mode((500, 500))
pygame.display.set_caption("around circle")
#line to be created
def Lin(start_point, vector):
pygame.draw.line(window, (250, 250, 0), start_point, start_point+vector, 1)
window_open = True
while window_open:
pygame.display.update()
window.fill((0, 0, 0))
for event in pygame.event.get():
if event.type == pygame.QUIT:
window_open = False
mousepos = pygame.mouse.get_pos()
line_vector = pygame.Vector2(mousepos) - center
line_vector.scale_to_length(radius)
# 2 circles to get only the border
cir0 = pygame.draw.circle(window, (250, 250, 250), (x, y), radius, 1)
cir1 = pygame.draw.circle(window, (250, 250, 250), (x, y), radius-1, 1)
Lin(center, line_vector)
pygame.quit()
To keep the line in the circle, just adjust the mouse x/y coordinates relative to the mouse distance from the center.
Here is the updated code:
import pygame
import math
pygame.init()
x = 250
y = 250
window = pygame.display.set_mode((500, 500))
pygame.display.set_caption("around circle")
#line to be created
def Lin(xref, yref):
lin = pygame.draw.line(window, (250, 250, 0), (x, y), (xref, yref), 1)
window_open = True
while window_open:
pygame.display.update()
window.fill((0, 0, 0))
for event in pygame.event.get():
if event.type == pygame.QUIT:
window_open = False
mousepos = pygame.mouse.get_pos()
xref = mousepos[0]
yref = mousepos[1]
# get mouse distance from center
dist = math.sqrt((xref-x)**2 + (yref-y)**2)
if (dist > 100): # if mouse outside circle, adjust x/y proportionally
xref = x + (xref - x) * (100/dist)
yref = y + (yref - y) * (100/dist)
# 2 circles to get only the border
cir0 = pygame.draw.circle(window, (250, 250, 250), (x, y), 100, 1)
cir1 = pygame.draw.circle(window, (250, 250, 250), (x, y), 99, 1)
Lin(xref, yref)
pygame.quit()
I am trying to animate two characters in my game. I want the animation to play without any key being held down. Every tutorial I have seen requires the player to press a key for an animation to play. How would you get the dolphin to be animated, but still work with the existing code I have? Currently I have the dolphin set to frame[0] so it is visible when you run it. Any help is appreciated!
Images and Sound FX download: https://mega.nz/#F!7O5zRQDK!YQhrs_zavCvdSdAMwEXEIQ
Game I am basing off of: https://www.youtube.com/watch?v=9jjy9PjbeiA&t=3s
import pygame
import random
import time
import os
os.environ['SDL_VIDEO_WINDOW_POS'] = "%d, %d" %(0, 20)
pygame.init()
SIZE = W, H = 400, 700
screen = pygame.display.set_mode(SIZE)
clock = pygame.time.Clock()
# colours
RED = (255, 0, 0)
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
BACKGROUND = (94, 194, 222)
STRIPE = (60, 160, 190)
LANELINE = (255, 255, 255)
x1 = 30
x2 = 330
lane1 = 30
lane2 = 130
lane3 = 230
lane4 = 330
y = 530
width = 40
height = 64
toggle1 = 0
toggle2 = 0
target_x1 = 30
target_x2 = 330
vel_x = 10
def drawScene():
screen.fill(BACKGROUND)
pygame.draw.polygon(screen, STRIPE, ((200, 700), (300, 700), (400, 600), (400, 500)))
pygame.draw.polygon(screen, STRIPE, ((0, 700), (100, 700), (400, 400), (400, 300)))
pygame.draw.polygon(screen, STRIPE, ((0, 500), (0, 600), (400, 200), (400, 100)))
pygame.draw.polygon(screen, STRIPE, ((0, 300), (0, 400), (400, 0), (300, 0)))
pygame.draw.polygon(screen, STRIPE, ((0, 100), (0, 200), (200, 0), (100, 0)))
pygame.draw.line(screen, LANELINE, (100, 0), (100, 700), 2)
pygame.draw.line(screen, LANELINE, (200, 0), (200, 700), 4)
pygame.draw.line(screen, LANELINE, (300, 0), (300, 700), 2)
dolphinSheet = pygame.image.load("dolphinSheet.png").convert()
cells = []
for n in range(6):
dolphinW, dolphinH, = (31, 74)
rect = pygame.Rect(n * dolphinW, 0, dolphinW, dolphinH)
image = pygame.Surface(rect.size).convert()
image.blit(dolphinSheet, (0, 0), rect)
alpha = image.get_at((0, 0))
image.set_colorkey(alpha)
cells.append(image)
playerImg = cells[0]
# main loop
run = True
while run:
clock.tick(60)
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
if event.type == pygame.KEYDOWN:
if event.key == pygame.K_a:
pygame.mixer.music.load('percussiveHit.mp3')
pygame.mixer.music.play()
toggle1 += 1
if toggle1 % 2 == 1:
target_x1 += 100
else:
target_x1 -= 100
elif event.key == pygame.K_d:
pygame.mixer.music.load('percussiveHit.mp3')
pygame.mixer.music.play()
toggle2 += 1
if toggle2 % 2 == 1:
target_x2 -= 100
else:
target_x2 += 100
if x1 < target_x1:
x1 = min(x1 + vel_x, target_x1)
else:
x1 = max(x1 - vel_x, target_x1)
if x2 < target_x2:
x2 = min(x2 + vel_x, target_x2)
else:
x2 = max(x2 - vel_x, target_x2)
pygame.draw.rect(screen, RED, (x1, y, width, height))
pygame.draw.rect(screen, RED, (x2, y, width, height))
drawScene()
# players
screen.blit(playerImg, (x1 + 4, y - 5))
screen.blit(playerImg, (x2 + 4, y - 5))
pygame.display.update()
pygame.quit()
Update the image based on a real-time millisecond value using pygame.time.get_ticks() which returns the number of milliseconds since pygame.init().
The idea is the code remembers the time the frame was changed, and then waits until X seconds have elapsed (playerImg_show_for below), before switching to the next image in the set.
...
playerImg = cells[0]
playerImg_cell = -1 # start at first cell
playerImg_shown_at = 0 # time when this frame (cell) was shown
playerImg_show_for = 200 # milliseconds
# main loop
run = True
while run:
clock.tick(60)
ms_now = pygame.time.get_ticks() # milliseconds since start
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
# ... handle keys, etc. removed for the sake of brevity
pygame.draw.rect(screen, RED, (x1, y, width, height))
pygame.draw.rect(screen, RED, (x2, y, width, height))
drawScene()
# players
# If this frame of animation has been shown for long enough, then
# switch to the next frame
if ( ms_now - playerImg_shown_at > playerImg_show_for ):
playerImg_cell += 1 # find the next cell, with wrap-around
if ( playerImg_cell >= len( cells ) ):
playerImg_cell = 0
playerImg_shown_at = ms_now # use new start time
playerImg = cells[playerImg_cell] # use new animation cell
screen.blit(playerImg, (x1 + 4, y - 5))
screen.blit(playerImg, (x2 + 4, y - 5))
pygame.display.update()
pygame.quit()
Of course this would be better suited to being a PyGame sprite object, and all handled in the sprite's update() function.
This is the code I have started to use to make a start menu.
# we need some colours!!
black = (0,0,0)
white = (255,255,200)
red = (200,0,0)
green = (0, 200, 0)
bright_red = (255, 0 ,0)
bright_green = (0, 255, 0)
bright_white = (255, 255, 255)
def main():
pygame.init()
screen = pygame.display.set_mode((600, 600))
pygame.display.set_caption("CrazyPongMainMenu")
menu = cMenu(50, 50, 20, 5, "vertical", 100, screen,
[("Start Game", 1, None),
("Options", 2, None),
("Exit", 3, None)])
menu.set_center(True, True)
menu.set_alignment("center", "center")
state = 0
prev_state = 1
rect_list = []
pygame.event.set_blocked(pygame.MOUSEMOTION)
while 1:
if prev_state != state:
pygame.event.post(pygame.event.Event(EVENT_CHANGE_STATE, key = 0))
prev_state = state
e = pygame.event.wait()
if e.type == pygame.KEYDOWN or e.type == EVENT_CHANGE_STATE:
if state == 0:
rect_list, state = menu.update(e, state)
elif state == 1:
print ("Start Game!")
state = 0
elif state == 2:
print ("Options!")
state = 0
else:
print ("Exit!")
pygame.quit()
sys.exit()
if e.type == pygame.QUIT:
pygame.quit()
sys.exit()
mouse = pygame.mouse.get_pos()
#print(mouse)
if 200+150 > mouse[0] > 200 and 250+30 > mouse[1] > 250:
pygame.draw.rect(screen, bright_green,(200, 250, 150, 30))
else:
pygame.draw.rect(screen, green,(200, 250, 150, 30))
if 200+150 > mouse[0] > 200 and 290+21 > mouse[1] > 290:
pygame.draw.rect(screen, bright_white,(200, 290, 150, 21))
else:
pygame.draw.rect(screen, white,(200, 290, 150, 21))
if 200+150 > mouse[0] > 200 and 318+25 > mouse[1] > 318:
pygame.draw.rect(screen, bright_red,(200, 318, 150, 25))
else:
pygame.draw.rect(screen, red,(200, 318, 150, 25))
pygame.display.update(rect_list)
if __name__ == ("__main__"):
main()
I would like to put text onto the 3 rectangles but i don't know how to. If anybody could please tell my how to put the text onto the rectangles it will be much appreciated!
Check out this stack overflow question:
How to add text into a pygame rectangle
Specifically these bits:
self.font = pygame.font.SysFont('Arial', 25)
def addText(self):
self.screen.blit(self.font.render('Hello!', True, (255,0,0)), (200, 100))
pygame.display.update()
Basically you want to define a font
Then blit it onto the screen, where render takes the args (text, antialias (you want true), color)
and finally update
Just out of curiosity, why does a game lag when I load an image as well as display pygame shapes for example rectangles, circles and ellipses. I have this code where you shoot the ghosts that fall down (I'm still working on the shooting part). I made the cannon out of pygame shapes. But when I run it the images of the ghosts are prefect but the images of the cannons lag and disappears and reappear and so on. Is there any way to stop this lag or disappear and reappear thing? I'm running python 2.6 with windows vista.
import pygame, sys, random, math
from pygame.locals import *
WINDOWHEIGHT = 600
WINDOWWIDTH = 600
FPS = 30
BACKGROUNDCOLOR = (255, 255, 255)
TEXTCOLOR = (0, 0, 0)
WHITE = (255, 255, 255)
BLACK = ( 0, 0, 0)
BROWN = (139, 69, 19)
DARKGRAY = (128, 128, 128)
BGCOLOR = WHITE
GHOSTSPEED = 10
GHOSTSIZE = 20
ADDNEWGHOSTRATE = 8
def keyToPlayAgain():
while True:
for event in event.type.get():
if event.type == QUIT:
pygame.quit()
sys.exit()
elif event.type == KEYDOWN:
return
def getAngle(x1, y1, x2, y2):
# Return value is 0 for right, 90 for up, 180 for left, and 270 for down (and all values between 0 and 360)
rise = y1 - y2
run = x1 - x2
angle = math.atan2(run, rise) # get the angle in radians
angle = angle * (180 / math.pi) # convert to degrees
angle = (angle + 90) % 360 # adjust for a right-facing sprite
return angle
def Text(text, font, surface, x, y):
textobj = font.render(text, 2, TEXTCOLOR)
textrect = textobj.get_rect()
textrect.topleft = (x, y)
surface.blit(textobj, textrect)
pygame.init()
mainClock = pygame.time.Clock()
DISPLAYSURF = pygame.display.set_mode((WINDOWHEIGHT, WINDOWWIDTH))
pygame.display.set_icon(pygame.image.load('s.icon'))
pygame.display.set_caption('Ghost Invasion Pacfighters')
pygame.mouse.set_visible(False)
font = pygame.font.SysFont(None, 48)
gameOverSound = pygame.mixer.Sound('gameover.wav')
pygame.mixer.music.load('background.mid')
ghostImage = pygame.image.load('ghosts.png')
dotImage = pygame.image.load('dot.png')
dotRect = dotImage.get_rect()
creditsPage = pygame.image.load('credits.png')
titlePage = pygame.image.load('title.png')
pygame.time.wait(10000)
DISPLAYSURF.blit(creditsPage, (0, 0))
pygame.time.wait(10000)
DISPLAYSURF.blit(titlePage, (0, 0))
pygame.display.update()
cannonSurf = pygame.Surface((100, 100))
cannonSurf.fill(BGCOLOR)
pygame.draw.circle(cannonSurf, DARKGRAY, (20, 50), 20)
pygame.draw.circle(cannonSurf, DARKGRAY, (80, 50), 20)
pygame.draw.rect(cannonSurf, DARKGRAY, (20, 30, 60, 40))
pygame.draw.circle(cannonSurf, BLACK, (80, 50), 15)
pygame.draw.circle(cannonSurf, BLACK, (80, 50), 20, 1)
pygame.draw.circle(cannonSurf, BROWN, (30, 70), 20)
pygame.draw.circle(cannonSurf, BLACK, (30, 70), 20, 1)
health = 100
score = 0
topScore = 0
while True:
ghosts = []
moveLeft = moveRight = moveUp = moveDown = False
reverseCheat = slowCheat = False
ghostAddCounter = 0
pygame.mixer.music.play(-1, 0.0)
while True:
for event in pygame.event.get():
if event.type == QUIT:
pygame.quit()
sys.exit()
elif event.type == KEYDOWN:
if event.key == K_x:
bombs()
elif event.type == ESCAPE:
pygame.quit()
sys.exit()
mousex, mousey = pygame.mouse.get_pos()
for cannonx, cannony in ((100, 500), (500, 500)):
degrees = getAngle(cannonx, cannony, mousex, mousey)
rotatedSurf = pygame.transform.rotate(cannonSurf, degrees)
rotatedRect = rotatedSurf.get_rect()
rotatedRect.center = (cannonx, cannony)
DISPLAYSURF.blit(rotatedSurf, rotatedRect)
pygame.draw.line(DISPLAYSURF, BLACK, (mousex - 10, mousey), (mousex + 10, mousey))
pygame.draw.line(DISPLAYSURF, BLACK, (mousex, mousey - 10), (mousex, mousey + 10))
pygame.draw.rect(DISPLAYSURF, BLACK, (0, 0, WINDOWWIDTH, WINDOWHEIGHT), 1)
pygame.display.update()
if not reverseCheat and not slowCheat:
ghostAddCounter += 1
if ghostAddCounter == ADDNEWGHOSTRATE:
ghostAddCounter = 0
newGhost = {'rect': pygame.Rect(random.randint(0, WINDOWWIDTH-GHOSTSIZE), 0 - GHOSTSIZE, GHOSTSIZE, GHOSTSIZE),
'speed': (GHOSTSIZE),
'surface':pygame.transform.scale(ghostImage, (GHOSTSIZE, GHOSTSIZE)),
}
ghosts.append(newGhost)
for s in ghosts:
if not reverseCheat and not slowCheat:
s['rect'].move_ip(0, s['speed'])
elif reverseCheat:
s['rect'].move_ip(0, -5)
elif slowCheat:
s['rect'].move_ip(0, -1)
for s in ghosts[:]:
if s['rect'].top > WINDOWHEIGHT:
health -= 10
DISPLAYSURF.fill(BACKGROUNDCOLOR)
Text('Score: %s' % (score), font, DISPLAYSURF, 10, 0)
Text('Top score: %s' % (topScore), font, DISPLAYSURF, 10, 40)
Text('Health: %s' % (health), font, DISPLAYSURF, 10, 560)
for s in ghosts:
DISPLAYSURF.blit(s['surface'], s['rect'])
pygame.display.update()
mainClock.tick(FPS)
pygame.mixer.music.stop()
gameOverSound.play()
Text('GAME OVER', font, windowSurface, (WINDOWWIDTH / 3), (WINDOWHEIGHT / 3))
pygame.display.update()
keyToPlayAgain()
pygame.display.update()
gameOverSound.stop()
The problem is that you draw your cannons, update the display, then clear the display, draw the other stuff, and update the display again. You basically never see the falling ghosts and the cannons at the same time. This results in the flickering you see.
So remove pygame.display.update() from this for loop
for cannonx, cannony in ((100, 500), (500, 500)):
...
pygame.display.update()
and put DISPLAYSURF.fill(BACKGROUNDCOLOR) at the top of your while loop (or at least before you draw anything):
while True:
for event in pygame.event.get():
...
mousex, mousey = pygame.mouse.get_pos()
DISPLAYSURF.fill(BACKGROUNDCOLOR)
for cannonx, cannony in ((100, 500), (500, 500)):
...
It's best to clear the background once at the start of your code that draws everything, and call pygame.display.update() once at the end of that drawing code.