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

大家可以看看代碼，主要有兩點(diǎn) 1、或許需要處理的 橫豎斜線 4個(gè)數(shù)組，然后看這4個(gè)數(shù)組是否有連續(xù)的。判斷是否連續(xù)只需要一個(gè)狀態(tài)數(shù)組來維持就可以了。
由于考慮到同時(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)畫，其實(shí)這個(gè)動(dòng)畫真心沒勁，要想設(shè)計(jì)好些可以做個(gè)漸變偏移消除。 ?現(xiàn)在我發(fā)現(xiàn)起初沒有設(shè)計(jì)一個(gè)數(shù)組來維護(hù)狀態(tài)有些不太明智，因?yàn)檫€有獎(jiǎng)勵(lì)的星星和炸彈要繪制，挺麻煩的。。 那么，把積分顯示出來吧。 這樣就可以先試玩起來了：）

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)檫@些處理也沒有什么復(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

總結(jié)

以上是生活随笔為你收集整理的HTML5 Canvas编写五彩连珠（6）：试玩的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。