Develop a game with p5.js (part 2)

Welcome back to the second part on how to develop a game with p5.js. Today we are going to add some interactions to our game. Wouldn’t be a real game if we couldn’t move around something, right?

Now that we already have setup most variables that we need and the scene is set, the rest comes quite easy.

keyPressed()

We just need to add a third function to our code which listens to keyboard input. Whenever some key is pressed that we are interested in, we keep the information in a variable so that we can use that to update our game world.

In other words:

• if we press “W”, we want to move up
• if we press “S” we want to move down
• if we press “A” we want to move left
• if we press “D” we want to move right

First we add a new variable to our little application:

let enemyPositionX = 0;
let enemyPositionY = 0;
let direction = null;

And then we add our keyboard listener code:

function keyPressed() {
  if (key == 'w') {
    direction = 'up';
  }
  if (key == 'a') {
    direction = 'left';
  }
  if (key == 's') {
    direction = 'down';
  }
  if (key == 'd') {
    direction = 'right';
  }
}

With this we now basically have all the information we need. Now it’s time to move something on the screen!

It may seem a bit weird what we are going to do now, but just think of the keyboard event handler that we just wrote to be completely independent of the draw function. Remember, the draw function is called over and over again automatically by p5.js. So the missing part is to interpret the direction we just got and start moving the player!

function draw() {
  
  // Update the world
  if (direction == 'up') {
    playerPositionY = playerPositionY - 1; 
  }
  if (direction == 'left') {
    playerPositionX = playerPositionX - 1; 
  }
  if (direction == 'right') {
    playerPositionX = playerPositionX + 1; 
  }
  if (direction == 'down') {
    playerPositionY = playerPositionY + 1; 
  }

What we are doing here is pretty simple:

• every time p5.js runs our draw function we look at the choosen direction and move the player by one pixel
• This happens by updating the global variable which stores the current player’s location.
• Then the render logic we wrote in part 1 comes into play (clearing background, drawing player, drawing enemy)
• You can make the player faster by increasing the amount of pixels it moves per update.

Code

Find the complete running code for your reference

let playerWeight = 10;
let playerPositionX = 300;
let playerPositionY = 300;
let enemyPositionX = 0;
let enemyPositionY = 0;
let direction = null;

function setup() {
  // setup the random initial location of the enemy
  enemyPositionX = random(500);
  enemyPositionY = random(500);
  createCanvas(500, 500);
}

function draw() {
  
  // Update the world
  if (direction == 'up') {
    playerPositionY = playerPositionY - 1; 
  }
  if (direction == 'left') {
    playerPositionX = playerPositionX - 1; 
  }
  if (direction == 'right') {
    playerPositionX = playerPositionX + 1; 
  }
  if (direction == 'down') {
    playerPositionY = playerPositionY + 1; 
  }
  
  // draw a black background
  background(0);

  // define the fill color for the player
  fill(255, 120, 90);
  // draw a circle (our player)
  circle(playerPositionX, playerPositionY, playerWeight);

  // define the fill color of the enemy
  fill(0, 255, 0);
  // draw the enemy as a circle
  circle(enemyPositionX, enemyPositionY, 20);
}

function keyPressed() {
  if (key == 'w') {
    direction = 'up';
  }
  if (key == 'a') {
    direction = 'left';
  }
  if (key == 's') {
    direction = 'down';
  }
  if (key == 'd') {
    direction = 'right';
  }
}