Struggling to create smooth player sprite movement using javascript p5 play

Question

I'm building a project where I have a player sprite moving to dodge oncoming enemy sprites. Got the basic movement of sprite input down from the example here ( https://creative-coding.decontextualize.com/making-games-with-p5-play/ ), but I hoped to find a way to make it so that pressing up and left would make it go up and to the left at the same time instead of just moving upwards then to the left right after.

Also want to know if it's possible to have the sprite move in a way that looks smoother like it is being affected by friction like in this example here ( https://editor.p5js.org/leaves2thedark/sketches/KW_P5qqLK , also taken from same website as before), only using keyboard inputs instead of mouse cursor positions. Thanks yall.

    let spr;
function setup() {
  createCanvas(400, 400);
  spr = createSprite(
    width/2, height/3, 40, 40);
  spr.shapeColor = color(255);
}
function draw() {
  background(50);
  fill(255);
  noStroke();
  textAlign(CENTER, CENTER);
  text("use arrow keys, or SPACE to stop",
    width/2, height*0.67);
  drawSprites();
}
function keyPressed() {
  if (keyCode == RIGHT_ARROW) {
    spr.setSpeed(2.5, 0);
  }
  else if (keyCode == DOWN_ARROW) {
    spr.setSpeed(2.5, 90);
  }
  else if (keyCode == LEFT_ARROW) {
    spr.setSpeed(2.5, 180);
  }
  else if (keyCode == UP_ARROW) {
    spr.setSpeed(2.5, 270);
  }
  else if (key == ' ') {
    spr.setSpeed(0, 0);
  }
  return false;
}
```

Answer 1

You need to register/unregister the active keys. Something like this:

 let activeKeys; let spr; function setup() { createCanvas(400, 400); spr = createSprite( width/2, height/3, 40, 40); spr.shapeColor = color(255); activeKeys = { [UP_ARROW]: false, [RIGHT_ARROW]: false, [DOWN_ARROW]: false, [LEFT_ARROW]: false }; } function draw() { background(50); fill(255); noStroke(); textAlign(CENTER, CENTER); text("use arrow keys, or SPACE to stop", width/2, height*0.67); drawSprites(); } function keyPressed() { if (activeKeys[keyCode] === false) { activeKeys[keyCode] = true; } // UP KEYS COMBO if (activeKeys[UP_ARROW] && activeKeys[RIGHT_ARROW]) { spr.setSpeed(2.5, 315); } else if (activeKeys[UP_ARROW] && activeKeys[LEFT_ARROW]) { spr.setSpeed(2.5, 225); } // DOWN KEYS COMBO else if (activeKeys[DOWN_ARROW] && activeKeys[RIGHT_ARROW]) { spr.setSpeed(2.5, 45); } else if (activeKeys[DOWN_ARROW] && activeKeys[LEFT_ARROW]) { spr.setSpeed(2.5, 135); } // SINGLE KEYS else if (activeKeys[UP_ARROW]) { spr.setSpeed(2.5, 270); } else if (keyCode == DOWN_ARROW) { spr.setSpeed(2.5, 90); } else if (keyCode == LEFT_ARROW) { spr.setSpeed(2.5, 180); } else if (keyCode == RIGHT_ARROW) { spr.setSpeed(2.5, 0); } return false; } function keyReleased() { if (activeKeys[keyCode]) { activeKeys[keyCode] = false; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>