貪吃蛇遊戲

2021-10-01 03:14:25 字數 2590 閱讀 1118

知識點

物件導向思想,原型新增方法的練習,私有的函式

功能實現

1、搭建頁面

放乙個容器盛放遊戲場景 div#map,設定樣式。

2、分析物件

- 遊戲物件

- 蛇物件

- 食物物件

3、建立食物物件

food

- 屬性:所在位置、寬高度、顏色

- x

- y- width

- height

- color

- 方法

- init 隨機建立乙個食物物件,並輸出到map上

①建立food的建構函式,並設定屬性        

②通過原型設定init方法,實現隨機產生食物物件,並渲染到map上。理由:如果直接在food的建構函式中寫初始化方法,呼叫一次需要開闢一塊記憶體,多次呼叫就要開闢多個記憶體。但在原型上新增方法則只需要開闢一次記憶體,節省了空間。

③通過自呼叫函式,進行封裝,通過window暴露food物件。------------自呼叫函式作用:不會發生變數汙染(函式外面變數不會覆蓋函式內部變數)

window.food = food;
4、建立蛇物件

snake

- 屬性

- width 蛇節的寬度 預設20

- height 蛇節的高度 預設20

- body 陣列,蛇的頭部和身體,第乙個位置是蛇頭

- direction 蛇運動的方向 預設right 可以是 left top bottom

- 方法

- init 把蛇渲染到map上

①建立snake的建構函式,並設定屬性。        

②通過原型設定init方法,把蛇渲染到map上。

③通過自呼叫函式,進行封裝,通過window暴露snake物件。

5、建立遊戲物件

用來管理遊戲中的所有物件和開始遊戲 。

game

- 屬性

- food

- snake

- map 容器

- 方法

- start 開始遊戲(繪製所有遊戲物件)

①建立game的建構函式,並設定屬性。        

②通過原型設定start方法,渲染食物物件和蛇物件,即呼叫食物和蛇的init方法

③通過自呼叫函式,進行封裝,通過window暴露game物件。

遊戲的邏輯

1、蛇移動的方法

- 在蛇物件(snake.js)中,在snake的原型上新增move方法

1. 讓蛇移動起來,把蛇身體的每一部分往前移動一下

2. 蛇頭部分根據不同的方向決定往**移動

2、讓蛇自己動起來

- 在game.js中 在原型上新增runsnake方法,開啟定時器呼叫蛇的move和init方法,讓蛇動起來

- 判斷蛇是否撞牆

var maxx = this.map.offsetwidth / this.snake.width;

var maxy = this.map.offsetheight / this.snake.height;

var headx = this.snake.body[0].x;

var heady = this.snake.body[0].y;

//橫座標,撞牆|ू・ω・` )

if (headx < 0 || headx >= maxx)

if (heady < 0 || heady >= maxy)

3、控制蛇的移動方向

-在game.js中 在原型上新增bindkey方法,通過鍵盤控制蛇的移動方向

-e.keycode

4、判斷蛇是否吃到食物

-在snake的move方法中,在移動的過程中判斷蛇是否吃到食物

-如果蛇頭和食物的位置重合代表吃到食物

-吃到食物,往蛇節的最後加一節

-吃到後,把現在的食物物件刪除,並重新隨機渲染乙個食物物件

私有函式

-私有方法是不能被外部訪問的方法

-建立私有方法:使用自呼叫函式包裹

有兩個私有函式
-刪除食物的私有函式

-當食物被吃後需要刪除原來的食物,在渲染之前就可以呼叫

刪除蛇的私有函式

-蛇吃到食物後需要增加一節,這時需要重新渲染小蛇,在渲染之前就可以呼叫

自呼叫函式的引數

//傳入window物件

(function (window, undefined) (window, undefined))

貪吃蛇遊戲

貪吃蛇遊戲 結構化程式設計 c語言程式設計 重要的的是結構化的程式設計思想 include include include include include include define field width 300 就做20個格仔的 define field height 300 define f...

貪吃蛇遊戲

include include include include include 使用當前時間做種子 enum dir 列舉型別enum dir 圍牆 class fencef 定義物件 畫框框 void fence initfence 顯示框框 void fence outputf int snak...

貪吃蛇遊戲

閒暇之餘,學習前輩經驗,再利用執行緒和窗體自己做了個貪吃蛇小遊戲。遊戲帶有加速功能,能顯示遊戲分數。借鑑的朋友們後期還可以在此基礎上增加其他功能。下面給大家顯示遊戲 以及詳細註解 一 bean類 蛇和食物的構造基礎,author deng public class node public node ...