-
5，通過(guò)lerpDistance使得小魚(yú)跟著大魚(yú)移動(dòng) 這時(shí)候，我們?cè)僮屝◆~(yú)動(dòng)起來(lái)，小魚(yú)動(dòng)起來(lái)就是對(duì)于大魚(yú)當(dāng)前坐標(biāo)的lerp， 就是讓小魚(yú)的坐標(biāo)一直趨向于大魚(yú)的坐標(biāo)，我們?cè)賮?lái)看一下大魚(yú)lerp坐標(biāo)的過(guò)程，讓它的坐標(biāo)值趨向于目標(biāo)值，現(xiàn)在繪畫(huà)小魚(yú)的時(shí)候，小魚(yú)lerp的目標(biāo)坐標(biāo)就是大魚(yú)的坐標(biāo)， babyObj.prototype.draw=function(){ //lerp x,y this.x=lerpDistance(mom.x,this.x,0.98); this.y=lerpDistance(mom.y,this.y,0.98); //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5+23,-this.babyTail.height*0.5); ctx1.drawImage(this.babyBody,-this.babyBody.width*0.5,-this.babyBody.height*0.5); ctx1.drawImage(this.babyEye,-this.babyEye.width*0.5,-this.babyEye.height*0.5); ctx1.restore(); } 好，我們刷新一下，小魚(yú)已經(jīng)跟著大魚(yú)走起來(lái)了查看全部
-
4，調(diào)整小魚(yú)身體部位繪畫(huà)順序，使小魚(yú)更逼真 但是尾巴應(yīng)該在身子的后邊，并且眼睛應(yīng)該在前面，所以這樣呢，我們需要先畫(huà) 尾巴，然后再畫(huà)body，body畫(huà)完了再畫(huà)眼睛，就好像在畫(huà)布上面一層一層涂一樣，那么先畫(huà)的就在下面，后畫(huà)的在上面， babyObj.prototype.draw=function(){ //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5+23,-this.babyTail.height*0.5); ctx1.drawImage(this.babyBody,-this.babyBody.width*0.5,-this.babyBody.height*0.5); ctx1.drawImage(this.babyEye,-this.babyEye.width*0.5,-this.babyEye.height*0.5); ctx1.restore(); } ok，好，小魚(yú)已經(jīng)畫(huà)好了，實(shí)際上，大魚(yú)也存在順序的問(wèn)題，我們來(lái)調(diào)整一下，先畫(huà)尾巴，再畫(huà)body，后畫(huà)眼睛， 好，再刷新一下，沒(méi)有問(wèn)題查看全部
-
3，繪制靜態(tài)的小魚(yú) 現(xiàn)在開(kāi)始繪制，先把這幾張圖片畫(huà)上去， babyObj.prototype.draw=function(){ //ctx1 ctx1.drawImage(this.babyEye,this.x,this.y); ctx1.drawImage(this.babyBody,this.x,this.y); ctx1.drawImage(this.babyTail,this.x,this.y); } 并且把draw放到主循環(huán)里， 好，看一下，小魚(yú)已經(jīng)畫(huà)上去了，接下來(lái)做的是，轉(zhuǎn)移原點(diǎn)的相對(duì)坐標(biāo)，轉(zhuǎn)移相對(duì)坐標(biāo)還記得是哪一個(gè)API嗎？我們希望里面的方法只適用于小魚(yú)，所以加上ctx1.save()和ctx1.restore()。對(duì)其他的內(nèi)容是不產(chǎn)生影響的，所以要用到save和restore這一對(duì)API。我們把原點(diǎn)轉(zhuǎn)移到小魚(yú)的坐標(biāo)位置，這樣this.x和this.y就變成了0,0點(diǎn)，它變成0,0點(diǎn)的時(shí)候，繪制的坐標(biāo)就變了，這個(gè)時(shí)候應(yīng)該是0,0對(duì)吧，可是這個(gè)圖片資源也是有寬度的，所以為了把這個(gè)圖片繪制在以這個(gè)原點(diǎn)為中心的位置呢，我們需要做一下調(diào)整，減去這個(gè)圖片資源的一半，同樣的，它的y坐標(biāo)也要減去它的圖片資源的高度的一半，這樣圖片資源的中心就是當(dāng)前的原點(diǎn)， babyObj.prototype.draw=function(){ //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.drawImage(this.babyEye,-this.babyEye.width*0.5,-this.babyEye.height*0.5); ctx1.drawImage(this.babyBody,-this.babyBody.width*0.5,-this.babyBody.height*0.5); ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5,-this.babyTails.height*0.5); ctx1.restore(); } 好，我們來(lái)看一下，好，沒(méi)有問(wèn)題，這些圖片資源的中心原點(diǎn)就在這個(gè)位置，我們需要把尾巴往后移動(dòng)一點(diǎn)，往后移就需要加一個(gè)值，加20，奧，太少，23.好，這個(gè)位置差不多查看全部
-
2，添加圖片屬性完善小魚(yú)類的定義 我們繪制小魚(yú)呢，按照之前繪制魚(yú)媽媽的方法，來(lái)一步一步回想，第一步先把小魚(yú)的身體圖片資源繪制上去，然后第二步是讓小魚(yú) 能夠動(dòng)起來(lái)，跟著鼠標(biāo)動(dòng)，第三步是讓小魚(yú)能夠旋轉(zhuǎn)，小魚(yú)跟隨的并不是我們的鼠標(biāo)，所以它的移動(dòng)也不是跟隨鼠標(biāo)的，它應(yīng)該是跟隨魚(yú)媽媽的，它一直跟著媽媽走，所以它的位置和旋轉(zhuǎn)都跟著魚(yú)媽媽，ok，我們先做這些事情，至于它身體的變化，吃到被大魚(yú)擁抱一下的反應(yīng)，我們后面再來(lái)做，我們先把小魚(yú)的圖片資源加載進(jìn)來(lái)，定義三個(gè)圖片變量， var babyObj=function(){ this.x; this.y; this.babyEye=new Image(); this.babyBody=new Image(); this.babyTail=new Image(); } 那么這三個(gè)圖片類在初始化的時(shí)候，對(duì)圖片資源進(jìn)行加載， babyObj.prototype.init=function(){ this.x=canWidth*0.5-50; this.y=canHeight*0.5+50; this.babyEye.src="./src/babyEye0.png"; this.babyBody.src="./src/babyFade0.png"; this.babyTail.src="./src/babyTail0.png"; } 好，這樣就加載進(jìn)來(lái)了，我們來(lái)刷新看一下，ok，沒(méi)有問(wèn)題，查看全部
-
2-11，小魚(yú)繪制 1，創(chuàng)建小魚(yú)類 接著我們就要來(lái)繼續(xù)下一個(gè)任務(wù)，繪制小魚(yú)，畫(huà)小魚(yú)和畫(huà)大魚(yú)原理是一樣的，我們來(lái)看一下大魚(yú)跟小魚(yú)，大魚(yú)跟小魚(yú)的圖片資源也差不多，都是三張圖片，然后小魚(yú)也會(huì)有一些動(dòng)畫(huà)，除了尾巴的搖動(dòng)以外呢，身體會(huì)變色，如果它一直吃不到果實(shí)的話，就是魚(yú)媽媽一直不來(lái)救它的話，它就會(huì)慢慢的失去顏色，當(dāng)被大魚(yú)碰到之后呢，它就恢復(fù)了顏色，好，我們來(lái)看一下小魚(yú)的圖片資源，小魚(yú)有一個(gè)眼睛眨動(dòng)的動(dòng)作，除此以外，它的身體有一個(gè)顏色退去的過(guò)程，這是一個(gè)序列幀，另外，它的尾巴會(huì)有一個(gè)搖動(dòng)的動(dòng)畫(huà)，也是一個(gè)序列幀，畫(huà)大魚(yú)和畫(huà)小魚(yú)也能借此復(fù)習(xí)一下，現(xiàn)在我們先建立一個(gè)新的文件，然后保存，叫它baby.js然后把這個(gè)js文件包含在html里面，那我們首先先建一個(gè)關(guān)于小魚(yú)的類，然后定義小魚(yú)的一個(gè)變量來(lái)繼承這個(gè)類，babyObj，function，它有坐標(biāo)位置，另外呢需要初始化，把它初始化在屏幕的中央吧，然后跟大魚(yú)保持一定的距離，注意是在大魚(yú)的下方，讓小魚(yú)繪制在第一個(gè)canvas上，這樣一個(gè)基本的類就建立了， var babyObj=function(){ this.x; this.y; } babyObj.prototype.init=function(){ this.x=canWidth*0.5-50; this.y=canHeight*0.5+50; } babyObj.prototype.draw=function(){ //ctx1 } 我們來(lái)定義一下小魚(yú)，放在魚(yú)媽媽下面，它繼承baby類，并且初始化一下。我們來(lái)刷新一下，看有沒(méi)有問(wèn)題，沒(méi)有問(wèn)題，查看全部
-
問(wèn)： 果實(shí)成長(zhǎng)過(guò)程可不可以使用定值？ 假如不使用deltaTime，而直接用spd[i]的話，那就不存在果實(shí)越變?cè)酱蟮膯?wèn)題了。 還是說(shuō)不使用deltaTime的話會(huì)有其他的問(wèn)題 答： 個(gè)人見(jiàn)解：deltaTime控制了整個(gè)游戲中動(dòng)畫(huà)的演變節(jié)奏（除了大魚(yú)和小魚(yú)的游動(dòng)），可以統(tǒng)一管理游戲動(dòng)畫(huà)效果。而spd[i]目前只用于果實(shí)這一個(gè)對(duì)象，只是為了體現(xiàn)各個(gè)果實(shí)的不同性。所以我覺(jué)得果實(shí)的成長(zhǎng)不用deltaTime而換用一個(gè)定值的話其實(shí)也沒(méi)什么問(wèn)題的。查看全部
-
課后總結(jié)：記住chrome瀏覽器有個(gè)特性，切換tab的時(shí)候針實(shí)際已經(jīng)停止了，而但前時(shí)間沒(méi)有停止，所以會(huì)造成兩針之間的間隔越來(lái)越大。查看全部
-
2-10：優(yōu)化： 現(xiàn)在我們來(lái)解決這個(gè)問(wèn)題：當(dāng)我把標(biāo)簽切換一下的時(shí)候，這個(gè)標(biāo)簽下面的東西是不被執(zhí)行的，所有里面的代碼都是不被執(zhí)行的，所以我在切換過(guò)來(lái)的時(shí)候，所以這個(gè)果實(shí)就會(huì)變得特別大，這是為什么呢？這是因?yàn)槲覀冊(cè)诶L制果實(shí)的時(shí)候，它的尺寸是和deltaTime成正比的， if(this.l[i]<=14){ //果實(shí)生長(zhǎng)時(shí)果實(shí)長(zhǎng)度的變化情況 this.l[i] += this.spd[i]*deltaTime; } deltaTime越大，果實(shí)的尺寸越大，deltaTime是幀與幀之間的時(shí)間間隔，兩幀之間的間隔時(shí)間越長(zhǎng)呢，果實(shí)的尺寸的值就越大，所謂在我當(dāng)前標(biāo)簽切過(guò)來(lái)之后，它現(xiàn)在執(zhí)行的幀已經(jīng)停止了，當(dāng)我再切過(guò)來(lái)的時(shí)候，這兩幀之間的間隔就會(huì)變得特別大，所以果實(shí)變的特別大，看起來(lái)太詭異了。這個(gè)給它定義一下。如果deltaTime大于50ms的時(shí)候，deltaTime就等于50ms，我們把它約定一下， 50太大了，我們約定為40， if(deltaTime>40) deltaTime=40;加在gameloop里面。 這樣子的話呢，它就不會(huì)出現(xiàn)這個(gè)問(wèn)題了，我們現(xiàn)在做的是一個(gè)硬性的約定了，把它約定在這個(gè)值里，雖然不是科學(xué)的，但是它不會(huì)出現(xiàn)詭異的事情。 那再一個(gè)呢，就是Date.now()這個(gè)API我們來(lái)看一下它的含義，這有利于幫助我們理解幀與幀之間的距離，Date.now()的返回值是什么呢？ The Date.now() method returns the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC. 從1970年的這個(gè)時(shí)間一直到現(xiàn)在的時(shí)間消逝，所以它返回的是一個(gè)真實(shí)的絕對(duì)值，好，這是一個(gè)小插曲，查看全部
-
3，利用calLength2和dead方法完成大魚(yú)吃果實(shí)的效果。 //判斷大魚(yú)和果實(shí)的距離 function momFruitsCollision(){ for(var i=0;i<fruit.num;i++){ if(fruit.alive[i]){ //calculate length var l=calLength2(fruit.x[i],fruit.y[i], mom.x, mom.y); if(l<900){ //fruit eaten fruit.dead(i); } } } } 好，我們?cè)贆z查一下， 首先做所有fruit的循環(huán)，如果當(dāng)前這個(gè)fruit處于活著的狀態(tài)，那就計(jì)算它跟大魚(yú)之間的距離，我們得到的是距離的平方，如果這個(gè)距離很小，那么這個(gè)果實(shí)就被吃掉了，好，我們把這個(gè)函數(shù)momFruitsCollision放到總循環(huán)里面。我們?cè)賮?lái)打開(kāi)瀏覽器， 的確可以看到，果實(shí)被大魚(yú)碰到的，就消失了，沒(méi)有問(wèn)題，ok，這樣子大魚(yú)吃果實(shí)的碰撞檢測(cè)就寫(xiě)好了，我們看下一個(gè)任務(wù)。 4，課后總結(jié): 為什么是小于900px，就判定大魚(yú)吃到果實(shí)了呢？ 因?yàn)榇篝~(yú)的坐標(biāo)指的是，大魚(yú)身體的中心位置，果實(shí)的坐標(biāo)是果實(shí)的中心位置，如果大魚(yú)和果實(shí)相切(剛好挨著)，那么它們中心的距離就是0.5*21+0.5*50，然后再平方，就差不多是900了。查看全部
-
2，在果實(shí)類中添加dead方法 function momFruitsCollision(){ for(var i=0;i<fruit.num;i++){ if(fruit.alive[i]){ //calculate length var l=calLength2(fruit.x[i],fruit.y[i], mom.x, mom.y); } } } 如果這個(gè)距離l小于某一個(gè)值，因?yàn)閘是一個(gè)平方值，30的平方就是900，如果小于900的話，那么這個(gè)fruit就被吃掉， 這個(gè)果實(shí)被吃掉了，需要在果實(shí)類里面加一個(gè)方法，這個(gè)方法的功能就是讓當(dāng)前果實(shí)死亡，執(zhí)行一個(gè)死亡的狀態(tài)，什么叫死亡呢？ 就是果實(shí)從屏幕上消失了，怎么消失呢？也就是它的alive狀態(tài)被設(shè)置成false，這樣子它就消失了， fruitObj.prototype.dead=function(i){ this.alive[i]=false; } 好，就要使用這個(gè)dead方法，查看全部
-
1， 老師封裝好的函數(shù)calLength2來(lái)計(jì)算大魚(yú)和果實(shí)之間距離的平方和 我們?cè)倩氐絧pt來(lái)，畫(huà)大魚(yú)，身子，尾巴，眼睛已經(jīng)畫(huà)好了。我們?cè)倏匆粋€(gè)下面的，我們下一個(gè)任務(wù)是大魚(yú)吃果實(shí)的碰撞檢測(cè)： 這個(gè)原理就是檢測(cè)大魚(yú)和果實(shí)的距離，也就是我們?cè)诿恳粠臅r(shí)候去判斷一下，大魚(yú)和這個(gè)果實(shí)距離是不是足夠近，足夠近的話， 就判定它已經(jīng)吃到了，然后如果這個(gè)距離非常遠(yuǎn)，然后就判定這個(gè)果實(shí)沒(méi)有被吃掉，好，那么我們回到代碼中，我們來(lái)新建一個(gè)文件，Ctrl+N，Ctrl+s，collision.js這個(gè)文件里面只存放碰撞檢測(cè)的功能，首先把這個(gè)腳本包含到html里面。我們要做的是判斷大魚(yú)和屏幕上每一個(gè)果實(shí)的距離，如果小于某一個(gè)值，我們就認(rèn)為大魚(yú)把這個(gè)果實(shí)吃掉了，如果大于這個(gè)值，果實(shí)仍然繼續(xù)它的運(yùn)動(dòng) 好，現(xiàn)在來(lái)寫(xiě)這個(gè)功能，因?yàn)楣麑?shí)非常的多，我們需要做一個(gè)循環(huán)，來(lái)對(duì)比每一個(gè)果實(shí)，這所有的果實(shí)，首先判斷它是否在alive狀態(tài)，如果在alive狀態(tài)的話，再去判斷它跟大魚(yú)之間的距離，判斷距離使用它們的坐標(biāo)差，我們這樣得到一個(gè)斜邊的大小，而實(shí)際上我們?cè)谟?jì)算的時(shí)候不需要去開(kāi)平方，三角里面不需要去開(kāi)平方，因?yàn)殚_(kāi)平方或者不開(kāi)平方對(duì)于我們都沒(méi)有關(guān)系，在commonFunctions.js里面有一個(gè)封裝好的方法： function calLength2(x1, y1, x2, y2) { return Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2); } 距離值的平方，它是這兩對(duì)坐標(biāo)(x1,y1),(x2,y2)的差的平方和，pow是乘方的函數(shù)，次數(shù)是2(pow第二個(gè)參數(shù))，也就是(x1-x2)的平方加上(y1-y2)的平方，這樣呢，在一個(gè)三角里面我們得到的就是斜邊的平方，也就是大魚(yú)跟果實(shí)之間距離的平方。我們把這封裝好的函數(shù)拿過(guò)來(lái)用，大家可以經(jīng)常把這些很普通的函數(shù)封裝好，然后我們每次就不必去寫(xiě)，否則每次去寫(xiě)要寫(xiě)正確這些API如pow，還有乘方的次數(shù)，大家封裝好就可以很好的去用了查看全部
-
課后總結(jié)： ratio越大，大魚(yú)朝鼠標(biāo)移動(dòng)的速度越慢。 仔細(xì)想了下：“為何ratio的參數(shù)越小，大魚(yú)跟著鼠標(biāo)跑的越快（有點(diǎn)類似鼠標(biāo)靈敏度的感覺(jué)）”。在自封裝的lerpDistance()這個(gè)方法內(nèi)，ratio越大，每一幀（requestAnimationFrame()）內(nèi)大魚(yú)走的距離就越短，所以相同的距離下，ratio越大，需要的幀數(shù)就越多（一般都是100/60ms），時(shí)間就越長(zhǎng)。 視頻里面beta最后突然就冒出來(lái)一個(gè)Math.PI,老師也沒(méi)有講解，沒(méi)注意的話會(huì)出現(xiàn)尾部跟著鼠標(biāo)移動(dòng)的問(wèn)題。原因應(yīng)該是一開(kāi)始魚(yú)頭就在180度位置查看全部
-
5，利用lerpAngle，atan2，rotate等API使大魚(yú)隨鼠標(biāo)旋轉(zhuǎn)。 我們使用lerpAngle，為什么不用lerpDistance呢？因?yàn)樵趌erpAngle里面牽扯到一個(gè)數(shù)值上的調(diào)整，這個(gè)數(shù)值上的調(diào)整為什么 要這么寫(xiě)呢？大家花點(diǎn)時(shí)間來(lái)研究一下，在這里我們不講了，我們需要調(diào)整一下，為什么呢？這是 因?yàn)椋覀儺?dāng)前計(jì)算出來(lái)的值跟計(jì)算出來(lái)的值有關(guān)系，我點(diǎn)一個(gè)知識(shí)點(diǎn)吧，大家在做的時(shí)候，大家在回去研究封裝好的函數(shù)的 時(shí)候可能會(huì)用到，這是因?yàn)闉槭裁丛谶@里要調(diào)整，在這里寫(xiě)-2*PI和+2PI,為什么呢？因?yàn)檫@個(gè)API(atan2())的返回值是一個(gè) -PI到+PI之間的范圍。ok，大家要注意這一點(diǎn)，那么這個(gè)封裝好的函數(shù)(lerpAngle)直接拿過(guò)來(lái)用，同樣的a是目標(biāo)值， b是當(dāng)前值，那么 this.angle=lerpAngle(beta, this.angle, 0.9);我們?cè)讷@得了這個(gè)角度this.angle之后，如何讓魚(yú)媽媽旋轉(zhuǎn)起來(lái)呢? 這就用到了我們?cè)谇懊嬷v到的另外一個(gè)API：rotate旋轉(zhuǎn)，旋轉(zhuǎn)畫(huà)布，旋轉(zhuǎn)畫(huà)布呢，需要在save和restore之間，使得rotate 只作用于大魚(yú)，并且我們必須在translate后面做這個(gè)命令，為什么呢？我們需要先相對(duì)的移動(dòng)原點(diǎn)，然后再去旋轉(zhuǎn)，這樣才對(duì)。 大家這個(gè)邏輯要理清楚， ctx1.rotate(this.angle);那我們?nèi)サ綖g覽器中去看一下。可以看到，大魚(yú)已經(jīng)旋轉(zhuǎn)起來(lái)了，可是有點(diǎn)卡，這是因?yàn)?錄屏軟件的問(wèn)題，它應(yīng)該是運(yùn)行非常流暢的，調(diào)整一下數(shù)值，因?yàn)榇篝~(yú)的反應(yīng)有點(diǎn)緩慢，我們希望它旋轉(zhuǎn)快一點(diǎn)， 所以，調(diào)整如下，this.angle=lerpAngle(beta,this.angle,0.6);它現(xiàn)在反應(yīng)已經(jīng)非?？炝?，同時(shí)這個(gè)運(yùn)動(dòng)有點(diǎn)太快，我們 把它運(yùn)動(dòng)的反應(yīng)調(diào)慢一點(diǎn)， this.x=lerpDistance(mx, this.x, 0.99); this.y=lerpDistance(my, this.y, 0.99); 這樣大魚(yú)看起來(lái)有點(diǎn)慢，我們?cè)賮?lái)調(diào)整一下， this.x=lerpDistance(mx, this.x, 0.98); this.y=lerpDistance(my, this.y, 0.98); 好，可以的，這樣大魚(yú)就動(dòng)起來(lái)了，可以在深海里面自由的游來(lái)游去了，看起來(lái)挺有感覺(jué)的。查看全部
-
4，給魚(yú)媽媽類增加角度屬性并且引入老師封裝好的lerpAngle方法。 現(xiàn)在大魚(yú)雖然可以移動(dòng)，但是它并沒(méi)有根據(jù)鼠標(biāo)的位置去旋轉(zhuǎn)，如何來(lái)旋轉(zhuǎn)它的身體呢？ 我們來(lái)分析一下：首先大魚(yú)它自己有一個(gè)角度，它現(xiàn)在是朝向左的，它現(xiàn)在 身體的角度是多少呢？根據(jù)極坐標(biāo)的規(guī)定，極坐標(biāo)的正方向是向右，那么它現(xiàn)在朝向左，角度就是PI或者-PI. 不管它是往上轉(zhuǎn)還是往下轉(zhuǎn)，如果是往下轉(zhuǎn)(逆時(shí)針角度是正的)呢，角度是PI，往上轉(zhuǎn)(順時(shí)針角度是負(fù)的)呢，角度就是-PI。如果大家不清楚極坐標(biāo)的規(guī)定，大家可以去搜索一下坐標(biāo)的知識(shí)，大魚(yú)跟鼠標(biāo)他倆之間會(huì)產(chǎn)生一個(gè)坐標(biāo)差。它倆都有各自 的坐標(biāo)，那么坐標(biāo)會(huì)產(chǎn)生一個(gè)坐標(biāo)差，坐標(biāo)差值會(huì)形成一個(gè)三角形，這個(gè)三角形有個(gè)夾角，這個(gè)夾角就是鼠標(biāo)相對(duì)于大魚(yú) 的角度。所以我們得到了第二個(gè)角度，而剛才我們講的大魚(yú)它自身的角度要去追隨，我們剛才說(shuō)到的坐標(biāo)差的角度 我們回到代碼中來(lái)，首先給大魚(yú)增加一個(gè)屬性：this.angle角度。這個(gè)angle初始化為0.怎么來(lái)計(jì)算坐標(biāo)差？ 坐標(biāo)差需要在每一幀里面去計(jì)算，每一幀都去跟隨這個(gè)角度delta angle，所以每一幀都去計(jì)算角度差，這個(gè)角度差 怎么來(lái)計(jì)算。它是用我們剛才講到的Math.atan2(y,x)，用這個(gè)API來(lái)計(jì)算的，首先計(jì)算y值，y值的坐標(biāo)差： deltaY=my-this.y; x值的坐標(biāo)差： deltaX=mx-this.x; 我們要求的是angle值，我們用另外一個(gè)變量beta，beta這個(gè)角度就是鼠標(biāo)與大魚(yú)之間的角度差，我們用反正切返回這個(gè)值 beta=Math.atan2(deltaY,deltaX);這樣我們得到了這個(gè)角度，大魚(yú)的角度this.angle要不斷的趨向于這個(gè)beta。 所以不斷的趨向，我們用一個(gè)lerp，這個(gè)我們上面做的坐標(biāo)的lerp是一樣的，上一部分是讓大魚(yú)的坐標(biāo)一直趨向于鼠標(biāo)的 坐標(biāo)，而我們現(xiàn)在要做的就是讓大魚(yú)的角度一直趨向于鼠標(biāo)的角度，那么 this.angle=lerp 我們看一下這個(gè)封裝好的API： function lerpAngle(a, b, t) { var d = b - a; if (d > Math.PI) d = d - 2 * Math.PI; if (d < -Math.PI) d = d + 2 * Math.PI; return a + d * t; }查看全部
-
3，利用老師封裝的lerpDistance方法修改draw方法使得大魚(yú)跟鼠標(biāo)移動(dòng) 我們?nèi)绾巫岕~(yú)媽媽的坐標(biāo)位置跟隨著鼠標(biāo)呢？ 首先我們來(lái)看這樣一個(gè)封裝好的函數(shù)， function lerpDistance(aim, cur, ratio) { var delta = cur - aim; return aim + delta * ratio; } 它返回的是一個(gè)什么樣的值，它有三個(gè)傳入值，一個(gè)是aim，一個(gè)是cur，aim就是目標(biāo)值，cur就是當(dāng)前值，ratio是百分比， return aim + delta * ratio; 它返回的就是按照一定的比率趨向于目標(biāo)值的這樣一個(gè)值，所以這個(gè)值在幀運(yùn)行起來(lái)之后， 它就會(huì)一直不斷的追隨著這個(gè)目標(biāo)值，好，我們直接把這個(gè)封裝好的函數(shù)拿過(guò)來(lái)用，這個(gè)函數(shù)也是經(jīng)常用到的函數(shù)，所以我們 把它封裝好 現(xiàn)在需要做的事情是，讓this.x去趨向于哪一個(gè)呢？aim，這個(gè)aim值是mx。它要跟隨我們的鼠標(biāo)，cur值就是this.x 然后 ratio呢，我們來(lái)設(shè)置一個(gè)隨便0.9，ratio是一個(gè)0到1之間的值，好，這個(gè)this.x要等于lerpDistance(mx, this.x, 0.9) this,y也是一樣的道理： momObj.prototype.draw=function(){ this.x=lerpDistance(mx, this.x, 0.9); this.y=lerpDistance(my, this.y, 0.9); ctx1.save(); ctx1.translate(this.x,this.y); ctx1.drawImage(this.bigEye,-this.bigEye.width*0.5,-this.bigEye.height*0.5); ctx1.drawImage(this.bigBody,-this.bigBody.width*0.5,-this.bigBody.height*0.5); ctx1.drawImage(this.bigTail,-this.bigTail.width*0.5+30,-this.bigTail.height*0.5); ctx1.restore(); } 好，我們到瀏覽器中刷新一下，好，現(xiàn)在大魚(yú)就跟隨這鼠標(biāo)動(dòng)起來(lái)了，可以看到：大魚(yú)的中心位置一直是鼠標(biāo)的位置查看全部
舉報(bào)
0/150
提交
取消