上節(jié)中講了如何尋路，在和朋友們討論時(shí)都反應(yīng)有時(shí)走的不太對(duì)，繞遠(yuǎn)路了，其實(shí)代碼主要是大方向的判斷  比如目標(biāo)在右上，那應(yīng)該是先右還是先上 這個(gè)并沒(méi)有做處理，如果這個(gè)做了處理，效果會(huì)更好一些，但也難免會(huì)走彎路。  貪心就是這樣，不是最優(yōu)，接近最優(yōu)。也希望其他的同學(xué)有意見(jiàn)的可以討論下。我這也只是個(gè)人想法。

既然可以走動(dòng)了，那就可以判斷是否可以消除同樣顏色的行、列或斜線了。只要>=5個(gè)同樣的色球，就清除他們，并且可以繼續(xù)移動(dòng)。如果不可以清除，那就再增加3個(gè)球。 

clearLine: function (x1, y1, color, isClick) {   
    if (this.isEmpty(x1, y1)) {   
        if (isClick) game.ready.flyin();   
        return;   
    };   
    //給定一個(gè)坐標(biāo)，看是否有滿足的line可以被消除   
    //4根線 一  | / \   
        
    var current = this.getBubble(x1, y1);   
    if (!current.color) {   
        console.log(current);   
    }   
    var arr1, arr2, arr3, arr4;   
    arr1 = this.bubbles[y1];//橫線很簡(jiǎn)單，就是數(shù)組的一項(xiàng)，現(xiàn)成的   
   
    arr2 = [];   
    for (var y = 0; y < game.cellCount; y++)   
        arr2.push(this.getBubble(x1, y));//豎線就是一列。   
   
    arr3 = [current];   
    arr4 = [current];   
    for (var i = 1; i < game.cellCount ; i++) {   
        if (x1 - i >= 0 && y1 - i >= 0)//\斜線的上半部分...   
            arr3.unshift(this.getBubble(x1 - i, y1 - i));   
        if (x1 + i < game.cellCount && y1 + i < game.cellCount)//\斜線的下半部分   
            arr3.push(this.getBubble(x1 + i, y1 + i));   
   
        if (x1 - i >= 0 && y1 + i < game.cellCount)// /斜線的下半部分   
            arr4.push(this.getBubble(x1 - i, y1 + i));   
        if (x1 + i < game.cellCount && y1 - i >= 0)// /斜線的上班部分   
            arr4.unshift(this.getBubble(x1 + i, y1 - i));   
    }   
   
    var line1 = getLine(arr1);   
    var line2 = getLine(arr2);   
    var line3 = getLine(arr3);   
    var line4 = getLine(arr4);   
   
    var line = line1.concat(line2).concat(line3).concat(line4);   
    if (line.length < 5) {   
        if (isClick) game.ready.flyin();   
        return;   
    }   
    else {   
        var me = this;   
        var i = 0;   
   
        game.play("clearline", function () {   
            if (i == line.length) {   
                game.score.addScore(line.length);   
                game.stop("clearline");   
                me.isMoving = false;   
                //game.ready.flyin();   
                return;   
            }   
            me.isMoving = true;   
            var p = line[i];   
            me.setBubble(p.x, p.y, null);   
            i++;   
        }, 100);   
    }   
   
   
    function getLine(bubbles) {   
   
        var line = [];   
        for (var i = 0; i < bubbles.length; i++) {   
            var b = bubbles[i];   
            if (b.color == color) {   
                line.push({ "x": b.x, "y": b.y });   
            }   
            else {   
                if (line.length < 5)   
                    line = [];   
                else 
                    return line;   
            }   
        }   
        if (line.length < 5)   
            return [];   
        return line;   
    }   
}, 

大家可以看看代碼，主要有兩點(diǎn) 1、或許需要處理的 橫豎斜線 4個(gè)數(shù)組，然后看這4個(gè)數(shù)組是否有連續(xù)的。判斷是否連續(xù)只需要一個(gè)狀態(tài)數(shù)組來(lái)維持就可以了。

由于考慮到同時(shí)消除多行的情況，所以要把連續(xù)的line 連接在一起，并在結(jié)算得分時(shí)考慮獎(jiǎng)勵(lì)。 

isClick參數(shù)主要用于判斷是否是用戶點(diǎn)擊進(jìn)行消行的還是新泡泡飛入產(chǎn)生的。  如果達(dá)不到消行條件并且是飛入的，那就不能再調(diào)用飛入了，否則死循環(huán)了.

滿足的消行代碼也比較簡(jiǎn)單，就是播放一個(gè)消行動(dòng)畫(huà)，其實(shí)這個(gè)動(dòng)畫(huà)真心沒(méi)勁，要想設(shè)計(jì)好些可以做個(gè)漸變偏移消除。  現(xiàn)在我發(fā)現(xiàn)起初沒(méi)有設(shè)計(jì)一個(gè)數(shù)組來(lái)維護(hù)狀態(tài)有些不太明智，因?yàn)檫€有獎(jiǎng)勵(lì)的星星和炸彈要繪制，挺麻煩的。。 那么，把積分顯示出來(lái)吧。 這樣就可以先試玩起來(lái)了：

game.score = {   
    basic: 0,   
    operate: 0,   
    star1: 0,   
    star2: 0,   
    boom: 0,   
    draw: function () {   
        var startX = game.cellWidth * 10 + game.map.startX;   
        var startY = game.map.startY;   
        var ctx = game.ctx;   
        ctx.save();   
        ctx.translate(startX, startY);   
        ctx.clearRect(0, 0, 150, 400);   
        ctx.strokeStyle = "#456";   
        //ctx.strokeRect(0, 0, 150, 200);   
        ctx.font = "24px 微軟雅黑";   
        ctx.fillStyle = "#fefefe";   
        ctx.fillText("score:" + (this.basic * 5 + this.star1 * 8 + this.star2 * 10 + this.boom * 20), 0, 30);   
        ctx.stroke();   
        ctx.restore();   
    },   
    addScore: function (length) {   
        switch (length) {   
            case 5:   
                this.basic++;   
                break;   
            case 6:   
                this.star1++;   
                break;   
            case 7:   
                this.star2++;   
                break;   
            default:   
                this.boom++;   
                break;   
        }   
        this.draw();   
        console.log(this.score);   
    },   
}; 

第三節(jié)在設(shè)計(jì)里談到了 百搭星和炸彈，我太懶了，不打算講了，因?yàn)檫@些處理也沒(méi)有什么復(fù)雜的，HTML5 Canvas的的基礎(chǔ)學(xué)習(xí)也算可以了。后面應(yīng)該學(xué)一些更深入的東西，比如如何處理性能、物體碰撞、運(yùn)動(dòng)學(xué)神馬的。。。

現(xiàn)在游戲應(yīng)該還有bug，大家可以看看代碼發(fā)現(xiàn)吧，這個(gè)系列就到這了，謝謝大家。

試玩地址：http://zhengliangjun.sinaapp.com/colorline.html

源碼下載：http://download.csdn.net/download/maddemon/4154990 

原文鏈接：http://www.cnblogs.com/mad/archive/2012/03/19/2407107.html

【編輯推薦】

1. HTML 5游戲制作之五彩連珠（預(yù)覽）
2. HTML 5游戲制作之五彩連珠（畫(huà)圖）
3. HTML 5游戲制作之五彩連珠（設(shè)計(jì)）
4. HTML 5游戲制作之五彩連珠（動(dòng)畫(huà)）
5. HTML 5游戲制作之五彩連珠（尋路）