I made a very basic 2d shooter with all the code in 1 single html file: (file_gist). Everything works exactly as I intended it to when I open the file in my native chrome browser. However when I copied the code and placed the corresponding HTML/CSS/JS into the appropriate fields of the IDE codepen, the program does not behave as intended. I can see that the JS is working by use of the visual text indications ive built into the program, but the animation of the square moving up, down left or right based on keyboard input wont animate. Neither will the 'bullets' animate as intended either. Was wondering how the IDE is interpreting the code differently than my native browser and how to fix this issue.
I think the issue may have to do with the following line of code but im not sure:
document.addEventListener("keydown", keyBoardInput);
(Pen)
I'm not sure how it works in your end, but for changing top and left, you need to append the unit, in this case px.
So instead of player.style.left = playerLeft;, do player.style.left = playerLeft + "px";