jQuery game - make flying helicopter more smooth

Question

I'm messing around making a simple game.

I have a helicopter which the user flies up and down.

I've got the basic code for this to happen working fine (touchstart + hold the helicopter goes up, release it goes down). However, it is very 'reactive'; if you want the helicopter to go in a straight line you need to quickly tap the screen, however the helicopter moves quite alot no matter how fast you can tap.

I need a way for the movement to ease at the start of going up and the start of coming down, so the helicopter can go in a fairly straight line if needs be.

My code is as follows:

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

(touch changed for mouse events) tap screen repeatedly to 'hover' the block, its too reactive, but I dont want to reduce the speed when flying normally

I am looking for the same solution. however What I have observed about jet pack joyride is. When touch/release screen it rise/fall very slowly in the beginning and speed gradually increase with time (maybe start from 0.00 with increment of 0.01(over time) and to max allowed speed 1.0). But I am not sure If this correct or not, I have tried many thing but failed but lets implement this thing and see what happens. Please do let me know when you find some solution. — PHP Avenger, Mar 19 '14 at 08:17
http://stackoverflow.com/questions/22442495/smooth-fly-movement-like-flappy-bird-or-jet-pack-joy-ride-with-gravity-and-accel/ Please have a look, it kind of work for me. If you achieved this by any other way, Please share that. — PHP Avenger, Mar 31 '14 at 13:12

score 0 · Answer 1 · answered Mar 14 '14 at 08:38

There are different types of movement for transitions, the default being linear. Have a look 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 **/
}

jQuery game - make flying helicopter more smooth

1 Answers1