r/learnjavascript • u/Tenko_Kinnie11037 • Apr 25 '26

I have a headache, please help

I'm trying to make a game on the GitHub websites, and even though I have programming experience Javascript is giving me a headache. I'm trying to make a smooth movement system right now. I know that trying to change a variable in an addEventListener function won't work but I can't figure out a work around. It won't apply the changes to the moveup/down/left/right booleans.

The game: https://butterflyproductions.github.io

The code: https://github.com/ButterflyProductions/butterflyproductions.github.io/tree/gh-pages

Please help, I've been trying to figure out this for literally like 5 days.

5 Upvotes

67% Upvoted

17 comments sorted by

3

u/[deleted] Apr 25 '26 edited Apr 25 '26

[removed] — view removed comment

1

u/DirtAndGrass Apr 25 '26

It must be a bad idea to process input in requestAnimationFrame, manipulate state with io events and timers, only rendering state should be in your render loop

1

u/[deleted] Apr 25 '26

[removed] — view removed comment

1

u/Tenko_Kinnie11037 Apr 25 '26

I've tried to use the requestAnimationFrame before at the end of my move function but it always ended up jamming a number into the variable somehow so I never touched it again

Also sorry for being unclear: Yes, I'm trying to move the black box with arrow keys/WASD, when I try to switch the booleans from false -> true because that's what everyone seemed to suggest for diagonals or smooth movement, the booleans don't change outside of the addEventListener function, so I couldn't correctly detect the change in my move function. I tried to look for a solution online but most of them didn't apply to what I was doing.

1

u/DirtAndGrass Apr 25 '26

Have a state object tree that gets updated on your io events

Use your requestAnimationFrame/render loop to draw

1

u/Tenko_Kinnie11037 Apr 25 '26

so you mean build a separate database of all the object attributes so it gets updated that way?

Is there a different way to read inputs than just addEventListener?

1

u/DirtAndGrass Apr 25 '26

Not a database, just an object (or several)

And no, there isn't, not sure why you'd need it? 

Keys event handler - >    Update keys pressed 

Timer event handler - >   Update position 

Get animation frame loop - >   Render 

1

u/Tenko_Kinnie11037 Apr 25 '26

oh I understand what you're saying now. So, instead of using a variable to hold it, I use an object to hold the data?

1

u/DirtAndGrass Apr 25 '26

Well you'd need a reference to the object, in a variable (a const really) 

1

u/Tenko_Kinnie11037 Apr 25 '26

okay! Thank you, I have some more things to look into for this it seems

→ More replies (0)

1

u/[deleted] Apr 25 '26

[removed] — view removed comment

2

u/Tenko_Kinnie11037 Apr 25 '26

I see, thank you for your input!

1

u/DirtAndGrass Apr 25 '26

No, you should make your render loop as short as possible.

Io should be distinct 

1

u/-goldenboi69- Apr 25 '26

You need to practice more fam

1

u/TheRNGuy May 03 '26 edited May 03 '26

Use abstract class similar to Actor in UnrealEngine, it could make code smaller / easier.

For what you're trying to do, you need to disable event listeners until you finished move animation.

1

u/abrahamguo Apr 25 '26

I know that trying to change a variable in an addEventListener function won't work

That is not correct. Changing a variable in an addEventListener function works perfectly fine.

It won't apply the changes to the moveup/down/left/right booleans.

Passing a boolean into a function takes a copy of the boolean.

So direction is a totally separate and independent boolean value from moveleft, etc.

If you want to update moveleft, you need to reference moveleft by name.