ReiZes's Devlog

오랫동안 방치된 블로그네요. 찾아오시는 분은 없겠지만...

그동안 일이 바빠서 못하다가 오랫만에 작업을 했습니다.

Swaf이 아직 대중적이지 못한 관계로 많은 프로젝트에서 prototype.js나 jQuery 등과 같은 라이브러리를 이미 사용하고 있습니다.

이러한 다른 라이브러리들을 같이 사용하더라도 충돌이 나지 않도록 하였습니다.

예를 들어, $('xxx')를 swaf.$('xxx')와 같이 사용할 수 있습니다. 이미 다른 라이브러리에서 같은 이름의 object 혹은 함수가 있다면, Swaf은 이를 덮어쓰지 않습니다. 이 때 Swaf의 기능으로 사용하고 싶으면 앞에서와 같이 사용하면 됩니다.

대표적으로,
$listener - swaf.listener
$class - swaf.$class (class는 예약어라 $class로 하였습니다.)
$dom - swaf.dom
...

이런식입니다. 예약어가 아니거나, $a, $A와 같이 한글자 함수가 아니면 $를 빼고 앞에 swaf. 접두사를 붙여 사용할 수 있도록 하였습니다.

이 작업을 끝으로 버전을 2.0으로 올렸습니다. 애초의 목표 버전이 2.0이었으니까요.

그래픽 라이브러리인 gl과 UI 컴포넌트 라이브러리인 WIUI의 골격을 만들고서 문서화에 집중을 해야 겠습니다. 너무도 허접한 홈페이지라 방문하여도 얻을 수 있는 정보가 거의 없으니까요.

2.0 다운로드는 http://swaf.sourceforge.net에서 하거나, 아래 링크를 통해 가능합니다.

http://swaf.sourceforge.net/js/swaf.20a.js
http://swaf.sourceforge.net/js/swaf.20a-pack.js

한동안 회사 일도 많고 해서 블로그에 글도 못올렸습니다.

Swaf도 틈틈히 진행중입니다.

지금 진행중인 것은 두 가지 입니다. 전에 언급했었던 swaf.gl 개발입니다. 지금은 Firefox 용으로 Canvas 태그의 기능을 wrapping하는 클래스 까지만 만들었습니다. VML로 같은 기능을 만드는 클래스를 만들고, 간단한 3D 기능까지 넣을 예정입니다.

또 하나는, 웹 UI 컴포넌트 라이브러리입니다. WIUI라는 이름을 가진 Swaf의 서브 프로젝트로 UI개발에 전문적인 분들께서 프로젝트를 진행할 예정입니다. 지금은, 그것의 근본이 될 base class를 만들고 있습니다. 다만, 방식에 있어서 API 방식을 쓰자니 사용이 조금 번거롭고, 커스텀 태그를 쓰자니 validator에 걸리는 문제가 있어 고민입니다. optional하게 선택할 수 있도록 해야겠습니다.

하고 싶은 것은 많고, 할 일도 많지만 틈틈히 시간을 쪼개서 하다 보니 진행이 상당히 더디게 되었습니다. 주말 시간을 좀 더 활용해 보도록 해야겠습니다.

모든 분들 즐거운 주말 맞이하세요~ ^^

Swaf의 core는 문서화 및 샘플 적용을 통한 안정화 작업중입니다. 그러나, core만으로 만족스럽지 않기 때문에 swaf을 기반으로 한 확장 라이브러리를 개발하려고 합니다.

웹에서 자주 사용되는 UI 컴포넌트 라이브러리는 다른 분들이 개발하실 예정이고, canvas와 VML을 이용하는 그래픽 라이브러리 swaf.gl을 만들어 볼까 합니다.

애초에, DrawingCanvas.js를 래핑하는 정도로 만들려고 했으나, DrawingCanvas.js의 기능이 많지 않고 간단하게 되어 있어, canvas와 VML에서 제공되는 기능을 최대한 이용하고, 3D까지 지원되는 라이브러리를 만들려고 합니다.

애초에 학교다닐 때 3D 개발을 많이 했고, 졸업논문도 ray tracing을 했기 때문에 3D에 대한 미련이 아직 어느정도 있기도 합니다. 한계가 있겠지만, 자바스크립트로 만족할만한 3D 표현물을 보여줄 수 있는 라이브러리를 만들겠습니다.

과연 js 성능이 뒷받쳐 줄지는 모르겠지만..

실 개발시간 5시간 정도밖에 안되는 시간으로 일단은 대충 마무리 지었습니다.



