第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

6，在born方法中隨機(jī)給fruitType賦值： 我們該如何區(qū)別果實(shí)的類型呢？我們需要給果實(shí)類增加一個屬性： //果實(shí)類型 this.fruitType=[]; 這個變量是個character類型，我們在初始化的時候，給它一個空的字符串：this.fruitType[i]=""; 當(dāng)它出生的時候呢，我們再具體給它一個類型。用兩個字符串，一個是orange，一個是blue，用顏色 這兩個字符串來區(qū)別它的屬性fruitType： fruitObj.prototype.born=function(i){ var aneId=Math.floor(Math.random()*ane.num); this.x[i]=ane.x[aneId]; this.y[i]=canHeight-ane.len[aneId]; this.l[i]=0; this.alive[i]=true; this.fruitType[i]= //orange,blue } 我們做一個隨機(jī)： fruitObj.prototype.born=function(i){ var aneId=Math.floor(Math.random()*ane.num); this.x[i]=ane.x[aneId]; this.y[i]=canHeight-ane.len[aneId]; this.l[i]=0; this.alive[i]=true; var ran=Math.random(); if(ran<0.3){ this.fruitType[i]="blue"; //orange,blue }else{ this.fruitType[i]="orange"; } }

5，chrome瀏覽器特性使得果實(shí)變大 好的，另一個細(xì)節(jié)是果實(shí)分黃色的果實(shí)和藍(lán)色的果實(shí)。兩種不同的果實(shí)，這兩種果實(shí)的 區(qū)別呢，就是它的圖片資源不一樣，同時在功能上是這樣子的，假設(shè)大魚吃到了一個黃色的 果實(shí)，假設(shè)它得10分，那么藍(lán)色的果實(shí)呢，可以使它當(dāng)前吃到的黃色果實(shí)的數(shù)量加倍，ok，關(guān)于 這個功能這方面我們先不管，到后面我們?nèi)ビ嬎愕乃膕core的時候再說，現(xiàn)在我們需要把黃色 果實(shí)和藍(lán)色果實(shí)讓它能夠有所區(qū)別，剛才為什么會出現(xiàn)一個特別大的果實(shí)呢？這是chrome瀏覽器的 特性，當(dāng)你不再當(dāng)前標(biāo)簽下面的時候，它就會有時間間隔啊，它會有一個不執(zhí)行的狀態(tài)，當(dāng)我切過來 的時候，這個標(biāo)簽頁下的東西實(shí)際上是不執(zhí)行的，所以會導(dǎo)致那個deltaTime會特別的大，那這個問題 大家可以不用管它，

4，修改speed，讓它的范圍更大，使得果實(shí)快慢差距變大 好，我們到瀏覽器中看一下：可以看到有果實(shí)出來了，一開始的時候還是會產(chǎn)生一大片 然后后面就看起來比較自然了，那我們再修改一下數(shù)值吧。讓它的speed狀態(tài)隨機(jī)的范圍 更大一點(diǎn)： fruitObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.alive[i]=false; this.x[i]=0; this.y[i]=0; this.l[i]=0; this.spd[i]=Math.random()*0.017+0.003;//[0.003,0.02) } this.orange.src="./src/fruit.png"; this.blue.src="./src/blue.png"; } 好，再看一下，好的，現(xiàn)在快慢差距會非常的大

3.修改init方法，將fruitMonitor放在gameloop中。 好，ok，那我們初始化的時候，這里把所有的狀態(tài)設(shè)置為false：this.alive[i]=false; fruitObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.alive[i]=false; this.x[i]=0; this.y[i]=0; this.l[i]=0; this.spd[i]=Math.random()*0.01+0.005;//[0.005,0.015) /* 這個意思就是說：在初始化的時候，讓所有的果實(shí)都出生，出生的過程呢，就是 找到一個位置讓它出生， this.born(i);*/ } this.orange.src="./src/fruit.png"; this.blue.src="./src/blue.png"; } 同時我們需要把這個函數(shù)fruitMonitor放在主循環(huán)里面，每一幀都要進(jìn)行判斷： function gameloop(){ window.requestAnimFrame(gameloop); var now=Date.now(); deltaTime=now-lastTime; lastTime=now; drawBackground(); ane.draw(); fruitMonitor(); fruit.draw(); }

