Phaser Js 로 Runner 게임 만들기 Part - 3

점프 정리하기

이제 우리의 영웅이 뛰고 있습니다. 그러나 문제가 있습니다. 때로는 점프가 발생하지 않으며 게임에 대한 흥미가 없습니다.

몇 가지 테스트를 한 결과 리스너가 때로 잘못된 순서로 호출되었다는 것을 알게되었습니다. 빨리 클릭하면 다운 이벤트가 발생하기 전에 위 이벤트가 실행되고 즉시 파워메터의 전원이 제거됩니다. 나는 이것을 세 가지로 고정시켰습니다.

- 다운 이벤트가 트리거 될 때까지 업 이벤트를 등록하기 위해 대기 중

- 각각의 이벤트 리스너가 트리거 된 이후에 다운 및 업 이벤트 리스너 제거

- 필요에 따라 이벤트 재 등록

아래의 강조 표시된 행을 참조하십시오.

var StateMain = {

    preload: function() {

        game.load.image("ground", "images/ground.png");

        game.load.image("hero", "images/hero.png");

        game.load.image("bar", "images/powerbar.png");

        game.load.image("block", "images/block.png");

    },

    create: function() {

        this.power = 0;

        //turn the background sky blue

        game.stage.backgroundColor = "#00ffff";

        //add the ground

        this.ground = game.add.sprite(0, game.height * .9, "ground");

        //add the hero in

        this.hero = game.add.sprite(game.width * .2, this.ground.y - 25, "hero");

        //add the power bar just above the head of the hero

        this.powerBar = game.add.sprite(this.hero.x + 25, this.hero.y - 25, "bar");

        this.powerBar.width = 0;

        //start the physics engine

        game.physics.startSystem(Phaser.Physics.ARCADE);

        //enable the hero for physics

        game.physics.enable(this.hero, Phaser.Physics.ARCADE);

        game.physics.enable(this.ground, Phaser.Physics.ARCADE);

        //game.physics.arcade.gravity.y = 100;

        this.hero.body.gravity.y = 200;

        this.hero.body.collideWorldBounds = true;

        this.hero.body.bounce.set(0, .2);

        this.ground.body.immovable = true;

        //set listeners

        game.input.onDown.add(this.mouseDown, this);

    },

    mouseDown: function() {

        game.input.onDown.remove(this.mouseDown, this);

        this.timer = game.time.events.loop(Phaser.Timer.SECOND / 1000, this.increasePower, this);

        game.input.onUp.add(this.mouseUp, this);

    },

    mouseUp: function() {

        game.input.onUp.remove(this.mouseUp, this);

        this.doJump();

        game.time.events.remove(this.timer);

        this.power = 0;

        this.powerBar.width = 0;

        game.input.onDown.add(this.mouseDown, this);

    },

    increasePower: function() {

        this.power++;

        this.powerBar.width = this.power;

        if (this.power > 50) {

            this.power = 50;

        }

    },

    doJump: function() {

        this.hero.body.velocity.y = -this.power * 12;

    },

    update: function() {

        game.physics.arcade.collide(this.hero, this.ground);

    }

}

이제 완벽한 점프를 하게 되었지만 다른 문제를 발견했을 것입니다. 당신은 영웅이 날 수 있도록 마우스를 계속 누를 수 있습니다. 중력과 속력을 결합하면 날아 다니는 새 게임을 만드는 데 도움이 될 것입니다. 주인공이 점프 할 때 영웅이되기를 원하기 때문에 주인공의 위치를 기록해 두십시오.

mouseDown에 대한 이벤트 리스너를 추가하기 바로 전에 create 함수에서이 행을 추가하십시오.

//record the initial position

this.startY = this.hero.y;

이제 mouseDown 함수의 위치를 확인하면됩니다. 주인공이 시작 위치에 있지 않으면, 우리는 단순히 기능을 종료하고 점프하지 않습니다.

mouseDown 함수의 시작 부분에 다음을 추가합니다.

if (this.hero.y != this.startY) {

            return;

}

이제 영웅이 뛰어 넘을 무언가를 만들 때입니다. 우리는 블록 벽을 만들고 싶습니다. 그 벽을 구성하는 모든 블록을 보유 할 그룹을 만들어 봅시다.

create 함수의 끝에서 add 합니다.

this.blocks = game.add.group();

그런 다음 해당 그룹에 임의의 수의 블록을 추가하는 함수를 만들어 보겠습니다.

makeBlocks: function() {

        var wallHeight=game.rnd.integerInRange(2, 6);

        for (var i = 0; i < wallHeight; i++) {

            var block = game.add.sprite(0, -i * 25, "block");

            this.blocks.add(block);

        }

    }

결과는 다음과 같습니다.

이제 우리는 벽을 가지고 있습니다. 다음 장에서는 게임에 움직임을 추가 할 것입니다.