最近看到網上的一個JavaScript的代碼，下載下來仔細學習一下，之前沒有怎麼接觸過，通讀一遍還是有很多收穫的。整理如下。
貪吃蛇代碼
http://blog.csdn.net/lee18254290736/article/details/51516081
代碼解析
1.H5中<canvas>標籤定義圖形.推薦一個javascript網址：http://jo2.org/html5-canvas-tutorial-list/
2.getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用。這些方法在W3Cschool裡面都能找到。
3.getContext() 方法返回一個用於在畫布上繪圖的環境。
4.Canvas.getContext('2d')
參數 contextID 指定了您想要在畫布上繪製的類型。
當前唯一的合法值是 "2d"，它指定了二維繪圖，並且導致這個方法返回一個環境對象，該對象匯出一個二維繪圖 API。
5.context.fillRect(x,y,width,height);
參數值
參數 描述
x 矩形左上方的 x 座標
y 矩形左上方的 y 座標
width 矩形的寬度，以像素計
height 矩形的高度，以像素計
像素可以說是長度
6.ctx.fillStyle='#FF0'填充色
7.ctx.clearRect(20,20,100,50);在一個矩形中清空一個地區的，形成一個矩形。
8.Javascript對於大小寫十分敏感。
9.聲明函數的三鐘方法：
function add(a,b){
return a+b;
}
var add=function add(a,b){
return a+b;
}
JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫，並且必須以與函數名稱相同的大小寫來調用函數。
10.beginPath() 丟棄任何當前定義的路徑並且開始一條新的路徑。它把當前的點設定為 (0,0)。
當一個畫布的環境第一次建立，beginPath() 方法會被顯式地調用。
11.moveTo() 方法可把視窗的左上方移動到一個指定的座標。
文法
window.moveTo(x,y)
參數 描述
x 視窗新位置的 x 座標
y 視窗新位置的 y 座標
12.lineTo() 方法添加一個新點，然後建立從該點到畫布中最後指定點的線條（該方法並不會建立線條）。
提示：請使用 stroke() 方法在畫布上繪製確切的路徑。
JavaScript 文法：
context.lineTo(x,y);
參數值
參數 描述
x 路徑的目標位置的 x 座標
y 路徑的目標位置的 x 座標
13.<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);//開始的位置
ctx.lineTo(20,100);
ctx.lineTo(70,100);//目標位置
ctx.strokeStyle="green";
ctx.stroke();//畫出來這條線
</script>
</body>
</html>
14. c.strokeStyle = "red";邊框的顏色
15.floor() 方法執行的是向下取整計算，它返回的是小於或等於函數參數，並且與之最接近的整數。
Math.floor(5.1)=5
16.random() 方法可返回介於 0 ~ 1 之間的一個隨機數。
17.innerHTML在JS是雙向功能：擷取對象的內容 或 向對象插入內容；
如：<div id="aa">這是內容</div> ，我們可以通過 document.getElementById('aa').innerHTML 來擷取id為aa的對象的內嵌內容；
也可以對某對象插入內容，如 document.getElementById('abc').innerHTML='這是被插入的內容'; 這樣就能向id為abc的對象插入內容。
18.<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>
輸出：
George,John,Thomas
4
George,John,Thomas,James
19.setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算運算式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
20. [] 數組，裡面是數組元素； {} 對象，裡面是對象元素； ()一般是方法的定義或調用，扣號中設定方法參數。
21.shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。
在本例中，我們將建立一個數組，並刪除數組的第一個元素。請注意，這也將改變數組的長度：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
</script>
輸出：
George,John,Thomas
George
John,Thomas
22.當頁面載入的時候可以調用某些函數
例如定義一個function a(){
}
window.onload =
在頁面載入的時候就可以調用函數a了
還可以 window.onload = =function() { a(); b(); }
來調用多個方法
23.unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
