捕魚達人是一款非常流行的遊戲，幾年裡賺取了數以千萬的收入，這裡借用它來介紹一下用Gamebuilder+CanTK開發遊戲的方法。其實賺錢的遊戲未必技術就很難，今天我們就僅用90來行程式碼來實現這個遊戲。 

CanTK(Canvas ToolKit)是一個開源的遊戲引擎和APP框架，是開發HTML5遊戲和APP的利器，如果你喜歡它，請在github上給它加星，您的支援是我們努力的動力：https://github.com/drawapp8/cantk

0.先Show一下最終成果:

1，新建一個專案，刪除場景裡的球和地面，把手機設定成橫屏，然後設定場景的物理引擎引數，把X/Y方向的重力設定為0。

設定場景的背景圖片：

效果如下：

2，在場景中放一個圖片，如下圖設定它的屬性。

3，在圖片中再放一個幀動畫，用來表示大炮，如下圖設定它的屬性。

4，在場景中再放一個幀動畫，用來表示魚，如下圖設定它的屬性。

通過拷貝&貼上，建立10條魚，名稱分別命名為ui-fish1到ui-fish10。得到下面的效果：

5，在場景中再放一個幀動畫，用來表示金幣，如下圖設定它的屬性。

6，在場景中再放一個幀動畫，用來表示炮彈，如下圖設定它的屬性。

7，在底部的圖片中放一個圖片字型，用來表示總金幣數量，如下圖設定它的屬性。

8，在場景中中放一個圖片字型，用來表示單次金幣數，如下圖設定它的屬性。

9，在底部的圖片中放兩個按鈕，用來改變大炮的威力，如下圖設定它的屬性。

到此介面基本完成了（後面可能需要做些調整），效果如下：

10，現在我們開始寫程式碼。

在場景的onOpen裡定義幾個函式：

var win = this;function isObjInvisible(obj) {return !obj.visible;}//當炮彈和魚移動到場景之外時，把它們設定為不可見不可用，後面重用這些物件，以減小記憶體開銷。function handleOnMoved() {    var x = this.x, y = this.y, r = x + this.w, b = y + this.h, w = win.w, h = win.h;    if(x > w || y > h || r < 0
 
 || b < 0) {        this.setVisible(false).setEnable(false);    }}//定時產生魚function makeFish() {    if(!win.info) return;    var info = win.info,cannon = info.cannon;    var fish = info.fishs.find(isObjInvisible);    if(!fish && info.fishs.length < 20) {        var index = Math.floor(10 * Math.random())+1;        fish = win.dupChild("ui-fish"+index);            }    if(fish) {        info.fishs.push(fish);        var y = Math.max(0, Math.floor((win.h - info.bottom.h) * Math.random() - fish.h));        var x =  y%2 ? -fish.w : win.w;        var vx = x > 0 ? -1 : 1;        var rotation = x > 0 ? Math.PI : 0;        fish.setPosition(x, y).setVisible(true).setEnable(true).setV(vx, 0).setRotation(rotation).play("live");    }    setTimeout(makeFish, 500);}//初始化遊戲win.initGame = function() {    var info = {bullets:[], fishs:[], cannonType:1, scoreValue:0};    var cannon = this.find("ui-cannon", true);    var p = cannon.getPositionInWindow();     cannon.center ={x: p.x + (cannon.w >> 1), y: p.y + (cannon.h >> 1)};        info.cannon = cannon;    info.bottom = this.find("ui-image");    var totalScore = this.find("ui-total-score", true);    p = totalScore.getPositionInWindow();     totalScore.center ={x: p.x + (totalScore.w >> 1), y: p.y + (totalScore.h >> 1)};        info.totalScore = totalScore;        var bullet = this.find("ui-bullet").setVisible(false).setEnable(false);    bullet.handleOnMoved = handleOnMoved;    info.bullets.push(bullet);        info.coin = this.find("ui-coin").setVisible(false);    info.score = this.find("ui-score").setVisible(false);    for(var i = 0; i < this.children.length; i++) {        var iter = this.children[i];        if(iter.name.indexOf("ui-fish") >= 0) {            iter.handleOnMoved = handleOnMoved;            iter.setEnable(false).setVisible(false);            info.fishs.push(iter);        }    }    info.timerID = setTimeout(makeFish, 1000);    this.info = info;}//改變大炮型別win.changeCannon = function(delta) {    var info = this.info,cannon = info.cannon;    info.cannonType = Math.max(1, Math.min(7, info.cannonType + delta));    cannon.play("default"+info.cannonType, 100000);}//炮彈打中魚時，炮彈變成網，魚播放die動畫，金幣從炮彈處移動到總金幣處。win.onContacted = function(bullet, fish) {    var info = this.info,cannon = info.cannon;    bullet.setEnable(false).play("web"+info.cannonType, 1, function() {bullet.setVisible(false);});    fish.setEnable(false).play("die", 1, function() {fish.setVisible(false)});    info.scoreValue += 100;    info.totalScore.setValue(info.scoreValue);    info.coin.setVisible(true).animate({xStart:bullet.x, yStart:bullet.y, xEnd:info.totalScore.x, yEnd:info.totalScore.y-20});}//點選場景時，調整大炮位置，發射炮彈，大炮播放射擊動畫。win.handleClick = function(point) {    var info = this.info,cannon = info.cannon;    if(this.targetShape != this.info.bottom) {        var angle = Math.lineAngle(cannon.center, point) - 1.5 * Math.PI;        cannon.setRotation(angle);        var bullet = info.bullets.find(isObjInvisible);        if(!bullet)  {            bullet = win.dupChild("ui-bullet",0);            info.bullets.push(bullet);        }        var x = cannon.center.x - (bullet.w >> 1), y = cannon.center.y - (bullet.h >> 1);        bullet.setPosition(x, y).setRotation(angle).setVisible(true).setEnable(true).setV(5*Math.sin(angle),-5*Math.cos(angle));        bullet.play("bullet"+info.cannonType);        cannon.play("fire"+info.cannonType, 1);        console.log(angle);    }}this.initGame();

this.handleClick(point);

在兩個按鈕中：

this.getWindow().changeCannon(-1);

好了，我們的捕魚達人基本完成了。還有幾個地方需要完善：1.射中多條魚時分數加倍。2.魚有不同的生命值，炮彈有不同的殺傷力。

呵河，這些問題留給讀者動手去做吧，或許您就是下一個千萬級遊戲的開發者呢:)

參考資料：