User Interaction

In the previous lesson, we learned how to draw various things on the screen. This lesson will introduce keyboard and mouse controls. Let's start with our MAN image.

import JoBase

man = Image(MAN)

def loop():
    man.draw()

run()

To put the image in motion, we'll increment its position on the x axis.

import JoBase

man = Image(MAN)

def loop():
    man.x += 1
    man.draw()

run()

You should see our image moving to the right. How can we control this with the keyboard? The code below uses an if condition to check if the right arrow is being pressed.

import JoBase

man = Image(MAN)

def loop():
    if key.right:
        man.x += 1

    man.draw()

run()

Let's add a new control for moving to the left. For this, we decrement the position on the x axis.

import JoBase

man = Image(MAN)

def loop():
    if key.right:
        man.x += 1

    if key.left:
        man.x -= 1

    man.draw()

run()

Now our image can move left and right! We can also add up and down controls by changing the y position.

import JoBase

man = Image(MAN)

def loop():
    if key.right:
        man.x += 1

    if key.left:
        man.x -= 1

    if key.up:
        man.y += 1

    if key.down:
        man.y -= 1

    man.draw()

run()

Check the Key class for more information on keyboard controls. Now let's change the image tint when the mouse is pressed.

import JoBase

man = Image(MAN)

def loop():
    if key.right:
        man.x += 1

    if key.left:
        man.x -= 1

    if key.up:
        man.y += 1

    if key.down:
        man.y -= 1

    if cursor.press:
        man.color = YELLOW

    if cursor.release:
        man.color = WHITE

    man.draw()

run()

In the code above, we use the cursor variable to access the state of the mouse. Cursor press and release are activated whenever the user presses or releases a button.

User input is one of the most import functions of a game. Try controlling the image with different keys.