-
html canvas查看全部
-
學(xué)習(xí)前提條件查看全部
-
繪制查看全部
-
?？?查看全部
-
思路查看全部
-
2016.6.27 一。新建一個(gè)tiny heart的文件夾，在這個(gè)文件夾里面再建兩個(gè)小文件夾src，查看全部
-
js 放JavaScript文件 scr 放圖片資源查看全部
-
課程介紹查看全部
-
課程介紹查看全部
-
3-2下期課程簡(jiǎn)介： 那第二階段的課程呢，我們其實(shí)剛才已經(jīng)前面講了，一個(gè)是小魚的動(dòng)畫，小魚動(dòng)畫跟生命值判斷，跟游戲分值的計(jì)算，哦，這些都是相關(guān)的，是牽扯到游戲結(jié)構(gòu)的一個(gè)東西，再就是大魚去喂小魚，除了這些之外呢，其他的都是一些渲染性的東西，然后大魚的動(dòng)畫啊，特效啊，?？臄[動(dòng)啊，浮游物啊，這些都是一些血肉的東西，好，那我們下一個(gè)階段的內(nèi)容看起來不少，但是我們會(huì)很快把這些內(nèi)容掌握，期待大家會(huì)繼續(xù)來學(xué)習(xí)第二階段的內(nèi)容，好，再見，我是Daisy。查看全部
-
大家來看一下它的lerp值，雖然我當(dāng)時(shí)講的不是非常的詳細(xì)，但是大家用高中的數(shù)學(xué)知識(shí)，還是沒有問題，不過就是一個(gè)數(shù)學(xué)計(jì)算的事情，但是還是要計(jì)算的精確準(zhǔn)確一點(diǎn)，好，這就是大魚所用到的API，除了這個(gè)角度的lerp之外，還有它的位移，我們也用了一個(gè)lerp，lerp的好處就是呢，可以使的它的運(yùn)動(dòng)會(huì)非常的平滑，它的速度回時(shí)快時(shí)慢，這樣看起來會(huì)活靈活現(xiàn)，如果它是每一個(gè)勻速運(yùn)動(dòng)呢，看起來就會(huì)非常呆板，我們的數(shù)值可能有一點(diǎn)快，現(xiàn)在用錄屏軟件呢，這個(gè)大魚游的速度算是正常，但是我發(fā)現(xiàn)我不開錄屏軟件的時(shí)候大魚的速度其實(shí)是蠻快的，可以去調(diào)整這個(gè)值讓它真好合適，不快不慢，游戲又有難度又不會(huì)無聊，大魚后面我們做了大魚吃果實(shí)的碰撞檢測(cè)，碰撞檢測(cè)其實(shí)是非常簡(jiǎn)單的一個(gè)碰撞檢測(cè)，當(dāng)然碰撞檢測(cè)的方法又各種各樣的，比如說如果是一個(gè)方塊的檢測(cè)，那我們應(yīng)該怎么做？它的外邊緣是不規(guī)則的，如何來檢測(cè)，那么技術(shù)上就會(huì)復(fù)雜的多，我們這里做的檢測(cè)呢，是非常簡(jiǎn)單的，我們僅僅計(jì)算大魚跟果實(shí)之間的距離，這個(gè)距離而且我們?cè)谟?jì)算的時(shí)候，是得到了一個(gè)距離的平方，為了減小計(jì)算量呢，我們只需要得到一個(gè)平方值就可以了，它是不是一個(gè)準(zhǔn)確的值都沒有關(guān)系，好，繪制小魚，繪制小魚的時(shí)候跟大魚是一樣的，也會(huì)用translate，rotate，還有反正切函數(shù)，那我們?cè)谶@個(gè)階段呢，做的事情呢，其實(shí)就是這些，好像我們感覺花了很多的精力，但是做出來的東西還好，同時(shí)內(nèi)容不是特別的多，希望大家能夠掌握這些內(nèi)容，并且在學(xué)的過程中呢，能夠發(fā)現(xiàn)一些樂趣，我們來介紹一下在第二階段的課程內(nèi)容查看全部
-
好，接著我們畫了大魚，大魚的身子，尾巴，眼睛，因?yàn)檫@三部分我們是通過三張圖片把它拼起來的，所以我們用到了這些API： translate(); rotate(); Math.atan2(y,x); 如果前兩個(gè)API如果不用也可以，比如我們用到了這兩個(gè)API繪畫的時(shí)候就會(huì)更方便，主要是介紹它的坐標(biāo)的時(shí)候會(huì)更清晰，哦，我們來看一下， ctx1.save(); ctx1.translate(this.x,this.y); ctx1.rotate(this.angle); ctx1.drawImage(this.bigTail,-this.bigTail.width*0.5+30,-this.bigTail.height*0.5); ctx1.drawImage(this.bigBody,-this.bigBody.width*0.5,-this.bigBody.height*0.5); ctx1.drawImage(this.bigEye,-this.bigEye.width*0.5,-this.bigEye.height*0.5); ctx1.restore(); 同樣的在這里，save與restore之間，這些內(nèi)容才起作用，首先我們通過一個(gè)translate把原點(diǎn)移到this.x和this.y的位置，這個(gè)時(shí)候，我們?cè)谟?jì)算它的坐標(biāo)的時(shí)候，比方說drawImage里面的第二和第三個(gè)參數(shù)就非常簡(jiǎn)單非常容易，我們只需要計(jì)算一個(gè)位移就可以了，然后我們還做了一個(gè)rotate，旋轉(zhuǎn)畫布，把當(dāng)前的畫布，以translate中參數(shù)為原點(diǎn)，進(jìn)行旋轉(zhuǎn)，這主要是有利于我們計(jì)算角度值，這個(gè)角度我們又用到了另外一個(gè)非常重要的數(shù)學(xué)函數(shù)，反正切，我們要注意反正切的返回值是-PI到PI之間，所以我們?cè)趌erp的時(shí)候呢，也進(jìn)行了一個(gè)調(diào)整，大家一定要注意查看全部
-
好，第二個(gè)步驟是繪制海葵，繪制海葵用到了一些API，我們來看一下這些API，回顧一下我們所寫的。尤其是大家要掌握這些API如何來作用于場(chǎng)景， 首先這對(duì)API，save和restore我們已經(jīng)用到了好幾次，那就是在這兩個(gè)API之間的方法或者定義，只作用于它們之間，一旦出了區(qū)間范圍，這里面的東西就不再起作用了，比如我的lineCap是round等我出去之后，到這底下來，那這個(gè)屬性就已經(jīng)消失了，如果在頂上定義lineCap是另外一種類型，那么我restore之后，在這個(gè)位置的lineCap的屬性就是save之前的屬性，那么像這類屬性： ctx2.globalAlpha=0.6; ctx2.lineWidth=20; ctx2.lineCap="round"; ctx2.strokeStyle="#3b154e"; 它只需要定義一次就可以了，因?yàn)檫@些都是屬于屬性類的，而不是命令類，也就是說跟這樣的： ctx2.beginPath(); ctx2.moveTo(this.x[i],canHeight); ctx2.lineTo(this.x[i],canHeight-this.len[i]); ctx2.stroke(); 其中的 ctx2.moveTo(this.x[i],canHeight);我要告訴場(chǎng)景到某個(gè)位置， ctx2.lineTo(this.x[i],canHeight-this.len[i]);畫線段到某個(gè)位置， 這一類跟上一類是不一樣的，屬性哪一類寫在for循環(huán)外面，定義一次就可以了，但是像這些命令呢，必須寫在for循環(huán)里面，每一次循環(huán)都要執(zhí)行的，哦，這個(gè)是大家要注意的。 畫完了?？?，我們畫了果實(shí)，果實(shí)這里面有一個(gè)比較重要的概念，那就是池，我們?cè)O(shè)置了30個(gè)果實(shí)的池子來一直循環(huán)不斷的應(yīng)用這些果實(shí)，一旦這個(gè)果實(shí)離開了屏幕，完成了任務(wù)，那把它的狀態(tài)更改為停滯的狀態(tài)，然后在這里等待，然后新生的果實(shí)有這樣的需要的時(shí)候，我們就去池子里面找哪一個(gè)果實(shí)，可以去執(zhí)行這個(gè)任務(wù)，我們就把這個(gè)任務(wù)賦給它，這個(gè)概念是比較重要的查看全部
-
3-1，課程總結(jié) 到這里呢，我們第一階段的課程就學(xué)完了，之前呢，我們?cè)谟螒蛘n程之初的時(shí)候，做了一個(gè)階段1和階段2的任務(wù)分配，現(xiàn)在我們做一些調(diào)整，之前本來是要把大魚喂小魚這個(gè)任務(wù)放到階段1的，我們現(xiàn)在把它放到階段2去，現(xiàn)在看起來階段2的任務(wù)很多，其實(shí)后面會(huì)很快把這些任務(wù)完成掉，階段1我們總共學(xué)了這么多課程，我們來回顧一下，第一個(gè)呢畫了海葵，海葵產(chǎn)生果實(shí)，果實(shí)有一個(gè)生長(zhǎng)然后向上漂浮的過程，最后是大魚吃果實(shí)，另外我們還畫了小魚對(duì)不對(duì)，我們來具體的看一下，一個(gè)步驟一個(gè)步驟的看一下，我們都做了哪一些步驟： 第一個(gè)我們搭建了html網(wǎng)頁(yè)結(jié)構(gòu)，繪制背景，到代碼中看一下：搭建網(wǎng)頁(yè)結(jié)構(gòu)的時(shí)候呢，css部分大家可以簡(jiǎn)單回顧一下，css和html標(biāo)簽類的這些內(nèi)容呢不是我們本身的重點(diǎn)，大家記得在寫的時(shí)候，要把js腳本包含到html里面來，另外，我們要在canvas上使用場(chǎng)景來繪制要畫的東西，那我們很重要的一個(gè)就是要從html里面去獲取canvas，也就是使用getElementById這個(gè)方法來獲取canvas 又用getContext獲取canvas的場(chǎng)景，同時(shí)，大家在這里一定不要忘了getContext('2d')的參數(shù)2d，我們之前在寫的時(shí)候呢，被這個(gè)bug困擾了很久，因?yàn)橥浟税堰@個(gè)參數(shù)寫進(jìn)去，好，這里還有一個(gè)小小的知識(shí)點(diǎn)呢，就是我們分了兩個(gè)canvas來繪制內(nèi)容，因?yàn)槲覀兊膬?nèi)容其實(shí)還蠻多的，尤其是海葵，它的數(shù)量非常多，同時(shí)我們還要畫那么大的一個(gè)背景，如果我們的海葵，像現(xiàn)在，是靜止的，?？庆o止不動(dòng)的，背景也是靜止不動(dòng)的，這種情況下，canvas2只要畫一次就可以了，它不需要在循環(huán)幀里面，它不需要gameloop來不斷刷新，但是我們到第二階段的時(shí)候，實(shí)際上是要畫一個(gè)動(dòng)態(tài)的?？@個(gè)時(shí)候我們就需要刷新了查看全部
-
6，使用lerpAngle使小魚跟著大魚旋轉(zhuǎn) 接著，我們讓小魚隨著大魚旋轉(zhuǎn)，讓它一直看著魚媽媽，好，我們?cè)賮砜匆幌卖~媽媽的角度的lerp過程，我們是計(jì)算了魚媽媽跟鼠標(biāo)之間的角度，計(jì)算這個(gè)角度是用它們之間的坐標(biāo)差計(jì)算的，然后魚媽媽的角度要趨向于這個(gè)角度，然后我們旋轉(zhuǎn)一下畫布，ok，讓我們寫小魚的lerp angle， 我們直接把它復(fù)制過來，這是我常用的方法，相似的東西寫兩遍是很容易出錯(cuò)的事情，我們需要把相應(yīng)的東西改一下，小魚是跟著魚媽媽走的，好，后面不需要改了，然后小魚的角度要一直趨向于這個(gè)角度，然后呢，小魚再去旋轉(zhuǎn)畫布： 不要忘記給小魚定義angle屬性，并且初始化為0； 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); //lerp angle var deltaY=mom.y-this.y; var deltaX=mom.x-this.x; var beta=Math.atan2(deltaY,deltaX)+Math.PI; this.angle=lerpAngle(beta,this.angle,0.6); //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.rotate(this.angle); 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(); } 好，現(xiàn)在應(yīng)該是沒有問題了，好，刷新一下，現(xiàn)在小魚已經(jīng)跟著魚媽媽跑了，哦，不錯(cuò)，挺好的。查看全部
舉報(bào)
0/150
提交
取消