때문에, 버그도 많고, 점수나 레벨등도 나오지 않습니다. ㅠㅠ
다행히, swaf의 클래스나 메시징 기능을 사용하여 짧은 시간에 만들 수 있었습니다.

그러나, 핸드폰에 있는 bomblink 게임과 유사하게 만들었습니다. 보너스 폭탄이나 고정 폭탄 등은 없지만, 좀 더 시간을 가지고 이러한 요소들을 지원하여 제대로 된 게임으로 만들면 괜찮을 것 같습니다.

게임의 메인은 아래와 같습니다.

<script>
     function main() {
      var game = new CBombLink(8,10,$('bomblink'));
     }
</script>

HTML에 <div id="bomblink"></div> 가 있으면, 이 div 안에 게임을 생성시킵니다.

실제 게임은 http://swaf.sourceforge.net/bomblink 에서 확인할 수 있습니다.

스프라이트 이미지는 sourceforge가 cache control이 되지 않아, 부득이 cache가 되는 다른 서버에 올렸습니다.

짧은 시간에 숙제하듯이 너무 얼렁뚱땅으로 만들다 보니, 정신이 없습니다. 다음에, 좀 더 여유를 가지고 다듬어 봐야 겠습니다.

 BombLink 게임의 메인 클래스이다.
 폭탄 테이블, 불꽃 레인 등 게임 요소를 생성하고, 게임을 진행시키는 역할을 담당한다.

 

/* 게임메인클래스*/

$class({

    CBombLink : {

       bombTable : null,

       lane : [],

       level : 1,

       curFireNum : 0,

      

        EVENT_MAP : {

                fireDrop : 'onFireDrop' // 불꽃이모두내려갔을때수신하는이벤트

        },

        // 폭탄테이블, 불꽃레인등을생성하고, 폭탄을배열한다.

       init : function(width,height,element) {

           this.bombTable = new CBombTable(width,height,element);

           this.lane[0] = new CLane(this,this.bombTable,true);

           this.lane[1] = new CLane(this,this.bombTable,false);

           this.bombTable.createLevel(this.level);

           element = null;

           this.doStart();

       },

       // 게임을시작한다. 좌, 우레인중랜덤하게불꽃을생성한다.

       doStart : function() {

           //this.bombTable.dumpTable();

           this.lane[(Math.round(Math.random()*10))%2].fire(Math.min(3,(Math.round(Math.random()*10))%3+(10-this.level)));

           this.curFireNum++;

           if (this.curFireNum%(10-this.level)==0) this.bombTable.tableUp();   // 불꽃이지정개수만큼떨어지면, 폭탄을1줄추가한다.

       },

       // 불꽃이모두내려가면, 1초후새로운불꽃을생성한다.

       onFireDrop : function() {

           window.setTimeout(this.doStart.bind(this),1000);

       }

    }

});

 

 불꽃 레인은 불꽃이 떨어지는 장소다. 실제 해당 요소의 div를 생성하고 불꽃 클래스를 생성하여 떨어뜨린다.
 불꽃이 한칸씩 아래로 떨어질 때 마다 폭탄 테이블에 이를 알려서 폭발이 일어나도록 한다.

/* 불꽃레인클래스- 불꽃이떨어지는곳*/

$class({

   CLane : {

       element : null,

       game : null,

       bombTable : null,

       fireball : null,

       fireSpeed : 1,

       firePos : 0,

       lanePos : 0,

      

       // 좌, 우설정에따라불꽃레인div를생성하고폭탄테이블옆에위치시킨다

       init : function(game,bombTable,isLeft) {

           this.game = game;

           this.bombTable = bombTable;

           this.lanePos = (isLeft==true)?0 : 1;

           element = document.createElement('div');

           this.element=element;

           $style(element,'border','1px solid #e090e0');

           $style(element,'background','#e0e0e0');

           $style(element,'styleFloat','left');

           if (isLeft==true) {

               bombTable.parentElement.insertBefore(element,bombTable.element);

           } else {

               bombTable.parentElement.insertBefore(element);

           }

           $dom.setSize(element,32,bombTable.size.height*29);

       },

       // 불꽃을생성하여떨어뜨린다

       fire : function(speed) {

           this.fireSpeed=speed;

           this.fireball = new CFire(this);

           window.setTimeout(this.moveFire.bind(this),this.fireSpeed*100);

       },

       // 불꽃을한칸씩아래로이동시킨다

       moveFire : function(speed) {

           this.fireball.moveDown();

           this.firePos++;

           if (this.firePos<this.bombTable.size.height) {

               this.bombTable.fire(this.firePos,this.lanePos); // 폭탄테이블에불꽃이지나감을알림

               window.setTimeout(this.moveFire.bind(this),this.fireSpeed*100);

           } else {

               // 불꽃이모두내려갔으면불꽃을지운다

               this.fireball.hide();

               this.fireball=null;

               this.firePos=0;

               $event.fire(this.game,'fireDrop');

           }

       }

   }

});

 

 폭탄 테이블은 폭탄들이 배열되어 있는 곳이다. 불꽃이 폭탄 테이블을 지날 때 불꽃과 인접한 폭탄에 폭발 메시지를 전달하며, 시간이 지났을 때 폭탄을 1줄 추가 생성하는 역할을 한다.

