javascript - jQuery游戏-让直升机飞行更流畅

Question

我正在制作一个简单的游戏。

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

我已经有了实现此操作的基本代码，工作正常(触摸启动+按住直升机上升，松开直升机下降)。然而，它非常“ react ”；如果你想让直升机沿直线飞行，你需要快速点击屏幕，但是无论你点击的速度有多快，直升机都会移动相当多的距离。

我需要一种方法让运动在开始上升和开始下降时变得轻松，这样直升机就可以在需要时沿相当直线飞行。

我的代码如下:

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

(触摸更改为鼠标事件)反复点击屏幕来“悬停”方 block ，太 react 了，但我不想在正常飞行时降低速度

Answer 1

过渡移动有不同类型，默认为线性。看看这里:

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 **/
}