用 HTML5 画布制作一个简单的汽车游戏

Posted 2023-03-05

【中文标题】用 HTML5 画布制作一个简单的汽车游戏

【英文标题】：Making a simple car game with HTML5 canvas

【发布时间】：2011-10-29 16:40:46

【问题描述】：

我正在玩 html5 画布，在我的第一个实验中，我决定尝试使用基本的用户输入制作一个简单的汽车动画。我想我在基本的输入和动作方面大部分都已经完成了，但我只是想看看我是否可以更进一步。

演示：http://jsfiddle.net/mpxML/20/ （使用箭头键）

我加载了一张图片，您还可以看到一个黑色方块在移动，即平移点或汽车转向的位置。我想以某种方式创造一种可以在更高速度等下实现的漂移效果。它也可以在它不移动时转动，这是不对的。

无论如何，我只是不知道我需要什么逻辑才能让汽车感觉更半现实。

谢谢

【问题讨论】：

不是一个有用的评论，但只是想说干得好！我把车开出了框架，现在我把它弄丢了哈哈！！

嘿谢谢哈哈。是的，我真的需要一些界限！

【参考方案1】：

很棒的小演示，喜欢它！我不开车，这是我的想法。我建议您尝试一下，您不必追求现实主义 - 请记住您正在制作游戏，您想追求乐趣 :)

倒车

我会让倒车正常工作，当您倒车时，它不会按照我对传统汽车运动的预期方向转动。

漂流

这将在转弯速度/角度达到一定量时触发。满足这些条件后，您可以执行诸如阻止更多转弯（通过锁定当前方向）并将汽车从该方向倾斜约 30 度，直到未按下加速键的操作

转弯

我不是司机，但我认为当您以较慢的速度行驶时，您的转弯角度会更小，也许可以为此创建一个简单的公式，即速度和转弯量之间的某种关系。

无耻的塞

我必须透露我为 Scirra.com 工作，我们有一些软件 Construct 2 (Download)，这是一个用于 HTML5 游戏的 Windows 游戏制作程序，它可能值得你看看（取决于你的目标）！它可以使用 javascript 进行扩展，因此您可以编写自己的移动行为并使用其他人，使汽车游戏更加直观和容易（在我们看来，无论如何！）

【讨论】：

嘿，感谢您的反馈 :) 漂流上的优秀 cmet，我会努力工作的！我正在研究转弯圈，我还将检查 Construct 2 :)

【参考方案2】：

要修复转弯，您必须执行以下操作：

car.angle = car.angle - (car.handeling * car.speed/car.topSpeed);

这将防止速度为 0 时转弯并修复反向转弯

要获得漂移效果，您应该将汽车的旋转中心向前移动，并让汽车在不真正转弯的情况下自行旋转

【讨论】：

效果非常好！现在我不动的时候不能转，动的时候我能得到一个紧的转弯圈。但是当我走得很快时，我希望处理效率更低。我正在考虑做（处理/速度）。我希望我能更好地弄清楚它。问题是，一旦你倒车，处理就会混乱等等。>.

如果你要开发一个固定的赛道（没有平移），那么漂移真的很难。几年前我已经搞砸了 2d 赛车，我无法很好地控制漂移。它要么非常微妙，您几乎无法注意到它，要么它很明显并且使处理变得非常困难。