JS高級---面向對象的編程思想（貪吃蛇梳理）

面向對象的編程思想（貪吃蛇梳理）

 

模擬貪吃蛇遊戲，作的項目

 

地圖: 

寬，高，背景顏色，由於小蛇和食物都是相對於地圖顯示的, 這裏小蛇和食物都是地圖的子元素, 隨機位置顯示, 脫離文檔流的, 地圖也須要脫離文檔流--css須要設置:寬, 高, 背景顏色, 脫標

 

食物---div元素

elements--->存儲div的數組(未來刪除的食物div時候, 先從map中刪除div, 再從數組中移除div)

食物: 寬, 高, 背景顏色, 橫座標, 縱座標

一個食物就是一個對象, 這個對象有相應的屬性, 這個對象須要在地圖上顯示

 

最終要建立食物的對象, 先有構造函數, 而且把相應的值做爲參數傳入到構造函數中

食物要想顯示在地圖上, 食物的初始化就是一個行爲

 

1.食物的構造函數--->建立食物對象

2.食物的顯示的方法-->經過對象調用方法,顯示食物,設置相應的樣式

2.1.1 由於食物要被小蛇吃掉,吃掉後應該再次出現食物,原來的食物就刪除了

2.1.2 每一次初始化食物的時候先刪除原來的食物,而後從新的初始化食物

2.1.3 經過一個私有的函數(外面不能調用的函數)刪除地圖上的食物,同時最開始的時候食物也相應的保存到一個數組中,再從這個數組中把食物刪除

 

最後的時候,把食物的構造函數給window下的屬性,這樣作,外部就能夠直接使用這個食物的構造函數了

 

小蛇

小蛇就是一個對象

屬性: 每一個身體都有寬，高，方向

屬性: 身體分三個部分, 每一個部分都是一個對象, 每一個部分都有橫縱座標, 背景顏色

小蛇要想顯示在地圖上,先刪除以前的小蛇,而後再初始化小蛇(小蛇要移動)--方法

 

小蛇要移動---方法

思路: 把小蛇的頭的座標給小蛇第一部分的身體,第一部分的身體的座標給下一個部分身體

小蛇的頭, 須要單獨的設置: 方向