Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring the code to an IDE like Codepen and running it there, the program did not function as expected. Although the JavaScript was executing based on the text indicators I implemented, the animation of the square moving in response to keyboard input or the bullets' animations were not working properly. I am curious about why the IDE is interpreting the code differently from my native browser and how to resolve this discrepancy.
I suspect that the culprit might be this particular line of code, but I'm uncertain:
document.addEventListener("keydown", keyBoardInput);
(Pen)