First Person Shooter With P5.js

Hi there, fellow campers. I was learning p5.js and made this really fun project. It’s my first succesful one. Please tell me if you find any glitches or bugs. Thanks!

Just to let you know, click the screen to lock your cursor, and then use WASD to move.

This is actually really incredible. I never realised JavaScript could be used to render 3D graphics!
Only suggestion I would make is to set up some kind of listener to check if the cursor at the viewport edge and push it to the other side to allow for complete rotation.

1 Like

Great job! Be sure to keep us posted :grin:!

1 Like

Wow, that’s really cool! Was this tough to make? I didn’t notice any glitches but here would be some ideas if you plan on working on this project more:

  1. adding jumping
  2. adding shooting to shoot the columns/blocks
  3. make it so you can’t walk through the columns/blocks
  4. make it so you can’t walk off the platform or if you do, you die lol

Anyways, looking forward to seeing more!

1 Like

Thanks for your kind feedback.

1 Like

I used a library called P5.js and it was actually really easy.

  1. I will try to add jumping in the future, but somehow, moving along the y-axis messes up the controls.
  2. Yeah. I will try to do that as well.
  3. Collisions are really tough for me to do but I’ll try.
  4. Gravity is also hard for me, but once again, I’ll try.

Thank you for your kind feedback.

1 Like

Thank you. I used a library called P5.js which is a really easy library to use and can be used to render 2D and 3D things.

I don’t quite understand what you mean by your suggestion. Can you please explain it to me a little more?

1 Like

That’s neat.

I noticed that there seems to be inertia for the camera rotation, i.e. if you spin the camera to the side and lift the mouse off the mouse pad the camera will keep spinning. Kind of cool, but probably not something you actually want.

And yes collision and physics are not super easy to code from the ground up. There might be some third-party libraries (or p5 game engines) you can use.

Keep it up!


When I spin the mouse to turn and my mouse cursor reaches the end of the screen I can’t turn anymore. Tbh it might just be an issue on my browser!

I’m impressed. I can’t even begin to think how you managed to do this. Great job!

1 Like

This is an excellent start!

I seem to encounter an error where the WASD does not move as expected - it’s offset diagoonally.

1 Like

Wow this is cool, i didn’t know js could be used to create this kind of projects, you did a great job, hopefully if you continue adding new features you let us know, keep up the good work :grin:

Thanks. I couldn’t find out a way to stop the camera from spinning like that.

Try clicking the screen first. You can then use W, A, S, and D to move.

Thanks. It comes with time and experience. I’ve been coding for almost four years now.

Sometimes that happens but I don’t know why.

1 Like

Thanks for the kind feedback. Yes, I will notify you all if I update it.

1 Like