「zim.js」보드게임 제작

 

 

 

zim Game기능은 8개 정도로 많지 않지만(zim Cat04기준)

급하게 보드기능이 필요하다면, zim Game이 해결책이다.

 

 

｜보드 생성

보드 생성은 아래와 같은 코드 3줄이면 끝이다.

 

[코드]

//생략...
      
        let board = new Board({
            backgroundColor : grey
        }).sca(.5).center(stage);

     
//생략...

 

 

 

 

｜캐릭터 생성

캐릭터 역시 zim Game의 기본기능으로 제공된다.

방해물, 캐릭터 역할의 Tree, Person객체를 Board()에 추가하는 것만으로 보드가 완성된다.

 

[코드]

   //생략...
        let tree1 = new Tree();
            board.add(tree1, 3, 5);

        let tree2 = new Tree();
            board.add(tree2, 5, 2);


        let player1 = new Person();
            board.add(player1, 5, 5);
            board.addKeys(player1, 'arrows', {notItems:[tree1, tree2]});
            player1.on('movingdone', hitObj);

        let player2 = new Person();
            board.add(player2, 2, 5);
            board.addKeys(player2, 'wasd', {notItems:[tree1, tree2]});
            player2.on('movingdone', hitObj);

 

플레이어1, 2, 나무1, 2를 추가하자.

 

 

 

 

 

 

 

｜효과

player1, player2의 좌표가 겹쳤을 때 Emitter효과가 나려면,

Emitter의 spurt이벤트가 필요하다.

 

 

[코드]

   let emitter = new Emitter({startPaused:true});
            emitter.on('spurted', function(){
                board.position(player1, 5, 5);
                board.position(player2, 2, 2);
            });
            
   function hitObj(){
       if(player1.boardTile == player2.boardTile){
           emitter.loc(player1).mov(0, -50).spurt(15);
       }
    }

 

플레이어 충돌함수를 생성한 뒤,

emitter의 'spurted'이벤트를 연결한다면

아래와 같은 결과를 볼 수 있다.

 

 

[구현]