HTML5小遊戲貪吃蛇分析與實現

昨天下午研發中心總結大會，晚上大家一起吃飯。多少面孔成了曾經，多人新人充滿憧憬，明年又會是如何。年年歲歲花相似，歲歲年年人不同。

晚上大家吃飯，我們桌不喝酒。口味雖然淡了點，勉強也還算盡興。

8點多回到家想起下午開會時想到的貪吃蛇小遊戲，就準備動手寫乙個。

先上效果圖：

貪吃蛇的邏輯非常簡單，稍微動一下腦子就能想出來。

規則：1、撞到牆壁或撞到自己。判輸。

2、撞到幸運點，自身長大一格。

3、每長大一格，分數增加10。分數每增加100，速度提公升乙個級別。

邏輯：

1.首先要理解蛇的運動。很容易發現蛇每往前走一步。本質就是增加乙個頭部點，去掉原來的尾巴點。中間的所有點都是不動的。用程式化的表達，整條貪吃蛇可以是乙個類似這樣[[1,2],[1,3]]的帶位置資訊的陣列，每移動一步，我們往陣列推入乙個新的座標點，並移除第乙個座標點。

2.如何獲取下乙個點的座標。我們的蛇理論上可以往上下左右四個方向移動。可以根據現在蛇頭的座標和方向計算出合適的x,y座標。就是新的蛇頭座標。比如[1,2]往右邊移動一下就變成[2,2]，往右邊移動的本質是x座標增加1。

4.生成幸運點。一要隨機。二不能生成在貪吃蛇身上。也就是幸運點座標不能在貪吃蛇身體的座標組中就可以。

5.吃掉幸運點。貪吃蛇座標陣列中新增幸運點到陣列尾部。並且不移除蛇尾。

6.判斷輸。如果新生成的頭部的座標，是蛇身座標組是的乙個值。說明撞到自己了。如果新生成的頭部座標的x,y值超出了邊界值。判輸。

7.分數和速度。速度就是控制蛇運動的 timer執行的時間間隔而已。

核心**：

初始化：

var snake = function(ele,scoreele,speedele,x,y)

方法（部分）：

snake.prototype = ,
getcellarea:function(pos),
settimer:function()
(function(thethis), speedarr[speed]);
})(this);
}, movesnake:function()
//超界，或撞上自己。結束，重置。
if(in_array(snakehead,snakearr) || snakehead[0]<0 || snakehead[0]>this.x || snakehead[1]<0 || snakehead[1]>this.y)
snakearr.push(snakehead);//將蛇頭放入陣列
this.drawcell(snakehead,1);
if(snakehead.tostring() != this.coolpoint.tostring())else
this.settimer();
}, createcoolpoint:function()while(in_array(this.coolpoint,this.snakearr));
}, changediretion:function()
break;
case 40://下
if(direction!=2 && direction !=4)
break;
case 37://左
if(direction!=1 && direction !=3)
break;
case 38://上
if(direction!=2 && direction !=4)
break;
default:
break;
}}; 
}, drawsnake:function();
}, drawcell:function(pos,type)
}

呼叫：

var snake = new snake("snake","score","speed",15,15);
snake.init();

HTML5小遊戲貪吃蛇分析與實現

貪吃蛇小遊戲

C 貪吃蛇小遊戲

貪吃蛇小遊戲實現

HTML5小遊戲貪吃蛇分析與實現

貪吃蛇小遊戲

C 貪吃蛇小遊戲

貪吃蛇小遊戲實現

相關推薦