Making keyPressed() doesn't seem to work in p5.js as it did in Java, how can I make it work or replace it?

p5.js Beginners
1

Hello !

I have a game that I created years ago as a school project in processing Java, and now I’ve been trying to port it to js so that I can put it on a webpage. I am not experienced in JS.

I did a lot of it with available resources online, I think I’ve got most of the simple formatting differences out of the way, and the code now properly displays the environment, my dinosaur and the text at the beginning of the game. Even the “press enter to start” works correctly, but then… My triceratops cannot move when I press RIGHT or LEFT.

I can’t seem to find the problem, the code seems rather straightforward in this regard…

function keyPressed() {
if (keyCode== ENTER) {
if (!gameOn) {
gameOn=true;
dead=false;
meteorY=0;
angle=HALF_PI;
mohammed.jumpHeight=0;
offTime=millis()/1000;
meteorNum=1;
}
}

if (!dead) {
if (keyCode==RIGHT) {
right=true;
mohammed.run();
}
if (keyCode==LEFT) {
right=false;
mohammed.run();
}
}

}

Mohammed is an object of the Triceratops class. I’m not sure why I named him that, maybe inspired by the Raptor Jesus meme. Anyway, Mohammed the Triceratops is the hero of this game, he has to escape the falling meteors. Run is a method of this class. Because he has to be facing whichever way he is running, the boolean “right” is used for his make() method, and also define which way the “run” method makes him go.

Here is my full code:

The Java version (which already works).

The Js version, for which I am asking for help.

The browser console doesn’t give me any error, just warnings about orientation and position captors not being available anymore, but I don’t think I need those ?

The browser in question is waterfox.

However, I also tried testing it in qutebrowser, and I found out in there not even pressing Enter to start the game works.

Looking around, I did see some pages about Javascript, I see there are a lot of different methods for capturing keyboard events, but I can’t find which ones work with Processing…

Thank you in advance, any advice would be greatly appreciated.

2

Hi @superPengato and welcome to the forum!

I think the problem is the names of the arrow-key constants.

In Processing Java, you can use RIGHT and LEFT. In p5.js, you should use RIGHT_ARROW and LEFT_ARROW instead.

This code should work:

if (!dead) {
  if (keyCode == RIGHT_ARROW) {
    right = true;
    mohammed.run();
  }

  if (keyCode == LEFT_ARROW) {
    right = false;
    mohammed.run();
  }
}

For more information, see Transitioning from Processing · processing/p5.js Wiki · GitHub (It is a little outdated, but it can still be a useful reference.)

3

On a side note: I see your project uses p5.js 1.5.0. If you ever update to p5.js 2.x, note that keyboard input works a little differently.

In p5.js 1.x, you can compare constants such as RIGHT_ARROW with the numeric keyCode:

if (keyCode === RIGHT_ARROW) {
  // p5.js 1.x
}

In p5.js 2.x, use code instead:

if (code === RIGHT_ARROW) {
  // p5.js 2.x
}

If you update to p5.js 2.x, change these keyCode comparisons to code. If you continue to use p5.js 1.x, you do not need to make this change.

4

Hello !

Thank you !

This does work, but doesn’t behave exactly as in the java version (it only takes effect when the key is released, meaning you need to spam the key many times to move ).

I tried moving the if block from keyPressed() and into draw() to see if it solved the problem, and it kinda did, but by somewhat changing the game mechanics: The triceratops is now always running and the arrows serve only to change the direction.

Honestly, I think I’m gonna leave it this way; the game is a bit more fun this way.

Still, for future reference, I would like to know how I should have gone about making it work exactly like in the java version (the dinosaur moves right as long as the right arrow is pressed, moves left as long as left arrow is pressed and doesn’t move if neither key is pressed) ?

I tried using the keyPressed boolean as a condition for the run() method to be called, but that didn’t seem to work.

5