Player Controls
Time 1.6 hrs

Difficulty Beginner
Prerequisites Interactivity
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None


Player Controls


This work is shared under the following license: Creative Commons BY-SA-NC


Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
5 mins
Game Basics
The Pitch
  • The core component of any game is input.
  • Without input, a video game it just a movie.
  • With input, it comes to life. The player has control over the game.
  • Want to add some life to your rectangles and ellipses?
  • In this unit, you'll look at how to create player-controlled characters.

    10 mins
    Keyboard Input
    Getting Started
    • Keyboard controls are one of the most basic game inputs.
    • A player presses left, and the character on screen goes left.
    • In p5js, keyboard control can be detected in a few different ways:

    The keyIsDown() function. This can go in your draw loop.

    if (keyIsDown(LEFT_ARROW)) {
      x -= 5;

    The keyPressed() event. This is a standalone function.

    function keyPressed() {
      if (key == "g") {
        // Do something!

    WASD or Arrow Keys?

    • Have you ever wondered why some games use arrow keys, and some games use WASD?
    • It all comes down to ergonomics.
    • Many people are right handed, and use the mouse with their right hand.
    • The arrow keys are also on the right side of the keyboard. This makes using them awkward :(
    • The WASD keys are on the left side, and are in almost the same position as the arrow keys.
    • You can use either option, or both (some old-school two player games are controlled by both).
    • As you design your game, it's up to you to decide which you prefer.
    5 mins
    Top-Down Controls
    Digging In

    • Top-down controls place the game's camera directly above the player's head.
    • This type of control is common in strategy games, where precision is important.

    • Another common perspective isn't to look directly top-down, because we'd only see the tops of people's heads.
    • Third-person view in many games is close to top-down, but at a slight angle.
    • Many games that aren't fully 3D use this view to simulate a three-dimensional world, called 2.5D

    Example Top-Down Controls:

    Check out the code in the p5js editor.

    5 mins
    Side-Scroller Controls
    Digging In

    • Side scrolling is common in arcade and action games.
    • The camera looks at the player from the side, and follows them forward, backwards, up, and down.
    • Side scrolling games often layer the background to create a sense of depth.

    • Other perspectives include first-person and over-the-shoulder views.
    • These are common in 3D games, particularly action and adventure games.
    • First-person view is an immersive perspective, looking through the eyes of your character.
    5 mins
    Detecting Distance
    Code Examples
    • We can check the distance between two points with the dist() function.
    • This function takes a pair of x, y coordinates, and returns the distance between these objects.
    • Checking distance is a way to detect when two objects interact with each other.

    5 mins
    Detecting Position
    Code Examples
    • If we know the x, y and width, height of a rectangle, we can detect when a point is inside those coordinates.
    • To do this, we use the && statement, which means AND, to check for more than one logic condition.
    if (mouseX > myShape.x && mouseX < (myShape.x + myShape.width) 
     && mouseY > myShape.y && mouseY < (myShape.y + myShape.height)) {
      // Do something!

    60 mins
    Your Mini-Game

    • Create your own mini-game using the p5js editor
    • Think mini! This isn't a full-fledged game: just an example of player control and movement.
    • Create a player object that can move and interact with a few different objects.
      • Does the player stop when they reach the edge of the screen?
      • Or can they loop to the other side, like pac-man?
      • Are there other objects in your scene? Do they move too?
      • Can you detect when the player gets close to an object?
      • Can you change the scene based on where the player position is?
    • Challenge yourself to explore player movement and position detection.
    • When you're happy with your game, submit a link to your p5js sketch as evidence of your learning.

    There are no records to display.
    Powered by Gibbon v27.0.00dev

    Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
    Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
    Created under the GNU GPL | Credits | Translators | Support