How to create a 2d top-down movement system where moving while holding two keys is possible in processing?

Question

So, Im trying to teach myself how to make smaller games and I wanted to make a top-down game. I'm still generally new to coding so my code isn't the best. I am trying to create a movement system, but when I hold two keys, only the last press gets used by the code. This was confirmed by me checking if they get registered by using a print(key); statement.

So far, I tried to use booleans that switch on and off using the keyPressed() and keyReleased() methods. I also tried this inside of the player class, which as of right now is just a rect that has it's x and y variables updated deepending on the key that is pressed. The current movement code comes from a modified version of a pong game I made in processing, where the movement did work. Attached under is my code. Anyone got any tips?

boolean gameStart = false;

boolean up = false;
boolean down = false;
boolean left = false;
boolean right = false;
 
Player p;

void setup(){
  size(1000,1000);
  p = new Player();
}

void draw(){
  if(!gameStart){
    menu();
  }
  else{
    game();
  }
}

void menu(){
  background(0);
  textSize(90);
  
  stroke(110);
  strokeWeight(10);
  fill(0);
  rectMode(CENTER);
  rect(500,600,300,150);
  fill(255);
  text("GAME",385,300);
  text("PLAY",400,625);
  if(mousePressed && ((mouseX > 350 && mouseX < 650) && (mouseY > 525 && mouseY < 675))){
    gameStart = true;
    noStroke();
  }
}

void keyPressed(){
  if(key == 'w'){
    up = true;
  }
  else if(key == 's'){
    down = true;
  }
  else if(key == 'd'){
    right = true;
  }
  else if(key == 'a'){
    left = true;
  }
}

void keyReleased(){
  if(key == 'w'){
    up = false;
  }
  else if(key == 's'){
    down = false;
  }
  else if(key == 'd'){
    right = false;
  }
  else if(key == 'a'){
    left = false;
  }
}

void game(){
  background(0);
  p.update();
  p.render();
}

class Player{
  
  float x = 500;
  float y = 500;
  
  
    
  
  void player(float x, float y){
    this.x = x;
    this.y = y;
  }
  
  void update(){
    if(up){
      y-=7.5;
    }
    else if(down){
      y+=7.5;
    }
    else if(left){
      x-=7.5;
    }
    else if(right){
      x+=7.5;
    }
  }
  void render(){
    fill(255,0,0);
    rect(x,y,100,100);
  }
}
  
  

Answer 1

The following source code will move a rectangle diagonally when two keys are pressed simultaneously. A boolean array is used to keep track of keyPresses.

boolean[] keyDwn = new boolean[4];

final int _keyA = 65;
final int _keyW = 87;
final int _keyS = 83;
final int _keyD = 68;

int x, y;

void setup() {
  size(600, 600);
  surface.setTitle("A=up : S=left : W=down : D=right : AS=diagonal : WD=diagonal ");
  // init values
  keyDwn[0] = false;
  keyDwn[1] = false;
  keyDwn[2] = false;
  keyDwn[3] = false;
  fill(0, 0, 255); // color for rectangle
  x = width/2;  
  y = height/2; 
}

void draw() {
  background(209);
  moveObj();
  rect(x, y, 100, 100);
}

void keyPressed() {
  if (keyCode == _keyA) {
    keyDwn[0] = true;
    println("keyA pressed = ", keyCode);
  }
  if (keyCode == _keyW) {
    keyDwn[1] = true;
    println("keyW pressed = ", keyCode);
  }
  if (keyCode == _keyS) {
    keyDwn[2] = true;
    println("keyS pressed = ", keyCode);
  }
  if (keyCode == _keyD) {
    keyDwn[3] = true;
    println("keyD pressed = ", keyCode);
  }
}

void keyReleased() {
  if (keyCode == _keyA) {
    keyDwn[0] = false;
  }
  if (keyCode == _keyW) {
    keyDwn[1] = false;
  }
  if (keyCode == _keyS) {
    keyDwn[2] = false;
  }
  if (keyCode == _keyD) {
    keyDwn[3] = false;
  }
}

void moveObj() {
  if (keyDwn[0]) y -= 3;
  if (keyDwn[1]) y += 3;
  if (keyDwn[2]) x -= 5;
  if (keyDwn[3]) x += 5;
}