클래스는 아래와 같다.

/* 폭탄들이배열되는폭탄테이블클래스*/

$class({

        CBombTable : {

               arrBombTable : null,

               size : {width : 0,height : 0},

               element : null,

               parentElement : null,

              

               /* 이벤트맵*/

               EVENT_MAP : {

                       explosion : 'onExplosion',  // 폭탄폭발완료

                       dropComplete : 'onDropComplete', // 폭탄떨어짐완료

                       fireBomb : 'onFireBomb' // 폭탄폭발시작

               },

        // 폭탄테이블div를생성한다.

               init : function(width,height,parent) {

                       this.size.width=width;

                       this.size.height = height;

                       this.arrBombTable=new Array(width*height);

                       parent = parent || document.body;

                       this.parentElement=parent;

                       parent.innerHTML='<div id="_bomblink_bombtable" style="position:relative;float:left;border:1px solid #9090f0;width:'+width*29+'px;height:'+height*29+'px;">'+

                       '<div style="position:relative;top:0px;left:0px;border-bottom:1px solid red;z-index:2;width:'+width*29+'px;height:29px;" ></div>'+

                       '<div style="position:relative;top:'+(height-2)*29+'px;left:0px;border-top:1px solid blue;z-index:2;width:'+width*29+'px;height:29px;" ></div>'+

                       '</div>';

                       this.element=$('_bomblink_bombtable');

               },

               // 폭탄의심지방향을랜덤으로하여현재레벨에맞게폭탄을생성한다.

               createLevel : function(level) {

                       if (level<5) level=3;

                       var height = Math.min(level,10);

                       for(var y=this.size.height-(level+1);y<this.size.height;y++) {

                              for(var x=0;x<this.size.width;x++) {

                                      var bomb=new CBomb(this,y<this.size.height-1);

                                      this.arrBombTable[x+y*this.size.width]=bomb;

                                      bomb.setPos(x,y);

                                      bomb.setDirection((Math.round(Math.random()*10))%4);

                              }

                       }

               },

               // 지정위치의폭탄을반환

               getBomb : function(x,y) {

                   return this.arrBombTable[x+y*this.size.width];

               },

               // 지정폭탄의인접폭탄을배열로반환

               getSiblingBomb : function(x,y) {

                   return [(x<this.size.width-1)?this.arrBombTable[x+1+y*this.size.width]:null,  // right

                           (y<this.size.height-2)?this.arrBombTable[x+(y+1)*this.size.width]:null,  // bottom

                           (x>0)?this.arrBombTable[x-1+y*this.size.width]:null,  // left

                           (y>0)?this.arrBombTable[x+(y-1)*this.size.width]:null]; // top

               },

               // 불꽃이지나갈때마다체크하여해당위치의폭탄에폭발메시지전달

               fire : function(y,x) {   // x : 0 - left, 1 - right

                   if (y==this.size.height-1) return;

                   if (x==0) {  // left

                        var bomb=this.getBomb(0,y);

                        if (bomb) $event.fire(bomb,'fire',-1,y);

                   } else { // right

                        var bomb=this.getBomb(this.size.width-1,y);

                        if (bomb) $event.fire(bomb,'fire',this.size.width,y);

                   }

                   bomb=null;

               },

               // 폭탄을1줄추가한다

               tableUp : function() {

                   for(var y=0;y<this.size.height-1;y++) {

                        for(var x=0;x<this.size.width;x++) {

                            var index=x+y*this.size.width;

                            var bomb = this.arrBombTable[index]=this.arrBombTable[index+this.size.width];

                            if (bomb) {

                                bomb.setPos(x,y);

                                if (y==this.size.height-2) bomb.enable();

                            }

                        }

                   }

                   for(var x=0;x<this.size.width;x++) {

                              var bomb=new CBomb(this,false);

                              var y=this.size.height-1;

                              this.arrBombTable[x+y*this.size.width]=bomb;

                              bomb.setPos(x,y);

                              bomb.setDirection((Math.round(Math.random()*10))%4);

                   }

                   for(var x=0;x<this.size.width;x++) {

                        if (this.arrBombTable[x]) {

                            alert('Game Over');

                        }

                   }

               },

               // 폭탄폭발시작

               onFireBomb : function (evt,src,type,x,y) {

                    this.arrBombTable[x+y*this.size.width]=null;

               },

               // 폭탄폭발완료- 사라진폭탄의위에있는폭탄에떨어지는메시지를전달한다

               onExplosion : function(evt,src,type,x,y) {

                    var index=x+y*this.size.width;

                

                    for(;index>0;index-=this.size.width) {

                        var bomb=this.arrBombTable[index];

                        if (bomb) {

                                this.arrBombTable[index]=null;

                            $event.fire(bomb,'drop');

                        }

                    }

               },

               // 폭탄떨어짐완료- 만약해당폭탄의아래가비었으면계속떨어지게한다

               onDropComplete : function(evt,src,type,bomb,x,y) {

                    var index=x+(y+1)*this.size.width;

                    this.arrBombTable[index]=bomb;

                    if (this.arrBombTable[index+this.size.width]==null) {

                        this.arrBombTable[index]=null;

                     $event.fire(bomb,'drop');

                    }

                    bomb=null;

               },

               // 현재폭탄테이블의상태를디버그창에표시

               dumpTable : function() {

                        $debug.outputLn('=============================================');

                    for(var y=0;y<this.size.height;y++) {

                            var msg='';

                            for(var x=0;x<this.size.width;x++) {

                                msg+=(this.arrBombTable[x+y*this.size.width])?'o':'x';

                            }

                            $debug.outputLn(msg);

                        }

               }

        }

});

 

