javascript - 这在 JavaScript 中可能吗？

Question

我想在 JavaScript中创建一个类似于ElastoMania的游戏。

我想知道，使用 div 是否不可能进行碰撞检测，因为它们是方形的，并且游戏原理围绕着开车上坡等？

这在画布上可行吗？

另外，使用 jQuery 之类的库会减慢 JS 游戏的运行速度吗？我注意到大多数游戏都是用 vanilla JS 构建的，所以我认为为这种应用程序（游戏）使用库是个坏主意。

谢谢

更新

这似乎是一个复杂的游戏！我可能仍然会继续。如果有人想加入这个项目，请联系我。

Answer 1

将模型与演示文稿分开。

游戏逻辑和“物理”将需要自定义脚本，与演示模型（即 div）无关。

您可能可以在演示方面使用 jQuery，但这是一个特殊情况，性能密集型应用程序，而且，大多数游戏都是用“vanilla”脚本编写的，这是有原因的。

Answer 2

如果您使用 Canvas 标签，这是很有可能的。

http://developer.mozilla.org/en/Canvas_tutorial

这是 Canvas 中的俄罗斯方块游戏，任何人都可以使用该游戏背后的库：

http://tommysmind.com/gamejs/

如果您正在寻找一些可能有帮助的库：

http://openjsan.org/（一堆任何人都可以贡献的库）

看起来这样的游戏将是相当努力的构建。它可能类似于超级马里奥兄弟的这个实现：

http://nihilogic.dk/labs/mario/mario_small_music.htm

Answer 3

这是一个非常好的球模拟器的 javascript 实现。
也许你可以从中学到一些东西。也许它可用于您项目中的轮胎碰撞检测。该演示表明可以在合理的性能下用 javascript 实现物理模型。

您可能已经知道，有一个类似 ElastoMania 的游戏的开源实现，名为X-Moto
X-Moto 使用ODE。

编辑：我刚刚找到了 Box2D 的 JavaScript 实现：Box2D-JS

Answer 4

如果它在斜坡上行驶，我宁愿使用一维数组来存储每个点的高度，并在每次需要检查玩家在地面上的位置时引用 id。因此，您基本上需要斜率的图像以及每个 x 处的相应 y 集：

  ___
 /   ---
/       ____

024443330000...等

但是有一个问题：那里不可能有理想的垂直边缘，因为它们每 1 x 需要 2 y 点。

Answer 5

您可以通过使用不同颜色的 div 边框来获得斜率效果。

<div style="border-left: solid 10px black; border-top: solid 10px red">

会给你一个对角线边框，你可能会发现它很有用。