javascript - jQuery游戏-使直升机飞行更加顺畅

我在搞一个简单的游戏。

我有一架直升机，用户可以上下飞行。

我已经有了基本的代码，可以正常工作(touchstart +握住直升机上升，放开直升机下降)。但是，它非常“活跃”。如果您想让直升机沿直线走，则需要快速点击屏幕，但是无论您点击的速度有多快，直升机都会移动很多。

我需要一种方法来使运动在开始上升和下降开始时减轻，因此如果需要，直升机可以沿相当直线的方向行驶。

我的代码如下:

var speed  = 1;

function copter_touchstart(){
    clearInterval(fall);
    fly = setInterval( start_fly, 2);
}

function copter_touchend(){
    clearInterval(fly);
    fall = setInterval( start_fall, 2);
}

function start_fly(){
    var matrix = $helicopter.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',');
    var y = matrix[5];
    var new_top = parseInt(y) - speed;

    $helicopter.css('-webkit-transform', 'translate3d(0, '+ new_top +'px, 0)')
}

function start_fall(){
    var matrix = $helicopter.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',');
    var y = matrix[5];
    var new_top = parseInt(y) + speed;

    $helicopter.css('-webkit-transform', 'translate3d(0, '+ new_top +'px, 0)')
}

$body.on('touchstart', copter_touchstart).on('touchend', copter_touchend);

JS FIDDLE:HERE

(针对鼠标事件，触摸已更改)
反复点击屏幕以“悬停”该块，它反应太快，但是我不想在正常飞行时降低速度

最佳答案

过渡有多种运动类型，默认为线性运动。在这里看看:

CSS3 transitions

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}