HTML5 게임 만들기 : 동고는 똥을 싫어해 #5

HTML5 게임 만들기 : 동고는 똥을 싫어해 #5

아래 페이지에 Phaser3 버전으로 리뉴얼 하였습니다.
https://donggov.tistory.com/138

HTML5 게임 개발 따라하기 - 총알 피하기 (Phaser 및 Player 설정)

'동고는 똥을 싫어해 만들기' 마지막 편입니다.

이번에는 게임 점수 처리와 'GAME OVER' 출력 처리를 하도록 하겠습니다.

 

우선 플레이어가 똥에 충돌했을때  'GAME OVER' 텍스트가 출력되도록 해보겠습니다.

아래 순서와 같이 코딩해주세요.

 

1) gameover 변수 선언

2) create 함수에 아래 소스 추가

 var txtGameover; 
       
   
       
 function create() { 
       
     // ...생략 ... 
       
     txtGameover = game.add.text(game.world.centerX, game.world.centerY, "Game Over", { font: "70px Arial", fill: "#FFFFFF" }); 
       
     txtGameover.anchor.setTo(0.5, 0.5); 
       
     txtGameover.visible = true; 
       
 } 
       

 

 

소스를 보자마자 대충 감이 오시나요?

game.add.text라는 api를 통해서 텍스트를 출력할 위치, 문구, 폰트 설정을합니다.

anchor.setTo는 상대위치를 지정하는 것이구요.

visible를 통해서 텍스트를 출력할지 안할지 결정합니다.

 

지금 소스를 실행해보면 게임이 시작되자마자 Game Over 문구가 가운데에 출력되는걸 확인할 수 있습니다.

이제 플레이어가 똥과 출동했을 경우에 해당 문구를 출력하도록은 굳이 설명안해도 충분히 할수 있을거라 생각합니다.

그래도 설명충이니까 굳이 알려드리자면,

 

1) txtGameover.visible 초기값을 false로 설정

2) ddongHitsPlayer 함수 안에 txtGameover.visible = true 줄 추가

 

 var txtGameover; 
       
   
       
 function create() { 
       
     // ...생략 ... 
       
     txtGameover.visible = false; 
       
 } 
       
   
       
 function ddongHitsPlayer(playerPoint, ddongs) { 
       
     ddongs.kill(); 
       
     playerLife--; 
       
     txtGameover.visible = true; 
       
 } 
       

 

 

이제 소스를 다시 실행해봅시다.

그리고 일부러 죽어봅시다. 아래와 같이 GAME OVER 텍스트가 출력되시나요?

만약 게임 시작전에도 텍스트를 출력하고 싶으면 같은 방법으로 처리하면 됩니다.

 

 

이제 게임 점수 출력을 해보겠습니다.

점수는 1초에 1점씩 늘어나도록 해보겠습니다.

이를 위해 phaser 프레임워크에서는 이럴때 주기적으로 수행할수 있는 이벤트 타이머 api를 제공하고 있습니다.

우선 아래와 같이 소스를 수정해주세요.

 

 var score = 0; 
       
 var txtScore; 
       
 var eventScore; 
       
   
       
 function create() { 
       
     // ...생략 ... 
       
     txtScore = game.add.text(20, 10, "Score : 0", { fontSize: "50px Arial", fill: "#FFFFFF" }); 
       
     eventScore = game.time.events.loop(Phaser.Timer.SECOND, function () , this); 
       
 } 
       

 

txtScore 변수를 선언하여 왼쪽 상단에 텍스트를 출력하는 방법은 Game Over 텍스트 출력과 동일합니다.

이제 게임 점수를 1초마다 변경하여야합니다.

이때 사용할수 있는데 game.time.events.loop api입니다.

첫번째 파라미터에 내가 원하는 주기(SECOND)를 입력합니다.

두번째 파라미터에는 주기마다 수행할 내용을 작성합니다. score를 1씩 증가시키고, txtScore 텍스트를 변경합니다.

 

소스를 실행해봅시다.

점수가 1초마다 증가하는것을 볼 수 있습니다. 하지만 아직 끝이 아닙니다.

아직 게임이 종료되어도 점수가 계속 늘어납니다. 이유는 주기 event가 계속 수행되고 있기 때문입니다.

종료하는 방법은 간단합니다.

ddongHitsPlayer 함수에 event를 종료하는 api 한줄만 입력해주면 됩니다.

 

 function ddongHitsPlayer(playerPoint, ddongs) { 
       
     // ... 생략 ... 
       
     game.time.events.remove(eventScore); 
       
 } 
       

 

소스를 다시 실행해봅시다.

점수가 증가되고 게임이 종료되면 점수 증가가 더이상 되지 않는것을 볼 수 있습니다.

 

 

이것으로 HTML5 게임 만들기 강좌를 마치도록 하겠습니다.

어쩌다보니 HTM5게임 만들기가 아니라 phaser 게임 프레임워크를 이용한 HTML5 게임 만들기가 되어버렸네요. ㅋㅋ

 

문의는 댓글이나 이메일로 해주세요~~~.