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

时间:2011-08-18 10:55:59

标签: jquery html5 animation canvas

我正在玩HTML5画布,在我的第一个实验中,我决定尝试用基本的用户输入制作一个简单的汽车动画。我认为我最基本的输入和移动方式,但我只是想看看我是否可以进一步采取它。

演示:http://jsfiddle.net/mpxML/20/ (使用箭头键)

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

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

由于

2 个答案:

答案 0 :(得分:6)

要修复转弯,你必须做这样的事情:

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

当速度为0时,这将防止转动,并将修复反向转动

要获得漂移效果,您应该将汽车的旋转中心向前移动,让汽车自行旋转而不会真正转动

答案 1 :(得分:4)

很棒的小演示,喜欢它!我不开车,这些是我的想法。我建议尝试,你不 去追求现实主义 - 记住你正在制作游戏,你想要玩得开心:)

<强>倒车

我会使反向正常工作,当你扭转时它不会转向我对传统汽车运动的期望。

<强>漂移

当转弯的速度/角度达到一定量时,将触发此操作。一旦满足这些条件,您就可以做一些事情,比如防止再转动(通过锁定当前方向)并使汽车从方向倾斜30°直到加速键未被按下

<强>车削

我不是司机,但我认为当你的速度较慢时你的转弯角度会更紧,也许会为此创造一个简单的公式,速度和转弯量之间的某种关系。

无耻插件

我必须披露我的工作Scirra.com我们有一些软件Construct 2Download),这是一个针对HTML5游戏的Windows游戏制作程序,值得一看为你(取决于你的目标)!它可以通过JavaScript扩展,因此您可以编写自己的运动行为并使用其他人,使汽车游戏更直观,更容易(我们的意见无论如何!)