「zim.js」 낙하게임 제작

 

추억속 '한메타자 or 베네치아'라 불렸던 타자게임과 비슷한 '낙하게임'을 제작해보자.

 

[code]

<div id="zimBase"></div>
<script> 
const frame = new Frame( { 
   scaling:'zimBase', 
   width:724,  
   height:430,  
   color:light 
  }); 

frame.on("ready", () => { 
    const stage = frame.stage; 
    let stageW = frame.width; 
    let stageH = frame.height;
  
    const drp = new Container().addTo(stage);
  	
    interval(.5, ()=>{
    	new Circle(20)
          .loc(rand(stageW), -100)
     	  .animate({
        	props : { y:stageH+100 },
          	ease : "linear",
          	time : 3,
          	call : target=>{
            	         target.removeFrom()
                      }
           })
    });
  
    stage.update(); 

})
</script>

 

일단 zim.js로 기본 코드를 작성해준다.

1] 컨테이너 생성(drp변수)

2] 0.5초 단위로 Circle생성

3] Circle 애니메이팅 생성

 

[구현]

 

 

 

 

animate( )메서드에서 콜벡을 이용하여

3초후에는 circle이 모두 사라지도록 정리한다.

 

 

 

 

 

｜패들 생성

한메타자 게임과 달리 'Falling Game'타입은 떨어지는 객체를 막을 수 있는 패들이 필요하다. 

zim.js의 MotionController를 활용해서 패들을 생성해보자.

*zim.js의 게임관련 기능을 이용하려면, 아래 CDN이 필요하다.

 

<script src="https://zimjs.org/cdn/game_2.5.js"></script>

 

ZIM Updates - JavaScript Canvas Framework

 

[코드]

//생략...
	const drp = new Container().addTo(stage);
  	
  	interval(.5, ()=>{
		new Circle(20)
			.loc(rand(stageW), -100, drp)
			.animate({
				props : { y:stageH+100 },
				ease : "linear",
				time : 3,
				call : target=>{
					target.removeFrom()
				}
			})
	});
  
  	const paddle = new Rectangle(100,40)
    			.center(stage)
    			.pos(null, 40, null, true)
    
	new MotionController(paddle, "keydown", 7, "horizontal");
  
  
  	Ticker.add(()=>{
    	drp.loop( circle=>{
        	if(paddle.hitTestCircle(circle)) circle.removeFrom();
        }, true)
    })
  
//생략...

 

모션 컨트롤러는 말 그대로 특정 객체의 모션을 제어할 수 있는 기능을 제공한다.

 

1] 패들로 사용할 객체생성(위에서는 Rectangle)

2] MotionController를 생성한 뒤, 파라미터값에 패들 삽입   

 

[구현]

 

 

 

zim.js의 모션 컨트롤러에는 따로 키보드 이벤트를 적용할 필요가 없다.

키보드의 방향키를 입력해보자.

모션 컨트롤러로 지정된 사각형이 움직일 것이다.

 

 

 

 

 

 

｜규칙 지정

전체적인 틀이 완성되었다면, 간단한 게임 규칙을 지정해보자.

규칙은 간단하다.

---

* 패들이 빨간색 circle과 접촉할 시, 생명력이 1씩 감소하고 그 외에는 점수가 1씩 상승한다. 

 

 

[코드]

 

//생략...
  
  	//점수판
  	const scorer = new Scorer().pos(30,30,true).addTo(drp);
  
  	//생명수치
  	const lives = new Indicator({
		num : 4,
		fill: true,
		selectedIndex:2
	}).pos(30, 30)
	  .addTo(stage);
  	
	new MotionController(paddle, "keydown", 7, "horizontal");
  
  	
  	Ticker.add(()=>{
    	drp.loop( (circle,i) =>{
           if(paddle.hitTestCircle(circle)){
            	if(circle.color == '#fb4758'){
                	
                  	lives.selectedIndex -= 1;
                  	if(lives.selectedIndex < 0){
                    		new Pane({label:"Game Over", width:450}).center(stage);
                      		interMachine.pause(); //interval 중지
                   	 }
                }else{
                	//스코어 기록
                  	scorer.score += 1;
                }
              	circle.removeFrom();
            }
        	
        }, true); //루프구문 End
        
    }) //Ticker End
  
//생략...

 

전반적으로 조건문이 중첩된 좋지못한 코드이지만

개념적 용도로만 살펴보자.

 

---

1] 스코어(Scorer), 생명(Indicator) 생성하기

2] 컨테이너(drp) 루프적용

3] 패들과 접촉되는(hitTestCircle) circle감지 및 제거

4] 빨간색 원의 경우, 생명 1감소 

5] 그외의 경우, 스코어 1추가

 

 

 

 

[구현]

 

 

위에서 사용한 MotionController, Scorer, Indicator기능을 순수 html Canvas로 구현하려면 꽤 복잡하다.

코드 몇줄로 모션관련 기능을 구현할 수 있다는 점에 zim.js창시자, Dan Zen에 감사드린다.