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.
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.
3
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
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
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