새 추가
게임의 맨 위로 도약 할 수있을 정도로 마우스를 길게 누르고 있으면 블록을 뛰어 넘는 것이 아주 쉽다는 것을 알았을 것입니다! 그래서 제가 생각하기에 처음으로 하늘에 새를 추가하는 것이 더 어려워졌습니다. 때로는 새를 뛰어 넘고 때때로 새와 블록 사이를 뛰어 넘어야합니다.지금은 새를 나타내는 파란색 블록을 사용합니다.
이 게시물의 마지막 부분에서 이미지를 다운로드하거나 zip 파일을 다운로드 할 수 있습니다.
새 그래픽을 미리 로드하여 시작합시다. 이것을 stateMain.js 프리로드 함수에 넣으십시오.
game.load.image("bird", "images/bird.png");
다음으로, 우리는 새를 만드는 함수를 사용할 것이고, 우리는 한 번에 하나의 새만 화면에 나타낼 것입니다.
makeBird: function() {
//새가 이미 존재하면 그것을 파괴하십시오.
if (this.bird) {
this.bird.destroy();
}
//화면 상단의 숫자를 화면 높이의 10 %에서 40 % 사이에서 선택하십시오.
var birdY = game.rnd.integerInRange(game.height * .1,
game.height * .4);
//게임에 새 스프라이트를 추가
this.bird = game.add.sprite(game.width + 100, birdY, "bird");
//스프라이트에 물리엔진 사용
game.physics.enable(this.bird, Phaser.Physics.ARCADE);
//x 속도를 -200으로 설정하면 블록보다 조금 더 빠릅니다.
this.bird.body.velocity.x = -200;
//새의 바운스를 설정
this.bird.body.bounce.set(2, 2);
}
업데이트 함수에서, 새가 화면에서 벗어나 있는지 확인해야합니다.
//새가 날아간 경우 화면을 다시 설정합니다.
if (this.bird.x < 0) {
this.makeBird();
}
오버 게임 상태 추가
플레이어가 새나 블록에 충돌하면 게임이 끝나고 다시 플레이 할 기회가 생깁니다. 이를 위해서는 게임에 새로운 상태를 추가해야 합니다. 상태를 처음 사용하는 경우 이 게시물을 참조하십시오.js 폴더에 stateOver.js라는 파일을 만듭니다.
다음으로 재생을 위한 버튼을 다시 로드 해 봅시다. stateMain 또는 stateOver에서이 작업을 수행 할 수 있지만 개인적으로 모든 프리로드를 한 곳에서 유지하는 것이 좋습니다.
game.load.image("playAgain", "images/playAgain.png");
이 이미지를 다운로드하거나 이 게시물의 마지막에있는 zip 파일에서 찾으십시오.
stateOver.js 파일은 다음과 같습니다.
var StateOver={
create:function()
{
//다시 재생 버튼으로 사용할 스프라이트 추가
this.playAgain=game.add.sprite(game.width/2,game.height/2, "playAgain");
//버튼 이미지를 가운데 맞춤
this.playAgain.anchor.set(0.5,0.5);
//입력을 가능하게하다
this.playAgain.inputEnabled=true;
//이벤트 리스너를 추가하십시오.
this.playAgain.events.onInputDown.add(this.restartGame,this);
},
restartGame:function()
{
//stateMain을 시작하여 게임을 다시 시작하십시오.
game.state.start("StateMain");
}
우리가 상태를 사용하기 전에 우리는 두 가지 일을해야합니다.index.html 파일에 gameOver.js를 추가하십시오.
Phaser에게 StateOver 변수가 상태임을 알립니다.
다음 행을 head.html 파일의 head 섹션에 추가하십시오.
<script src="js/stateOver.js"></script>
그런 다음 main.js 파일에서 stateMain을 시작하는 행 바로 앞에 다음 행을 추가하십시오
game.state.add("StateOver",StateOver);
일정시간 대기하기
우리는 플레이어가 그들이 쳤던 것을 보기를 원하고 블록이 날아가는 것을 보고 싶어하기 때문에 화면 상에 게임을 즉시 보여주고 싶지는 않습니다. 그래서 우리는 gameOver 상태를 시작하기 위해 타이머를 사용합니다.stateMain.js 파일에서 우리는 2개의 함수 delayOver와 gameOver를 생성 할 것입니다.
delayOver: function() {
this.clickLock = true;
game.time.events.add(Phaser.Timer.SECOND, this.gameOver, this);
},
gameOver: function() {
game.state.start("StateOver");
}
플레이어가 부딪힌 후에 clickLock 변수는 더 이상의 클릭을 잠그도록 설정됩니다.
게임이 시작되면 우리는 그것을 false로 설정할 것입니다. 다음 행을 작성 상태의 맨 위에 추가하십시오
this.clickLock = false;
클릭을 거부하려면 게임의 mouseDown 함수에 이것을 추가하십시오.
if (this.clickLock == true) {
return;
}
게임오버함수 연결하기
지금까지 우리는 객체가 서로 반응 할 수 있도록 업데이트 함수에서 충돌을 감지했습니다. 이제 우리가 할 일은 플레이어가 충돌여부 확인 함수를 추가하는 것입니다.충돌확인 문은 충돌과 프로세스의 두 가지 기능을 수행 할 수 있습니다. 여기서 차이점을 설명하지는 않겠지 만 충돌 콜백 만 사용하고 프로세스 콜백 대신 null을 사용하여 무시합니다.
collide (object1, object2, collideCallback, processCallback, callbackContext)
업데이트 기능 변경
game.physics.arcade.collide(this.hero, this.blocks); 을
game.physics.arcade.collide(this.hero, this.blocks, this.delayOver, null, this);
game.physics.arcade.collide(this.hero, this.bird, this.delayOver, null, this);
구름!
잠시 후, 비록 게임이 더 도전적 이었지만, 맨 위로 도약하기가 너무 쉬웠기 때문에 플레이어가 만지지 말아야 할 구름을 추가하기로 결정했습니다. 왜? 산성비, 화난 구름, 마술인가? 그것은 당신의 게임입니다, 당신은 이유를 결정해야합니다.흰색은 단지 게임의 일부가 흰색 배경에 없는 것처럼 보이기 때문에 구름을 표현하기 위해 회색 이미지를 사용했습니다.
우선 클라우드 이미지를 미리로드합니다.
game.load.image("clouds", "images/clouds.png");
다음으로, create 문에서 우리는 구름을 로드하고 게임의 너비를 늘릴 것입니다. 그렇게 하면 그가 뛰어 넘을 때 영웅이 구름 아래로 갈 것입니다.
//add the clouds
this.clouds = game.add.sprite(0, 0, "clouds");
this.clouds.width = game.width;
구름 위에 물리엔진을 사용하는 대신 플레이어가 화면 상단에 있는지 간단하게 확인해야 합니다
업데이트 함수에 다음 내용을 추가:
if (this.hero.y < this.hero.height) {
this.hero.body.velocity.y=200;
this.delayOver();
}
stateMain.js 파일의 모양은 다음과 같습니다.
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");
game.load.image("bird", "images/bird.png");
game.load.image("playAgain", "images/playAgain.png");
game.load.image("clouds", "images/clouds.png");
},
create: function() {
this.clickLock = false;
this.power = 0;
//배경 하늘색으로 바꾸다.
game.stage.backgroundColor = "#00ffff";
//땅을 추가
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;
//add the clouds
this.clouds = game.add.sprite(0, 0, "clouds");
this.clouds.width = game.width;
//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;
//record the initial position
this.startY = this.hero.y;
//set listeners
game.input.onDown.add(this.mouseDown, this);
this.blocks = game.add.group();
this.makeBlocks();
this.makeBird();
},
mouseDown: function() {
if (this.clickLock == true) {
return;
}
if (this.hero.y != this.startY) {
return;
}
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;
},
makeBlocks: function() {
this.blocks.removeAll();
var wallHeight = game.rnd.integerInRange(1, 4);
for (var i = 0; i < wallHeight; i++) {
var block = game.add.sprite(0, -i * 50, "block");
this.blocks.add(block);
}
this.blocks.x = game.width - this.blocks.width
this.blocks.y = this.ground.y - 50;
//
//Loop through each block
//and apply physics
this.blocks.forEach(function(block) {
//enable physics
game.physics.enable(block, Phaser.Physics.ARCADE);
//set the x velocity to -160
block.body.velocity.x = -150;
//apply some gravity to the block
//not too much or the blocks will bounce
//against each other
block.body.gravity.y = 4;
//set the bounce so the blocks
//will react to the runner
block.body.bounce.set(1, 1);
});
},
makeBird: function() {
//if the bird already exists
//destory it
if (this.bird) {
this.bird.destroy();
}
//pick a number at the top of the screen
//between 10 percent and 40 percent of the height of the screen
var birdY = game.rnd.integerInRange(game.height * .1, game.height * .4);
//add the bird sprite to the game
this.bird = game.add.sprite(game.width + 100, birdY, "bird");
//enable the sprite for physics
game.physics.enable(this.bird, Phaser.Physics.ARCADE);
//set the x velocity at -200 which is a little faster than the blocks
this.bird.body.velocity.x = -200;
//set the bounce for the bird
this.bird.body.bounce.set(2, 2);
},
update: function() {
game.physics.arcade.collide(this.hero, this.ground);
//
//collide the hero with the blocks
//
game.physics.arcade.collide(this.hero, this.blocks, this.delayOver, null, this);
//
//collide the blocks with the ground
//
game.physics.arcade.collide(this.ground, this.blocks);
//
//when only specifying one group, all children in that
//group will collide with each other
//
game.physics.arcade.collide(this.blocks);
//colide the hero with the bird
//
game.physics.arcade.collide(this.hero, this.bird, this.delayOver, null, this);
//
//get the first child
var fchild = this.blocks.getChildAt(0);
//if off the screen reset the blocks
if (fchild.x < -game.width) {
this.makeBlocks();
}
//if the bird has flown off screen
//reset it
if (this.bird.x < 0) {
this.makeBird();
}
if (this.hero.y < this.hero.height) {
this.hero.body.velocity.y=200;
this.delayOver();
}
},
delayOver: function() {
this.clickLock = true;
game.time.events.add(Phaser.Timer.SECOND, this.gameOver, this);
},
gameOver: function() {
game.state.start("StateOver");
}
}
결과를 보려면 여기를 클릭하십시오.
댓글 없음:
댓글 쓰기