How to implement speed up by key long press in phaser framework

Question

I'm develop my first phaser game for a client. The game is a car moving forward and it have two minutes to get the goal.

I want to increase progressive the car speed while the Up key is pressed until the speed limit has reached.

I'm moving the racetrack not the car by doing:

this.highway2 = game.add.tileSprite(game.world.centerX,game.world.height/2,   game.cache.getImage('highway').width, game.cache.getImage('highway').height, 'highway');
this.highway2.anchor.setTo(0.5,0.5);
this.highway2.autoScroll(0,1000);

So, my questions are:
how can I control the speed of the autoScroll to simulate acceleration? Is there a way to know how much time was a key pressed? Is this the right approach to get this done?

Thanks in advanced.

Answer 1

You should apply a strict separation of concerns to 1) simplify coding 2) ease the fine tuning and even make the game more interesting and 3) easily 'plug' you logic with another controller (touch event instead of keyboard).

So here you have two separate concerns :
* measure for how long the user has been accelerating.
* given current speed, min/max speed, thrust time, decide what is current acceleration (== speed change).

For 1) it's pretty straightForward : record the time when input start, now duration is current time - start time. You'd better use game time if you have one (rather than Date.now()), so that you avoid surprises after the game resumes from a long tab-out.

For 2) You should fine tune the acceleration/deceleration of your game, it will make it more interesting.
Most obvious is not to have a constant acceleration : it must be harder and harder to reach the last % of the max speed. This way you give and incentive/reward to the player not to touch obstacle.
What you should do if the player is not thrusting, i don't know : slowly decelerate or quickly return to normal speed ?
Also you'll have to decide wether the boost is infinite or not, and maybe of a cool-down time.

So the function that compute current acceleration depends on thrusting (bool), thrust time (double) regularSpeed, maxSpeed, minAcc, maxAcc.

There are a lot of options here, but the code to compute acceleration could look like :

 if (thrusting) {
     // if we're not even at regular speed, max acceleration
     if (speed<regularSpeed) { acc = maxAcc; return; }
     // if we are above maxSpeed, no acceleration  (?? or friction ??)
     if (speed>maxSpeed) { acc=0; return; }
     // compute current speed ratio
     // a figure in [0;1] representing where is the speed in [minSpeed; maxSpeed]
     var speedRatio = (currSpeed-regularSpeed)/(maxSpeed-regularSpeed);
     // ease this ratio as you like
     speedRatio = Math.sqrt(speedRatio);
     // compute acceleration : the more speed, the less acceleration
     // you might want to put one/some threshold this formula.
     acc= minAcc + (1-speedRatio)*(maxAcc-minAcc);
     return;
 } else {
     // do nothing if <= regularSpeed.
     if (speed<=regularSpeed) { acc=0 ; return;}
     // reduce speed if above regular speed
     acc = breakAcc ; // or with friction =>  acc = - k * currSpeed;
     return;
 }

Answer 2

Well, I don't know if this is the better way to do this, but it's work pretty well. Just set speed limit and track it in the update function.

var playState = {
create: function(){

    this.setInitialValues();


    game.physics.startSystem(Phaser.Physics.ARCADE);        
    this.cursor = game.input.keyboard.createCursorKeys();

    //highway       
    this.highway2 = game.add.tileSprite(game.world.centerX,game.world.height/2, game.cache.getImage('highway').width, game.cache.getImage('highway').height, 'highway');
    this.highway2.anchor.setTo(0.5,0.5);
    this.highway2.autoScroll(0,0);

    //car
    this.player = game.add.sprite(game.world.centerX+10, game.world.height-150, 'player');
    this.player.anchor.setTo(0.5,0.5);
    game.physics.arcade.enable(this.player);

    //other things

},
update: function(){
    this.movePlayer();  
},
movePlayer: function(){
    // move left and right
    // If the left arrow key is pressed 
    if (this.cursor.left.isDown) 
    {
        // Move the player to the left
        this.player.body.velocity.x = -200; 
    }
    // If the right arrow key is pressed
    else if (this.cursor.right.isDown) 
    { // Move the player to the right 
        this.player.body.velocity.x = 200;
    }
    // If neither the right or left arrow key is pressed
    else 
    {
        // Stop the player 
        this.player.body.velocity.x = 0;
    }

    //speed up and speed down
    if (this.cursor.up.isDown)
    {
        if(this.currentSpeed < this.maxSpeed )
        {
            this.currentSpeed+=10;
            this.highway2.autoScroll(0,this.currentSpeed);
        }

    }
    else{
            if(this.currentSpeed > 0 )
        {
            this.currentSpeed-=10;
            this.highway2.autoScroll(0,this.currentSpeed);
        }
    }

    if (this.cursor.down.isDown)
    {
        if(this.currentSpeed > 0 )
        {
            this.currentSpeed-=30;
            this.highway2.autoScroll(0,this.currentSpeed);
        }
    }
},
setInitialValues: function(){
    this.maxSpeed=1500;
    this.currentSpeed=0;
}
}