Question

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

我很想知道，使用div会发现碰撞是不可能的，因为它们是方形的，而游戏原理是围绕着斜坡等进行的？

这在画布上是否可行？

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

由于

更新

这似乎是一场复杂的游戏！我可能仍然继续使用它。如果有人想跳上这个项目，请contact me.

Answer 1

将您的模型与演示文稿分开。

游戏逻辑和“物理”将需要自定义脚本，并且与表示模型（即div）没有任何关系。

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

Answer 2

如果您使用Canvas标签，则非常有可能。

以下是Canvas中的俄罗斯方块游戏，任何人都可以使用此游戏背后的图书馆：

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

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

看起来这样的游戏将是一项非常努力的构建。它可能类似于超级马里奥兄弟的这种实现：

Answer 3

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

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

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

Answer 4

如果它正在向上滑行，我宁愿使用一维阵列来存储每个点的高度，每次我需要检查玩家在地面上的位置时都会引用id。所以，你基本上需要一个斜率的图像和每个x的相应的y-s集合：

  ___
 /   ---
/       ____

024443330000 ......等。

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

Answer 5

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

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

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