Search code examples
javascriptphaser-framework2d-games

What do I need to change for use on a mobile cell phone browser to make the player automatically jump when the screen touch


What do I need to change for use on a mobile cell phone browser to make the player automatically run to the right and jump when the screen is tapped? I've searched for ages but can't find the answer and am trying to learn

here is the code

update(time, delta) {
    moveBackgroundPlatform(this.mountainGroup, this.mountainWidth, 'mountains', 0.5);
    moveBackgroundPlatform(this.plateauGroup, this.plateauWidth, 'plateau', 1.5);
    moveBackgroundPlatform(this.groundGroup, this.groundWidth, 'ground', 4);

    if (this.health <= 0) {
        const myUrl = `${fetchScoreData.apiUrl + fetchScoreData.apiKey}/scores`;

        fetchScoreData.postScores(myUrl, { user: gameState.playerName, score: gameState.score });

        this.gameTheme.stop();
        this.scene.stop();
        this.scene.start('GameOver');
    }

    if (this.missileScore >= 1) {
        this.health += 1;
        this.missileScore -= 1;
    }

    this.player.anims.play('run', true);
    this.birdGroup.children.iterate((child) => {
        child.anims.play('fly', true);
    });

    this.missileGroup.children.iterate((child) => {
        child.x -= 5;
    });

    this.timer += delta;
    if (this.timer >= 5000) {
        this.createMissile(415, 'missile');
        this.timer = 0;
    }

    this.secondTimer += delta;
    if (this.secondTimer >= 7000) {
        this.createMissile(300, 'missile2');
        this.secondTimer = 0;
    }

    if (Phaser.Input.Keyboard.JustDown(this.cursors.up)) {

        //this.input.on('pointerdown',  this.jump, this);
        console.log(' up preess');
        if (this.player.body.touching.down || (this.jump < this.jumpTimes && (this.jump > 0))) {
            this.player.setVelocityY(-400);
            this.jumpSound.play();

            if ((this.player.body.touching.down)) {
                this.jump = 0;
            }
            this.jump += 1;
        }
    }

    if (!this.player.body.touching.down) {
        this.player.anims.play('jump', true);
    }

    if (this.cursors.down.isDown) {
        if (!this.player.body.touching.down) {
            this.player.setGravityY(1300);
        }
    }

    if (this.player.body.touching.down) {
        this.player.setGravityY(800);
    }
}
}

export default Game;

Solution

  • There are many way's to solve this, I'm no professional, but I would add a pointer event listener in the create method of the scene:

    this.input.on('pointerdown', jump, this);
    

    and the jump method, that holds all the jump logic:

    jump(){
        if (this.player.body.touching.down || (this.jump < this.jumpTimes && (this.jump > 0))) {
            this.player.setVelocityY(-400);
            this.jumpSound.play();
    
            if ((this.player.body.touching.down)) {
                this.jump = 0;
            }
            this.jump += 1;
        }
    }
    

    this jumpmethod you could call in the update function t prevent duplication of code.

    update(time, delta) {
        ...
        if (Phaser.Input.Keyboard.JustDown(this.cursors.up)) {
            jump();
            ...
        }
        ...
    }