불꽃 (실제로는 번개 그림이지만..)은 폭탄 테이블의 양 옆에서 아래로 떨어지며 폭탄을 폭발시킵니다.

불꽃 클래스는 따로 동작하는 것이 없으며, 아래로 떨어지기만 합니다.

불꽃 클래스는 아래와 같습니다.

/* 불꽃클래스*/

$class({

        CFire : {

               sprite : null,

               fireShape : 0,

               lane : null,

               bShow : true,

              

               /* 불꽃스프라이트를생성하고애니메이션을시작한다*/

               init : function (lane) {

                   this.lane=lane;

                       this.sprite = $factory.get(CSpriteBase).get(1,lane.element);

                       this.sprite.setPos(0,0,lane.element);

                       this.fireShape = this.sprite.getShape();

                       this.show();

                       this.animate();

               },

               /* 불꽃을보인다*/

               show : function() {

                   this.bShow=true;

                       this.sprite.show();

               },

               /* 불꽃을숨긴다*/

               hide : function() {

                   this.bShow=false;

                       this.sprite.hide();

               },

               /* 불꽃스프라이트이미지를주기적으로바꾸어애니메이션구현*/

               animate : function() {

                       this.fireShape++;

                       if (this.fireShape>1) this.fireShape=0;

                       this.sprite.shape(this.fireShape);

                       if (this.bShow==true) window.setTimeout(this.animate.bind(this),400);

               },

               /* 불꽃을아래로한칸이동시킨다*/

               moveDown : function() {

                   var pos = this.sprite.getPos();

                   pos.y+=29;

                   this.sprite.setPos(pos.x,pos.y);

               }

        }

});

 

이제 가장 중요한 부분인 폭탄 클래스입니다.

폭탄은 폭발할 경우 인접 폭탄으로 폭발 메시지를 비동기 방식으로 전달하며, 메시지를 받은 폭탄은 심지가 폭발 방향을 향하고 있는지 판단하여 폭발합니다. 그리고, 다시 인접 폭탄으로 폭발 메시지를 전달하는 것을 반복합니다.

또한, 폭탄은 사용자가 액션을 취하는 유일한 클래스입니다. 클릭 이벤트를 받아 심지의 방향을 바꿉니다.

