# 1、分析 小游戲中共有三個對象。一個是地圖（Map）、一個是食物（Food）、一個是蛇（Snake）。 以面向對象的方式來開發，應該創建三個對象。 每個對象的特點： > 地圖Map： * 寬width * 高height * 背景顏色backgroundColor * 顯示方法：show > 食物Food： * 寬width * 高height * 背景顏色backgroundColor * x軸坐標：0~29(每個坐標實際像素是20px) * y軸坐標：0~19（每個坐標實際像素是20px） > 蛇Snake： * 身體body（默認有三個div組成，其中一個蛇頭，兩段蛇身，都有顏色） * 能夠移動move * 能夠拐彎，改變移動方向 * 能夠吃食物，變長 # 2、創建地圖  # 3、創建食物 創建一食物，讓它顯示在body中。  食物沒有和地圖對齊，解決辦法是讓父級元素地圖position是relative，讓子元素食物position是absolute，并且讓食物顯示在地圖中，而不是顯示在body中。 所以修改Map，添加position屬性，并且用一個屬性_map來保存地圖：  然后修改食物，讓其顯示在地圖中即可：  # 4、創建蛇  蛇的每一節用一個div來表示，每一節都有寬度、高度、背景顏色、坐標。創建蛇，并讓它顯示到地圖上。  # 5、讓蛇移動 移動方向：默認先向右移動。  這樣做有個問題，當蛇移動的時候，會調用show方法，讓蛇從新顯示。調用show方法，會一直循環創建div。所以看到的效果是蛇移動了，但是越走越長。 解決辦法：  # 6、讓蛇拐彎 控制蛇頭即可，因為身體一直跟著蛇頭走。 蛇頭的方向肯定是上下左右四個方向，可以用一個屬性來表示蛇的移動方向。  當蛇移動的時候，根據方向修改蛇頭的坐標：  下面添加鍵盤事件，修改蛇的運行方向：  # 7、讓蛇吃食物 蛇頭和食物重疊，才算吃到食物。即在移動過程中，如果發現蛇頭的坐標和食物的坐標一樣，才表示吃到食物。  這樣做，吃完食物，發現食物沒有從新顯示。修改Food函數：  # 8、讓蛇加速  當蛇吃到食物的時候，讓時間變小，速度加快：