整理專案 貪吃蛇

2021-10-01 10:57:32 字數 3436 閱讀 8314

從今天開始,我要整理整理之前學習的時候寫的一些小demo了和記的一些重點筆記了,自己也順便複習一下

回憶一下當初的主要思路

1、頁面分為兩個區域——使用者介面區和遊戲區

2、使用者介面區有顯示得分功能和開始、暫停、重新遊戲按鈕

3、用div+css布局規劃頁面

4、建立地圖、蛇、食物

5、用鍵盤方向鍵可以控制蛇移動

6、蛇頭觸碰食物,食物消失,蛇增加長度,得分

效果圖(我承認介面有點醜)

首先地圖物件main.js

(

function()

)();

蛇物件snake.js

(

function()

;//蛇節的大小

this

.width = options.width ||20;

this

.height = options.height ||20;

//蛇移動的方向

this

.direction = options.direction ||

'right'

//蛇的身體(蛇節) 第乙個元素是蛇頭

this

.body =[,

,];}

snake.prototype.

render

=function

(map)

}//私有成員

function

remove()

}//控制蛇移動的方法

snake.prototype.

move

=function

(box, map)

//控制蛇頭移動

//判斷蛇移動的方向

var head =

this

.body[0]

;switch

(this

.direction)

判斷蛇頭是否和食物的座標重合

var headx = head.x *

this

.width;

var heady = head.y *

this

.height;

if(headx === box.x && heady === box.y));

//得分

score = score +10;

document.

getelementbyid

('defeng'

).innerhtml = score;

//隨機在地圖上重新生成食物

box.

render

(map);}

}//暴露建構函式給外部

window.snake = snake;})

()測試**

//var map = document.getelementbyid('map');

//var snake = new snake();

食物物件box.js

//自呼叫函式--開啟乙個新的作用域,避免命名衝突

(function()

;//設定物件屬性

this

.backgroundcolor = options.backgroundcolor ||

'white'

;this

.width = options.width ||20;

this

.height = options.height ||20;

this

.x = options.x ||0;

this

.y = options.y ||0;

}//渲染

//初始化div方塊的樣式

box.prototype.

render

=function

(map)

function

remove()

}//暴露建構函式給外部

window.box = box;;}

)()//

測試//var map = document.getelementbyid('map');

//var box1 = new box();

遊戲物件:game.js

(

function()

game.prototype.

start

=function()

//通過鍵盤控制蛇移動的方向

function

bindkey()

},false);

}var flag =1;

//私有函式

function

runsnake()

if(heady <

0|| heady >= maxy)},

150)

;//暫停開始按鈕

var stop = document.

getelementbyid

('pause');

var refresh = document.

getelementbyid

('refresh');

var start = document.

getelementbyid

('start');

if(flag ==1)

}else

if(flag ==0)

start.

onclick

=function()

if(heady <

0|| heady >= maxy)},

150)

; start.disabled =

true

; stop.disabled =

false

; flag =1;

// console.log(flag);

}// var timeid = setinterval(function()

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

//

// },150);

refresh.

onclick

=function()

;}window.game = game;})();

中間還有乙個工具獲取隨機值的

(

function()

}//暴露tools

window.tools = tools;})();

QT專案 貪吃蛇

學習qt之後便找了貪吃蛇這個小專案來練習,因為沒有使用ui,因此在繪製方面工程量較大 首先了解貪吃蛇的遊戲邏輯 1.食物隨機出現,蛇頭與蛇尾隨機 完成遊戲初始化 2.蛇碰到食物蛇身變長 3.不按鍵時蛇按照當前方向前進 4.按鍵轉向 5.蛇觸碰到自己和邊緣遊戲結束 第一階段初步完成時,完成情況如下 第...

貪吃蛇專案總結

這是乙個很早之前做的專案,今天突然在資料夾中看到,突然有想去試一下這個小遊戲,就給它執行了一遍,順便回味了一下當初寫這個專案的經歷。在我編寫的遊戲中的蛇是用乙個雙向鍊錶來實現的。為什麼要選擇用雙向鍊錶呢?1.使用乙個帶頭節點和尾節點的雙向鍊錶可以把蛇身體的每乙個結點用乙個鍊錶節點來表示。2.在蛇向前...

js 實現貪吃蛇專案

近來在學習js高階,便學習著做個網頁版貪吃蛇專案。map tools.js function window.tools tools food.js function game.prototype.start function function runsnake if heady 0 heady ma...