js高階第二天(貪吃蛇)

2021-09-27 01:18:56 字數 2862 閱讀 6978

1.先做食物並隨機生成食物和刪除食物

地圖:寬,高,背景顏色,脫標

食物–div元素

elements---->儲存div的陣列(將來刪除食物div的時候,先從map中刪除div,再從陣列中移除div)

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

乙個食物就是乙個物件,這個物件有相應的屬性,這個物件需要在地圖上顯示 最終要建立食物的物件, 先 有建構函式,並且把相應的值作為引數傳入到建構函式中

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

1.食物的建構函式—>建立食物物件

2.食物的顯示的方法–>通過物件呼叫方法,顯示食物,設定相應的樣式

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

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

2.1.3 通過乙個私有的函式(外面不能呼叫的函式)刪除地圖上的食物,同時最開始的時候食物也相應的儲存到乙個陣列中,再從這個陣列中把食物刪除

最後的時候,把食物的建構函式給window下的屬性,這樣做,外部就可以直接使用這個食物的建構函式了

2.做出小蛇在地圖中顯示

小蛇就是乙個物件

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

屬性:身體分三個部分,每個部分都是乙個物件,每個部分都有橫縱座標,背景顏色

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

//自呼叫函式--小蛇

(function(),//頭

,//身體

//身體

];//方向

this.direction=direction||"right";

}//為原型新增方法--小蛇初始化的方法

snake.prototype.init=function(map)

};//把snake暴露給window,外部可以訪問

window.snake=snake;

}());

//外部測試**

var fd=new food();

fd.init(document.queryselector(".map"));

var snake=new snake();

snake.init(document.queryselector(".map"));

3.讓小蛇動起來

小蛇要移動—方法

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

小蛇的頭,需要單獨的設定:方向

//為原型新增方法--小蛇動起來

snake.prototype.move=function(food,map)

//判斷方向--改變小蛇的頭的座標位置

switch(this.direction)

};//刪除小蛇 的私有的函式

function remove()

}//把snake暴露給window,外部可以訪問

window.snake=snake;

}());

//外部測試**

// var fd=new food();

// fd.init(document.queryselector(".map"));

// var snake=new snake();

// snake.init(document.queryselector(".map"));

// setinterval(function(),150);

4.自呼叫函式,封裝遊戲物件
//自呼叫函式--遊戲物件

(function()

game.prototype.init=function(),150);

// this.snake.move(this.food,this.map);

// this.snake.init(this.map);

};window.game=game;

}());

var gm=new game(document.queryselector(".map"));

gm.init();

5.將小蛇動的定時器封裝成遊戲物件的方法並且設定遊戲結束
//新增原型方法--設定小蛇可以自動的跑起來

game.prototype.runsanke=function(food,map)

//縱座標

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

}.bind(that),150);

};

6.為遊戲物件新增方法,設定使用者的按鍵,改變小蛇的方向

鍵盤按下事件—onkeydown

//新增原型方法--設定使用者按鍵,改變小蛇方向

game.prototype.bindkey=function()

}.bind(that),false);

};

7.結束–讓小蛇動起來的方法中判斷小蛇有沒有吃到食物
//判斷有沒有吃到食物

//小蛇的頭的座標和食物的座標一致

var headx=this.body[0].x*this.width;

var heady=this.body[0].y*this.height;

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

//把食物刪除,重新初始化食物

food.init(map);

python高階第二天

話不多說,上原始碼 class inttuple tuple 重寫父類方法 def new cls,iterable for i in iterable if isinstance i,int and i 0 用列表推導式 f i for i in iterable if isinstance i,...

前端高階第二天

html文件 document 文件的意思 建立乙個html檔案,裡面寫的所有 就會形成乙個html文件。html文件是純文字?答 是 html文件也是純文字,也可以使用記事本開啟,記事本不能解析,只有瀏覽器和能解析html文件。不同的檔案,有不同的字尾 字尾 html 之前也可以是.htm 歷史問...

JS學習第二天

2.3 算術運算子與表示式 常見的算術運算子有 對應在js當中的運算子為 運算的的前提條件是數值才能進行運算,如果不是數值進行加減乘除運算時就會出錯。加法運算 數值 var weight 65 weight weight 10 alert weight 字串拼接 字串 var dogname zha...