폭탄 클래스는 아래와 같습니다.

        /* 개별폭탄클래스*/

        $class({

               CBomb : {

                       sprite : null,   // CSprite

                       direction : 0,   // 0 : right, 1 : bottom, 2 : left, 3 : top

                       fireLevel : 4,   // 폭발단계

                       /* 폭탄위치*/

                       x : 0,          

                       y : 0,

                       bombTable : null,

                       dropY : 0,

                      

                       /* 이벤트매핑*/

                       EVENT_MAP : {

                              click : 'onClick',  // 폭탄클릭

                              fire : 'onFire',    // 폭탄폭발

                              drop : 'onDrop'     // 폭탄떨어짐

                       },

                      

                       /* 폭탄스프라이트를생성*/

                       init : function (bombTable,clickEnable) {

                           this.bombTable=bombTable;

                              this.sprite = $factory.get(CSpriteBase).get(0,bombTable.element);

                              this.direction = this.sprite.getShape();

                              if (clickEnable==true) $event(this.sprite.getElement(),this);   // 맨밑줄의폭탄은클릭할수없다.

                              this.sprite.show();

                       },

                       /* 폭탄을클릭가능하게함*/

                       enable : function() {

                           $event(this.sprite.getElement(),this);

                       },

                       /* 폭탄의위치지정*/

                       setPos : function (x,y) {

                           this.x=x;

                           this.y=y;

                              this.sprite.setPos(x*29,y*29,this.bombTable.element);

                       },

                       /* 폭탄의심지방향지정*/

                       setDirection : function(dir) {

                           this.direction=dir;

                           this.sprite.shape(dir);

                       },

                       /* 현재폭탄의심지방향반환*/

                       getDirection : function() {

                           return this.direction;

                       },

                       /* 폭탄의폭발애니메이션을보여준다*/

                       showExplosion : function () {

                              if (this.fireLevel<6) {

                                      this.sprite.shape(this.fireLevel);

                                      this.fireLevel++;

                                      window.setTimeout(this.showExplosion.bind(this),100);

                              } else {

                                      this.fireLevel=4;

                                      this.sprite.hide();

                                      $event.fire(this.bombTable,'explosion',this.x,this.y);

                              }

                       },

                       /* 폭탄클릭이벤트핸들러- 폭탄심지의방향을바꾼다*/

                       onClick : function (evt,src,type) {

                              this.direction++;

                              if (this.direction>3) this.direction=0;

                              this.sprite.shape(this.direction);

                       },

                       /* 인접폭탄이폭발했다- 심지가폭발방향을향하고있으면, 자신도폭발한다*/

                       onFire : function(evt,src,type,x,y) {

                           if ((this.direction==0 && y==this.y && x==this.x+1)||

                               (this.direction==1 && y==this.y+1 && x==this.x)||

                               (this.direction==2 && y==this.y && x==this.x-1)||

                               (this.direction==3 && y==this.y-1 && x==this.x)) {

                                   $event.fire(this.bombTable,'fireBomb',this.x,this.y);

                                   this.doFire();

                               }

                       },

                       /* 인접폭탄들에폭발메시지를보낸다*/

                       doFire : function() {

                           var arrSiblings=this.bombTable.getSiblingBomb(this.x,this.y);

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

                                if (arrSiblings[i] && this.direction!=i)

                                    $factory.get(CMessageQueue).put(arrSiblings[i],'fire',this.x,this.y);   // 비동기로메시지를전송한다.

                           }

                           this.showExplosion();

                       },

                       /* 폭탄이아래로떨어진다*/

                       onDrop : function() {

                           this.dropY=0;

                           window.setTimeout(this.doDrop.bind(this),100);

                       },

                       /* 실제폭탄이떨어지는애니메이션구현*/

                       doDrop : function() {

                           var finish=false;

                           this.dropY+=15;

                           if (this.dropY>29) {

                                this.dropY=29;

                                if (this.direction==1) this.setDirection(3);

                                else if (this.direction==3) this.setDirection(1);

                                finish=true;

                           }

                           this.sprite.setPos(this.x*29,this.y*29+this.dropY,this.bombTable.element);

                           if (finish) {

                                /* 폭탄이모두떨어지면폭탄테이블에알린다*/

                                this.y++;

                                $event.fire(this.bombTable,'dropComplete',this,this.x,this.y-1);

                           } else {

                                window.setTimeout(this.doDrop.bind(this),100);

                           }

                       }

               }

        });

 

소스는 그냥 보면서 쭉 읽으면 알 수 있을 정도로 간단합니다. 다른 방식으로 구현 할 수도 있지만, Swaf에서 클래스의 사용 및 메시징을 알리기 위해 이렇게 구현하였습니다.

아쉽게도, 부족한 시간으로 상속 등을 사용하지는 못했습니다. ㅠㅠ