HTML5 Canvas實現貪吃蛇（二）

有了乙個實心圓，就可想想大致的思路了。

全域性變數：global

蛇：snake

食物：food

這裡有個比較關鍵的問題就是蛇身具體怎麼動起來。首先肯定是根據重繪canvas來讓它動起來的，那麼就需要兩次繪製中snake.body的座標點有變化，這個變化是根據snake.head這個方向來的，這裡約定：0-上，1-下，2-左，3-右。具體到座標的變化，很直觀的想法是後面乙個座標替代前面乙個座標，然後再新增乙個座標，但這樣一來，是比較複雜的。我採取的做法是：

首先，繪製邊界：

c.width = global.palewidth

;c.height = global.paleheight
;cc.beginpath();
cc.fillstyle = "#ffff00"
;cc.linewidth = 4
;cc.moveto(0, 0);
cc.lineto(global.palewidth - 3, 0);
cc.lineto(global.palewidth - 3, global.paleheight - 3);
cc.lineto(0, global.paleheight - 3);
cc.lineto(0, 0);
cc.stroke();
cc.closepath();

var initx = math.floor(math.random() * (global.palewidth + 1)) / 3 * 3

;var inity = math.floor(math.random() * (global.paleheight + 1)) / 3 * 3
;var initlocation = [initx, inity];
snake.body
.push(initlocation);
snake.paintcycle(initlocation, global.linewidth, global.radius);

snake.movetimer = setinterval(snake.move, 600);

move: function() 

snake.body
.push(newpart);
cc.clearrect(3, 3, global.palewidth - 10, global.paleheight - 10);
if (snake.body
.length > snake.length) 
for (i = 0
; i < snake.body.length; i++) 
}

html5 canvas（多模式彩色貪吃蛇）

簡單中等 困難var d1 document.getelementbyid d1 var s1 document.getelementbyid s1 var c document.getelementbyid mycanvas var context c.getcontext 2d var a 10...

用HTML5 Canvas 實現的 時鐘

基本動畫的步驟 basic animation steps 用canvas畫一幀動畫，通常需要以下四個步驟 1.清空 canvas 除非接下來要畫的內容會完全充滿 canvas 例如背景圖 否則你需要清空所有。最簡單的做法就是用 clearrect 方法。2.儲存 canvas 狀態 如果你要改變一...

HTML5 canvas 繪製圓形

canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...