[GWT] 來寫個生命遊戲吧！

[PsMonkey (痞子軍團團長)]

如遇轉載本文，請保留完整作者資訊以及簽名檔
（尤其某 j2_e.info 網站，咱家的文章不是給你拿來亂用的）


寫一個 JavaScript 版的生命遊戲（Game of life）
要花多久？ 有多難呢？

嗯？ Java 版不是說好不提 JavaScript 嗎？
好好好，那拿出以前交作業的 Java 程式吧！ [咦？]

首先包個「細胞」class
狀態只有兩種，要嘛活著要嘛死掉
不過得多個變數預知下一代會生會死

    public class Cell{
        private boolean now;
        private boolean next;

        public Cell(){}

        public Cell(boolean alive) {now = alive;}

        public boolean isAlive(){return now;}

        public void setNextAlive(boolean alive){
            this.next = alive;
        }

        public void nextTurn() {now = next;}
    }

然後再來包個「世界」的 class
裡頭有一堆細胞，所以用個二維陣列來表示
至於 width, 跟 height 這兩個 field 純粹只是為了懶惰好看 [逃]

    public class World{
        private int width;
        private int height;
        private Cell[][] cell;

        public World(int w, int h){
            width = w;
            height = h;

            cell = new Cell[w][h];
            for(int i=0; i<w; i++){
                for(int j=0; j<h; j++){
                    cell[i][j] = new Cell(Random.nextBoolean());
                    //Random 是什麼？ 不要問，很恐怖... [誤]
                }
            }
        }

        public void nextTurn(){
            for(int w=0; w<width; w++){
                for(int h=0; h<height; h++){
                    checkCell(w, h);
                }
            }

            for(int w=0; w<width; w++){
                for(int h=0; h<height; h++){
                    cell[w][h].nextTurn();
                }
            }
        }

        private void checkCell(int w, int h) {
            int tmpW;
            int tmpH;
            int sum=0;
            for(int i=-1; i<2; i++){
                tmpW = w+i;
                if( tmpW<0 || tmpW==width){
                    continue;
                }
                for(int j=-1; j<2; j++){
                    tmpH = h+j;
                    if( tmpH<0 || tmpH==height){
                        continue;
                    }
                    if(tmpH==h && tmpW==w){
                        continue;
                    }
                    if(getCell(tmpW, tmpH).isAlive()){
                        sum++;
                    }
                }
            }

            switch(sum){
            case 0:
            case 1:
            case 4:
            case 5:
            case 6:
            case 7:
            case 8:
                getCell(w, h).setNextAlive(false);
                break;
            case 3:
                getCell(w, h).setNextAlive(true);
                break;
            }
        }

        public Cell getCell(int w, int h){
            //TODO w, h 的範圍值判斷
            return cell[w][h];
        }
    }


好了，物件都包好了，那麼現在該來解決畫面了
這次不用 Swing、也不用 SWT，試試傳說中的 GWT [奸笑]

「監視器」本身是個 panel，至於 vertical 在幹麼就跳過。
監視器要監看生命遊戲的世界，還要有一個棋盤來顯示狀況
所以 field 大概就是這樣啦～

    public class Monitor extends VerticalPanel{
        private World world;
        private Grid board;
        private int width = 10, height = 10;
    }


constructor 要把「世界」跟「棋盤」正式建立起來
「棋盤」要放在「監視器」上頭，還要有個按鈕讓人家可以點下一步
所以...

    public Monitor(){
        world = new World(width, height);

        board = new Grid(width, height);
        this.add(board);

        Button next = new Button("下一世代");
        //點下一步要幹些什麼好事？
        next.addClickHandler(new ClickHandler(){
             @Override
             public void onClick(ClickEvent event) {
                 nextTurn();
             }
        });
        this.add(next);

        //重新整理畫面
        refresh();
    }


這邊先跑出來兩個新的 method
nextTurn() 沒啥好講的，就是要 world 過個年，然後重新整理畫面

    public void nextTurn(){
        world.nextTurn();
        refresh();
    }


至於 refresh()，我打算讓活著的細胞用「Ｘ」來表示
死掉的細胞的空空白白的什麼都沒有（其實是全形空白）

    private void refresh() {
        for (int i = 0; i < width; i++) {
            for (int j = 0; j < height; j++) {
                if (world.getCell(i, j).isAlive()) {
                    board.setText(i, j, "Ｘ");
                } else {
                    board.setText(i, j, "　");
                }
            }
        }
    }


剩下的就是找到啟動的地方
在 GWT 裡頭是 EntryPoint 這個家族的 class
然後這樣寫：

    public class Enter implements EntryPoint {
        public void onModuleLoad() {
            RootPanel.get().add(new Monitor());
        }
    }

好啦～ 恭喜你，只剩下 compile
以及找個網頁空間放 .js 檔
JavaScript 版的生命遊戲就... 寫 完 啦... \囧/

輕不輕鬆？ 開不開心？ [扭扭]
以前的 Java 程式碼可以直接拿來用...

阿？ 什麼？
GWT 的開發環境要怎麼安裝？
程式碼要放在哪個目錄下？
怎麼指定 EntryPoint？
ㄜ... 請參照課本第 43 頁就可以了，好！ 下課！ [逃]


----
以 GWT 教學系列來說，應該先講環境建制之類 blahblah
不過還是先跳過那些繁文縟節，先來講比較實在的部份
如果這樣子寫 JavaScript 沒辦法引起興趣
還是會想要用 jQuery 之類的方法來寫程式
那開發環境安裝起來再快（例如 XAMPP [大笑]），也沒啥意義 :P

要試試看程式執行起來的感覺，可以到這來看看：
http://www.psmonkey.org/gwt-product.html

--
錢鍾書：    說出來的話
                                                  http://www.psmonkey.org
    比不上不說出來的話
                                                  Java 版  cookcomic 版
  只影射著說不出來的話
                                                  and more......

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 61.20.183.90
推 godfat:cool, GWT 能做這種嗎？ http://stewdio.org/pong/
→ PsMonkey:理論上可以，實際上... 我不會 Orz
→ TonyQ:會js的人直接寫就好了 , 跟你兜一圈寫java幹麼 XDDD
→ PsMonkey:我也會 JS 阿... 可是我不想寫......
推 neversay:You can write javascript with jQuery
推 qrtt1:http://elliottkember.com/snake.html 寫個貪食蛇吧 XD
→ PsMonkey:現在變成出題大賽了 T_T
推 tkcn:我比較想要 javascript 版的 starcraft   XD
→ PsMonkey:StarCraft... 你... 你好樣的...
推 zanyking:還要可以出Broodwar 資料片
推 coronach:寫個Diablo III吧 XD