• 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.

• 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.

• 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.

• 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.

• 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.

• 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!
}

• 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.