Tech With Tim Logo
Go back

Jumping & Boundaries

Setting Boundaries

In the last tutorial we created a rectangle that we could move around the screen using the arrow keys. However, when we reach the end of the screen the rectangle is still allowed to continue to move. To stop this we need to set up some boundaries and check that our rectangle is within them before moving it again.

To do this we can simply check the x and y coordinates of the rectangle against the dimensions of the screen. When we do this we need to remember that when we draw something in pygame we draw from the top left hand corner of the object. This means the top left corner will be our x and y values while the top right corner will be (x + width, y) and the bottom left will be (x, y + height).

import pygame
pygame.init()

win = pygame.display.set_mode((500,500))
pygame.display.set_caption("First Game")

x = 50
y = 50
width = 40
height = 60
vel = 5

run = True

while run:
    pygame.time.delay(100)

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

    keys = pygame.key.get_pressed()
    
    if keys[pygame.K_LEFT] and x > vel:  # Making sure the top left position of our character is greater than our vel so we never move off the screen.
        x -= vel

    if keys[pygame.K_RIGHT] and x < 500 - vel - width:  # Making sure the top right corner of our character is less than the screen width - its width 
        x += vel

    if keys[pygame.K_UP] and y > vel:  # Same principles apply for the y coordinate
        y -= vel

    if keys[pygame.K_DOWN] and y < 500 - height - vel:
        y += vel

    
    win.fill((0,0,0))
    pygame.draw.rect(win, (255,0,0), (x, y, width, height))   
    pygame.display.update() 
    
pygame.quit()

Now our character can not move off the screen!

Jumping

To jump we need to set up a few variables.

# These go near the top of your program, outside the while loop
isJump = False
jumpCount = 10

Now we are going to check to see if the user hits the space bar. If they do we will change isJump to True and start jumping.

# Goes inside the while loop, under event for moving down
if keys[pygame.K_SPACE]:
    isJump = True

Now when we are jumping we do not want to allow the user to jump again or to be able to move up and down. To disallow the user from doing this we will add another if/else statement.

import pygame
pygame.init()

win = pygame.display.set_mode((500,500))
pygame.display.set_caption("First Game")

x = 50
y = 50
width = 40
height = 60
vel = 5

isJump = False
jumpCount = 10

run = True

while run:
    pygame.time.delay(100)

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

    keys = pygame.key.get_pressed()
    
    if keys[pygame.K_LEFT] and x > vel:  # Making sure the top left position of our character is greater than our vel so we never move off the screen.
        x -= vel

    if keys[pygame.K_RIGHT] and x < 500 - vel - width:  # Making sure the top right corner of our character is less than the screen width - its width 
        x += vel
        
    if not(isJump): # Checks is user is not jumping
        if keys[pygame.K_UP] and y > vel:  # Same principles apply for the y coordinate
            y -= vel

        if keys[pygame.K_DOWN] and y < 500 - height - vel:
            y += vel

        if keys[pygame.K_SPACE]:
            isJump = True
    else:
        # This is what will happen if we are jumping

    
    win.fill((0,0,0))
    pygame.draw.rect(win, (255,0,0), (x, y, width, height))   
    pygame.display.update() 
    
pygame.quit()

We are now going to start writing the code for making the character jump. We are going to implement a quadratic formula for our jumping. This is because ideally we would like our jump to be smooth and look something like this: jump_graph1.png

Inside of the else we will paste the following.

if jumpCount >= -10:
    y -= (jumpCount * abs(jumpCount)) * 0.5
    jumpCount -= 1
else: # This will execute if our jump is finished
    jumpCount = 10
    isJump = False
    # Resetting our Variables

And now our character can jump!

If you are confused by this please refer to the video starting at 11:00.

Note: I use abs() use instead of ** just to eliminate the need for the neg variable seen in the video. Both versions of this code work the same.

Full Code

Here is what your full code should look like.

import pygame
pygame.init()

win = pygame.display.set_mode((500,500))
pygame.display.set_caption("First Game")

x = 50
y = 50
width = 40
height = 60
vel = 5

isJump = False
jumpCount = 10

run = True

while run:
    pygame.time.delay(100)

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

    keys = pygame.key.get_pressed()
    
    if keys[pygame.K_LEFT] and x > vel: 
        x -= vel

    if keys[pygame.K_RIGHT] and x < 500 - vel - width:  
        x += vel
        
    if not(isJump): 
        if keys[pygame.K_UP] and y > vel:
            y -= vel

        if keys[pygame.K_DOWN] and y < 500 - height - vel:
            y += vel

        if keys[pygame.K_SPACE]:
            isJump = True
    else:
        if jumpCount >= -10:
            y -= (jumpCount * abs(jumpCount)) * 0.5
            jumpCount -= 1
        else: 
            jumpCount = 10
            isJump = False
    
    win.fill((0,0,0))
    pygame.draw.rect(win, (255,0,0), (x, y, width, height))   
    pygame.display.update() 
    
pygame.quit()
Design & Development by Ibezio Logo