-
2-1：大魚喂小魚： 大魚喂小魚的邏輯和之前的大魚吃果實的邏輯是一樣的， 在collision.js文件中： 添加如下代碼： //mom baby collision function momBabyCollision(){ var l=calLength2(mom.x,mom.y,baby.x,baby.y); if(l<900){ baby.babyBodyCount=0; } } 并且將momBabyCollision()放在主循環gameloop中，放在momFruitsCollision();之后。然后把baby.draw();放在mom.draw();之后 刷新是F5，到瀏覽器看效果：大魚沒吃到果實，沒有能量給小魚，小魚身體應該不會變紅，因為大魚的動畫還沒有加上去，包括分值的計算也沒有加上去，我們先把這個功能放著，下一個任務是做大魚的動畫。查看全部
-
1-4 身體變白 身體變白是大魚不能及時把能量傳遞給小魚，小魚表現出的動畫，身體變白通過序列幀完成，原理同尾巴，但是身體變白是個有去無回的過程，當小魚身體完全變白，表示gameover 在main.js中： //小魚身體圖片數組 var babyBody=[]; for(var i=0;i<20;i++){ babyBody[i]=new Image(); babyBody[i].src="./src/babyFade"+i+".png"; } 在baby.js中： baby類定義中： this.babyBodyTimer=0; this.babyBodyCount=0; draw方法中： //baby body this.babyBodyTimer += deltaTime; if(this.babyBodyTimer>300){ this.babyBodyCount = this.babyBodyCount+1; this.babyBodyTimer %=300; if(this.babyBodyCount > 19){ this.babyBodyCount=19; //game over } } var babyBodyCount=this.babyBodyCount; ctx1.drawImage(babyBody[babyBodyCount],-babyBody[babyBodyCount].width*0.5, -babyBody[babyBodyCount].height*0.5); 同時刪除之前定義的this.babyBody=new Image(); game over 的顯示到后面再做。 大魚喂小魚的核心機制是：首先大魚必須吃到果實，在小魚完全變白之前，大魚喂小魚，使得小魚身體重新變紅，接下來做大魚喂小魚的邏輯判斷查看全部
-
1-3 眨眼睛 小魚眼睛眨動的這個動作，跟小魚尾巴的這個動作有些不同，小魚的尾巴是勻速播放序列幀，小魚眼睛是每隔2-3秒眨一下，把眨眼睛間隔設置成隨機的，不死板，更靈活，小魚瞇眼睛時間長度是固定的， 1，在main.js中定義小魚眼睛圖片數組： //小魚眼睛圖片數組 var babyEye=[]; for(var i=0;i<2;i++){ babyEye[i]=new Image(); babyEye[i].src="./src/babyEye"+i+".png"; } 在baby類里面： 定義定時器，序列號變量，圖片間隔變量babyEyeInterval表示圖片持續多長時間，比如：圓睜眼睛圖片播放2秒，切換到瞇眼睛圖片，持續200ms，再切換到圓睜眼睛圖片，播放3秒...一直這樣子循環。 //baby eye this.babyEyeTimer += deltaTime; if(this.babyEyeTimer>this.babyEyeInterval){ this.babyEyeCount = (this.babyEyeCount+1)%2; this.babyEyeTimer %= this.babyEyeInterval; if(this.babyEyeCount == 0){ this.babyEyeInterval=Math.randon()*1500+2000;//[2000,3500) }else{ this.babyEyeInterval=200; } } var babyEyeCount=this.babyEyeCount; ctx1.drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount].width*0.5, -babyEye[babyEyeCount].height*0.5); 同時刪除掉之前定義的this.babyEye=new Image();查看全部
-
課后問答： 1問： baby.js和main.js里babyTail的區別 問一下為什么不能直接在baby.js里定義babyTail[]呢。在main里再調用不行嗎？還是也可以啊 答： 應該是也可以，放在main.js中是作為全局變量的，放在baby.js 中是作為baby的一個屬性來使用的baby.babyTail[babyTailCount] 2問： 小魚尾巴問題 this.babyTailCount=(this.babyTailCount+1)%8; this.babyTailTimer%=50; 這兩個為什么要這么寫 能再講清楚一點嗎 答： 因為魚尾巴的圖片就是用數組保存的，%操作是為了防止圖片越界，就想babyTailTimer如果=60，60%50=10，就相當于歸零操作，重新計時，babyTailCount是一樣的，總共七張圖，一直+1，babyTailCount如果=6 6%8=6，沒有影響，但是8%8=0，就重新開始第一張圖查看全部
-
3，實現小魚尾巴擺動效果 我們再看這里： ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5+23,-this.babyTail.height*0.5); 在繪制小魚尾巴圖片的時候，我們就不是再繪制這一張圖片了，而是繪制我們之前定義的babyTail這個圖片數組，好，我們把它賦值過來，我們要告訴它執行到第幾幀了，第幾幀實際上是我們之前定義的這個變量 babyTailCount 我們在這里定義一個臨時變量，var babyTailCount=this.babyTailCount; 我們希望它來繪制這一幀，同時我們把后面的圖片也替換一下， var babyTailCount=this.babyTailCount; ctx1.drawImage(babyTail[babyTailCount], -babyTail[babyTailCount].width*0.5+23, -babyTail[babyTailCount].height*0.5); 好，這樣的話呢，小魚的尾巴就應該可以擺動起來了。我們把之前定義的這個變量刪除掉： this.babyTail.src="./src/babyTail0.png"; 好，我們回到瀏覽器中來看一下我們做的對不對，大家可以看到小魚的尾巴已經一搖一擺的動起來了，好，非常成功，接下來我們第二個工作，就是繪制小魚眨眼睛的動作，我們來看一下圖片資源，小魚的眼睛有兩個狀態，一個是圓睜著，第二個就是瞇起來，來表示這樣一個眨眼睛的動作查看全部
-
2，定義計時器變量和小魚尾巴圖片序號變量，并且設定計時器和序號變量的規則。 接著我們就要來設計計時器，也就是說要有一個時鐘，來控制每個一段時間，來提醒我們要執行下一個動畫圖片了，首先我們要定義兩個變量，一個變量是計時器，this.babyTailTimer=0;另外一個就是記錄當前圖片序號的變量，也就是現在執行到哪一幀了，我們讓它從第0幀開始執行，this.babyTailCount=0;然后我們在draw循環中，因為這個draw循環是在gameloop里面，每一幀都會執行的，我們希望每一幀計時器都會工作，在這里寫babyTail的計數工作，計時器需要累加時間，之前我們定義了一個變量，就是deltaTime，deltaTime記錄的就是相鄰的兩幀之間的時間間隔，如果這個計時器超過了50ms，這個時候就要提醒我們需要執行下一幀了，babyTailCount需要加1，那么我們來讓它自身來加1，但是我們又不希望它超過7，我們希望它是0到7之間的循環，這個時候我們讓它對8取模，這樣子這個變量就會一直0到7,0到7這樣子來循環了，當然它每加一幀的時候，我們需要把這個計時器復原，babyTailTimer對50取模，這樣就完成了babyTail計數的工作： //baby tail count this.babyTailTimer += deltaTime; if(this.babyTailTimer>50){ this.babyTailCount = (this.babyTailCount+1)%8; this.babyTailTimer %= 50; }查看全部
-
1-2 魚尾巴擺動： 1，定義小魚尾巴的圖片數組， 請大家想這樣一個問題：我們如何表現小魚尾巴搖動這個動畫呢？這個動畫是通過序列幀來表示的，有0到7這個序列幀，那我們怎么把它表現在游戲里面，哦，這個非常簡單，這個原理就是每隔固定的時間，讓它執行下一個圖片，哦，繪制下一個圖片，然后，這個連續起來呢就成了一個動畫，所以首先我們需要一個數組，圖片的數組，把這8張圖片放在數組中，同時設計一個計時器，讓這個計時器能夠每隔一段時間來提醒要繪制下一張圖片了，這樣子，一直來循環，就成為一個動畫序列，好，我們回到編輯器中，首先我們先定義一個小魚尾巴的圖片數組，var babyTail=[];這個數組呢，我們初始化為圖片，在init函數中，總共有八張圖片， 那我們對每一張都來初始化一下： for(var i=0;i<8;i++){ babyTail[i]=new Image(); babyTail[i].src="./src/babyTail"+i+".png"; } 這樣我們就把小魚尾巴的序列幀放在babyTail這個數組里面了。查看全部
-
另外呢，大魚喂小魚，大魚吃到多少果實，可以喂給小魚，給它補充多少能量，這個就是游戲分數的計算，這是第二部分，那么第三部分呢，就是讓游戲內容顯得更豐富的工作，比如說大魚在喂小魚的時候，會有一個特效，來表示這個動作，小魚得到果實的時候，得到能量是一種很快樂的表現，另外呢，深海里面會有一些漂浮物，它會來渲染深海的這種感覺，這就是第三部分，好，我們一個接一個的來把這些工作完成，那么第一個我們來做小魚的動畫，小魚動畫包括三個部分，一個是它尾巴要擺動，眼睛要時不時的眨一下眼睛，另外呢它如果得不到能量的話，身體會慢慢變白，從而game over 好，我們一個接一個的做，首先是把尾巴的動畫加上去，我們來看一下我們的圖片資源，小魚尾巴是從babyTail0到babyTail7，一共是八張圖片，這個就是一個序列幀，我們要做的就是，把這個序列幀在游戲里面進行輪播，這樣就會成為一個動畫了，好，我們就來做這個工作查看全部
-
愛心魚 下： 1-1： 歡迎大家回到fish game一個關于小魚的游戲，我是Daisy，那我們在第一階段已經做了一些工作，現在我們再來回顧一下，在第一階段做的內容，其中我們繪制了游戲的背景，是藍色的海洋，海洋里面有一些?？?，游戲的主角是大魚跟小魚，魚媽媽帶著一個魚寶寶，魚寶寶可以跟隨著魚媽媽來游動，同時呢?？梢援a生一些果實，這些果實是大魚的能量，大魚就去捕捉這些果實，同時把它的能量喂給小魚，在這個游戲中呢，這些呢是第一階段做的內容，現在呢，我們到第二階段，第二階段我們會做哪一些內容呢？嗯，我們來看一下，第二階段的大綱：第二階段我們會在前面的基礎上把剩余的功能補充上，可以劃分為3類吧。一類工作是動畫，比方說小魚的動畫，現在小魚跟大魚都沒有任何的動畫，小魚的眼睛也不動，尾巴也不動，那我們在第二個階段會讓它的眼睛眨動起來，尾巴搖起來，包括魚媽媽也是，另外作為游戲死亡的判斷，game over 的判斷，小魚會有一定的反應，如果魚媽媽不能夠及時的給小魚補充能量的話，那么小魚的身體就會由現在的橙黃色慢慢的變成白色，來表示game over ，同時大魚在吃到果實的時候，也會有動畫的表示，比方說它吃到一個果實，它會有什么樣的變化，它吃到很多果實之后，玩家如何知道這個效果，知道這個事情，這個是通過大魚的動畫來表現的，另外呢，里面的海葵，現在是不動的，我們會讓它搖動起來，像在深海里面那樣緩慢的左右搖擺一樣，這一部分就是動畫的內容，另外呢，還有一部分是數值判斷，比方說小魚的生命值判斷，這個關系到game over 的判斷查看全部
-
特效集查看全部
-
游戲分值計算查看全部
-
碰撞檢測查看全部
-
動畫效果查看全部
-
漂浮物查看全部
-
二次貝塞爾3查看全部
舉報
0/150
提交
取消