2.修改born方法，增加發(fā)出果實(shí)方法：sendFruit。 但是在這里還有一個細(xì)節(jié)，在整個30個果實(shí)池里面，哪一個是處于 閑置狀態(tài)，哪一個是活著的，需要去判斷一下，這里還是做一個循環(huán)： 如果當(dāng)前果實(shí)的狀態(tài)是false，就要讓這個果實(shí)出生，這里需要傳一個參數(shù)進(jìn)來，這個i值對應(yīng)的 果實(shí)出生，它要隨機(jī)一個?？奈恢?，而后它的尺寸歸零，同時它的alive狀態(tài)要設(shè)置為true。 fruitObj.prototype.born=function(i){ var aneId=Math.floor(Math.random()*ane.num); this.x[i]=ane.x[aneId]; this.y[i]=canHeight-ane.len[aneId]; this.l[i]=0; this.alive[i]=true; } 當(dāng)它出生之后呢，本次循環(huán)結(jié)束。每次sendFruit()只要send一個fruit。然后下一次再進(jìn)入循環(huán)。 function sendFruit(){ for(var i=0;i<fruit.num;i++){ if(!fruit.alive[i]){ fruit.born(i); return; } } }

那我們再來看一下游戲機(jī)制： 1，給果實(shí)添加監(jiān)視功能：fruitMonitor方法。 我們所有的果實(shí)并不是一切全部出生，漂上去，然后就完了，而是持續(xù)不斷的產(chǎn)生果實(shí)， 保持屏幕上有一定數(shù)量的果實(shí)，所以給它加一個規(guī)則：這個規(guī)則是這樣的： 保持屏幕上有一定數(shù)量的果實(shí)，比如15個，所以我們一開始初始化的時候，不應(yīng)該讓所有的果實(shí) 都出生，而是要有一個機(jī)制去判斷，我們來給果實(shí)添加一個監(jiān)視功能吧。 我們要判斷一下當(dāng)前屏幕上有多少個果實(shí)是活著的，如果它的狀態(tài)是true，我們要做一個數(shù)據(jù)統(tǒng)計。 num++如果數(shù)量少于15個，發(fā)出一個果實(shí)，讓果實(shí)出生，并且當(dāng)前的功能執(zhí)行完畢，怎么讓它發(fā)出一個 果實(shí)呢，就是讓它執(zhí)行一下born方法。 function fruitMonitor(){ var num=0; for(var i=0;i<fruit.num;i++){ if(fruit.alive[i]) num++; } if(num<15){ //send fruit sendFruit()； return; } }

5，給果實(shí)動作增加alive限制： 飄出去了我們要做一個判斷，飄出去之后，這個果實(shí)的使命就已經(jīng)完成了。它的任務(wù)就完成了，所以它 要回到一個待命狀態(tài)，ok，我們再來做一個檢測：如果它的y坐標(biāo)小于10，它的alive狀態(tài) 就要變成false，那么只有它的alive狀態(tài)為true的時候，才做上面這些事情(就是生長，往上漂，并且繪制) 所以我們要在for循環(huán)的最頂端加一個條件，如果它的alive狀態(tài)是true，那么就做這所有的事情(生長，往上漂 并且繪制果實(shí)，繪制果實(shí)是在gameloop函數(shù)中會循環(huán)繪制，再有每次繪制果實(shí)的參數(shù)都是在一定范圍內(nèi)隨機(jī)的)， 包括alive的檢測： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.alive[i]){ if(this.l[i]<=14){ //果實(shí)生長時果實(shí)長度的變化情況 this.l[i] += this.spd[i]*deltaTime; }else{ //果實(shí)往上漂的速度的變化情況 this.y[i] -= this.spd[i]*7*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); if(this.y[i]<10){ this.alive[i]=false; } } } } 刷新瀏覽器，好的，沒有出現(xiàn)bug。

4，增加果實(shí)速度屬性改變果實(shí)生長、往上漂動作的速度： 我們給它個性化一下，每一個果實(shí)都有它獨(dú)特的速度，給果實(shí)類添加一個屬性spd，speed速度。 //果實(shí)的速度 this.spd=[]; 這個速度既是果實(shí)成長的速度，也是果實(shí)往上漂的速度，在init方法里，給果實(shí)的速度 初始化一下，給它一個任意值：(其實(shí)這里的值并不是任意的，是在前面調(diào)整好的值的基礎(chǔ)上，將spd做成隨機(jī) 生成的，但還是在原來測試值的附近波動，其作用就是既能保證每一個果實(shí)生長和往上漂的速度不一樣，又能 保持原來果實(shí)生長和往上漂的速度在一個范圍內(nèi)，不會太快，也不會太慢，總而言之，就是讓果實(shí)從生長到 往上漂既能不失真又能不拘泥，不死板) init方法： fruitObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.alive[i]=true; this.x[i]=0; this.y[i]=0; this.l[i]=0; this.spd[i]=Math.random()*0.01+0.005;//[0.005,0.015) this.born(i); } this.orange.src="./src/fruit.png"; this.blue.src="./src/blue.png"; } draw方法： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ //果實(shí)生長時果實(shí)長度的變化情況 this.l[i] += this.spd[i]*deltaTime; }else{ //果實(shí)往上漂的速度的變化情況 this.y[i] -= this.spd[i]*7*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 刷新瀏覽器，看一下，現(xiàn)在果實(shí)都有各自不同的速度，都飄出去了。

3，實(shí)現(xiàn)果實(shí)往上漂，但是動作都一致，看起來很傻： 往上漂這個原理的本質(zhì)就是果實(shí)的y坐標(biāo)在逐漸的減小，所以當(dāng)果實(shí)圖片的長度大于14的時候 做如下改變： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ this.l[i] += 0.01*deltaTime; }else{ this.y[i] -= 0.01*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 好，我們刷新一下，好，果實(shí)在往上漂了對不對，這個速度太小了。作如下改變： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ this.l[i] += 0.01*deltaTime; }else{ this.y[i] -= 0.1*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 恩，這個速度太大了，又做如下改變：0.07 fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ this.l[i] += 0.01*deltaTime; }else{ this.y[i] -= 0.07*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 刷新，好，差不多，一直上去了，其實(shí)這樣子很難看的，果實(shí)向上漂的動作都是一致的，看起來很傻。

2，通過增約束條件，果實(shí)生長不再瘋長： 果實(shí)現(xiàn)在越來越大。我們需要判斷一下： 在draw方法的for循環(huán)中做如下改變： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=10){ this.l[i] += 0.01*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 我們再到瀏覽器中看一下：現(xiàn)在是果實(shí)長到一定程度就不長了。再調(diào)整一下這個值： 讓果實(shí)的長度大于14就不再長大了。 fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ this.l[i] += 0.01*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 好，大家可以看到果實(shí)是慢慢變大，現(xiàn)在已經(jīng)長成熟了，這個時候它需要往上漂，

接下來繼續(xù)細(xì)化果實(shí)的狀態(tài)： 1，果實(shí)變的太大，太恐怖： 首先果實(shí)出生的時候，是由小慢慢長大的，這個過程我們需要來控制一下，這個原理很簡單，是一開始繪圖的時候， 繪一個很小的圖片，然后慢慢的讓這個尺寸加大，我們需要給果實(shí)類加一個屬性： //果實(shí)圖片的長度 this.l=[]; l初始化的時候是0， 那么果實(shí)在出生的時候長度l也是0；因?yàn)榧幢悴皇浅跏蓟?，果?shí)在每次剛出生的時候，這個l也要重置一下， 這個l會隨著時間逐漸的增長，在draw方法的for循環(huán)中，給l加一個常數(shù)0.01：this.l[i] += 0.01; 這里需要調(diào)整一下成長的速度，這里也是我們第一次用到這個值deltaTime，deltaTime是什么呢？ 我們前面講過：就是每兩幀之間的時間間隔。它是用來保證游戲里面動作的流暢，連貫，當(dāng)你用到一個 隨時間變化的變量的時候，一定要使用deltaTime使這個過程變得平滑， 在draw方法的for循環(huán)中做如下改變： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ this.l[i] += 0.01*deltaTime; ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 其中drawImage方法的第4個參數(shù)和第5個參數(shù)是規(guī)定繪制這個圖片的尺寸。 在瀏覽器中刷新一下，可以看到果實(shí)在慢慢長大，不過挺恐怖的，它現(xiàn)在越來越大。我們需要判斷一下：

7，果實(shí)類定義：都是屬性的定義： var fruitObj=function(){ this.alive=[];//bool //果實(shí)坐標(biāo) this.x=[]; this.y=[]; //果實(shí)的圖片資源 this.orange=new Image(); this.blue=new Image(); }

6，果實(shí)類的初始化方法： /* 另外還要初始化一下。初始化的時候還要給池子里面的每一個果實(shí)，要告訴它，它是什么狀態(tài)。 我們首先初始化的時候，給它是否活著的屬性一種任務(wù)狀態(tài)，即初始化為真。 */ fruitObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.alive[i]=true; this.x[i]=0; this.y[i]=0; /* 這個意思就是說：在初始化的時候，讓所有的果實(shí)都出生，出生的過程呢，就是 找到一個位置讓它出生， */ this.born(i); } this.orange.src="./src/fruit.png"; this.blue.src="./src/blue.png"; }

5，果實(shí)的draw方法： /* 哦，另外我們還要畫果實(shí)。我們這邊就要畫每一個果實(shí)了。它有兩個狀態(tài)，首先是 長在海葵上面，因?yàn)楣麑?shí)的數(shù)量要比海葵的數(shù)量要小，所以我們不用很擔(dān)心，即便會 有重復(fù)，我們先不去管它，ok。我們先做一個循環(huán)，在這個循環(huán)里面，畫果實(shí)。 怎么畫果實(shí)？果實(shí)首先要找到一個定位，找到一個海葵，然后grow，長了之后呢 就開始漂了，網(wǎng)上漂fly up。我們首先find an ane,這個時候我們?nèi)绾握夷兀? 當(dāng)前的這個果實(shí)要生長在哪里呢？我們直接寫一個born函數(shù)。 把draw放在gameloop的循環(huán)里面。然后到瀏覽器中看一下情況如何?？?， 所有的果實(shí)已經(jīng)在位置上了。只是這個位置有點(diǎn)點(diǎn)偏差。你看這個果實(shí)的 位置和這個?？奈恢檬遣粚Φ模@是為什么呢？因?yàn)閐rawImage這個API呢 它繪制的時候，是從圖片的0,0點(diǎn)(即圖片的左上角)開始的， 所以這個地方，x值的坐標(biāo)需要減去這個圖片的寬度的一半，同樣的，y值的坐標(biāo)也要減去圖片高度的一半。 ctx2.drawImage(this.orange,this.x[i]-this.orange.width*0.5,this.y[i]-this.orange.height*0.5); 來到瀏覽器中看一下，這樣就很好了，每個果實(shí)都長在?？厦?，也就是說 大家現(xiàn)在看到的不是30個。這是為什么？因?yàn)橛兄丿B，我們沒有給它做一個 排除。問題在這個地方，我們是找的隨機(jī)值，這個隨機(jī)的時候是會出現(xiàn)重復(fù)的： var aneId=Math.floor(Math.random()*ane.num); 怎么樣排除重復(fù)呢？那就是給海葵做一個記錄，判斷一下它當(dāng)前有沒有被 占用，如果沒有被占用，這個果實(shí)就可以生成在這個?？希绻@個?？? 上面已經(jīng)有了一個果實(shí)，就找下一個?？?。 */ fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ /* 我們首先不管果實(shí)大小，先把它畫上去，再說，我們當(dāng)前的任務(wù)呢是讓果實(shí)出生， */ ctx2.drawImage(this.orange,this.x[i]-this.orange.width*0.5,this.y[i]-this.orange.height*0.5); } }

4.1 果實(shí)的born方法： fruitObj.prototype.born=function(i){ var aneId=Math.floor(Math.random()*ane.num); this.x[i]=ane.x[aneId]; this.y[i]=canHeight-ane.len[aneId]; }