Question

我正在搞乱一个简单的游戏。

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

我已经得到了基本代码，以便工作正常（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

（针对鼠标事件的触摸已更改）重复点击屏幕'悬停'块，它太活跃了，但我不想在正常飞行时降低速度

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

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

1 个答案: