了解 CodePen 的 IDE 如何与 2d 射击游戏一起工作
Understanding how CodePen's IDE works with a 2d shooter
我制作了一个非常基本的 2d 射击游戏，所有代码都在一个 html 文件中：(file_gist)。当我在本机 chrome 浏览器中打开文件时，一切都完全按照我的预期进行。然而，当我复制代码并将相应的 HTML/CSS/JS 放入 IDE codepen 的适当字段时，程序没有按预期运行。我可以看到 JS 通过使用程序中内置的可视文本指示来工作，但是基于键盘输入的正方形向上、向下或向右移动的动画不会动画。 'bullets' 也不会按预期设置动画。想知道 IDE 对代码的解释与我的本机浏览器有何不同，以及如何解决此问题。
我认为问题可能与以下代码行有关，但我不确定：
document.addEventListener("keydown", keyBoardInput);
(Pen)
我不确定它最终是如何工作的，但是要更改 top 和 left，您需要附加单位，在本例中为 px.
所以不要 player.style.left = playerLeft;，而是 player.style.left = playerLeft + "px";
我制作了一个非常基本的 2d 射击游戏，所有代码都在一个 html 文件中：(file_gist)。当我在本机 chrome 浏览器中打开文件时，一切都完全按照我的预期进行。然而，当我复制代码并将相应的 HTML/CSS/JS 放入 IDE codepen 的适当字段时，程序没有按预期运行。我可以看到 JS 通过使用程序中内置的可视文本指示来工作，但是基于键盘输入的正方形向上、向下或向右移动的动画不会动画。 'bullets' 也不会按预期设置动画。想知道 IDE 对代码的解释与我的本机浏览器有何不同，以及如何解决此问题。
我认为问题可能与以下代码行有关，但我不确定：
document.addEventListener("keydown", keyBoardInput);
(Pen)
我不确定它最终是如何工作的，但是要更改 top 和 left，您需要附加单位，在本例中为 px.
所以不要 player.style.left = playerLeft;，而是 player.style.left = playerLeft + "px";