蘑菇與熊游戲開發第七回（熊碰到獎品處理）
作者：admin
給獎品加上一個存是否被撞過的屬性hit，默認值為false。當獎品撞到的時候。改變hit的值為true。描繪獎品的時候判斷hit值是否有沒撞到，被撞到的話就不描繪。
第七回主要講熊撞到獎品之后，獎品消失
預期達到的效果：http://www.html5china.com/html5games/mogu/index6.html
簡單說下原理：
給獎品加上一個存是否被撞過的屬性hit，默認值為false。當獎品撞到的時候。改變hit的值為true。描繪獎品的時候判斷hit值是否有沒撞到，被撞到的話就不描繪
一、給獎品加hit屬性
- //定義獎品數組Prizes和對象Prize，繼承游戲對象GameObject
- var prizes = new Array();
- function Prize() {};
- Prize.prototype = new GameObject();//繼承游戲對象GameObject
- Prize.prototype.row = 0;//獎品行位置
- Prize.prototype.col = 0;//獎品列位置
- Prize.prototype.hit = false;//是否被撞過
二、熊撞到獎品事件
- //撞到獎品
- function HasAnimalHitPrize()
- {
- //取出所有獎品
- for(var x=0; x<prizes.length; x++)
- {
- var prize = prizes[x];
- //假如沒有碰撞過
- if(!prize.hit)
- {
- //判斷碰撞
- if(CheckIntersect(prize, animal, 0))
- {
- prize.hit = true;
- //熊反彈下沉
- verticalSpeed = speed;
- }
- }
- }
- }
三、在描繪獎品函數中加如判斷是否有被碰撞 if(!prize.hit) ，沒被撞過，則描繪出來
- //撞到獎品
- function HasAnimalHitPrize()
- {
- //取出所有獎品
- for(var x=0; x<prizes.length; x++)
- {
- var prize = prizes[x];
- //假如沒有碰撞過,則描繪在畫布上
- if(!prize.hit)
- {
- //判斷碰撞
- if(CheckIntersect(prize, animal, 0))
- {
- prize.hit = true;
- //熊反彈下沉
- verticalSpeed = speed;
- }
- }
- }
- }
#p#
到此第七回的完整代碼如下：
- <!DOCTYPE>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>繪制獎品-html5中文網</title>
- <!-- 要記得引用jquery-1.4.2.js -->
- <script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
- <script type="text/javascript" >
- //全局變量
- var backgroundForestImg = new Image();//森林背景圖
- var mushroomImg = new Image();//蘑菇
- var bearEyesClosedImg = new Image();//閉著眼睛的熊熊
- var ctx;//2d畫布
- var screenWidth;//畫布寬度
- var screenHeight;//畫布高度
- var speed = 2;//不變常量,從新開始的速度
- var horizontalSpeed = speed;//水平速度,隨著熊的碰撞會發生改變
- var verticalSpeed = -speed; //垂直速度,開始肯定是要向上飄，所以要負數，隨著熊的碰撞會發生改變
- var bearAngle = 2;//熊旋轉的速度
- var flowerImg = new Image();//獎品鮮花
- var leafImg = new Image();//獎品葉子
- var acornImg = new Image();//獎品橡子
- //公用 定義一個游戲物體戲對象
- function GameObject()
- {
- this.x = 0;
- this.y = 0;
- this.image = null;
- }
- //定義蘑菇Mushroom 繼承游戲對象GameObject
- function Mushroom() {};
- Mushroom.prototype = new GameObject();//游戲對象GameObject
- //蘑菇實例
- var mushroom = new Mushroom(); //循環描繪物體
- //定義動物熊 Animal 繼承 游戲對象GameObject
- function Animal() {};
- Animal.prototype = new GameObject();//游戲對象GameObject
- Animal.prototype.angle = 0;//動物的角度，目前中（即作為動物它在屏幕上旋轉退回）
- //定義熊實例
- var animal = new Animal();
- //定義獎品數組Prizes和對象Prize，繼承游戲對象GameObject
- var prizes = new Array();
- function Prize() {};
- Prize.prototype = new GameObject();//繼承游戲對象GameObject
- Prize.prototype.row = 0;//獎品行位置
- Prize.prototype.col = 0;//獎品列位置
- Prize.prototype.hit = false;//是否被撞過
- function GameLoop()
- {
- //清除屏幕
- ctx.clearRect(0, 0, screenWidth, screenHeight);
- ctx.save();
- //繪制背景
- ctx.drawImage(backgroundForestImg, 0, 0);
- //繪制蘑菇
- ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
- //繪制獎品
- DrawPrizes();
- //繪制熊
- //改變移動動物X和Y位置
- animal.x += horizontalSpeed;
- animal.y += verticalSpeed;
- //改變翻滾角度
- animal.angle += bearAngle;
- //以當前熊的中心位置為基準
- ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
- //根據當前熊的角度輪換
- ctx.rotate(animal.angle * Math.PI/180);
- //描繪熊
- ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));
- ctx.restore();
- //檢測是否碰到邊界
- HasAnimalHitEdge();
- //檢測熊碰撞蘑菇
- HasAnimalHitMushroom();
- //檢測熊碰撞獎品
- HasAnimalHitPrize();
- }
- //加載圖片
- function LoadImages()
- {
- mushroomImg.src = "images/mushroom.png";//蘑菇
- backgroundForestImg.src = "images/forest1.jpg";//森林背景圖
- bearEyesClosedImg.src = "images/bear_eyesclosed.png";//閉著眼睛的
- flowerImg.src = "images/flower.png";//獎品花
- acornImg.src = "images/acorn.png";//獎品橡子
- leafImg.src = "images/leaf.png";//獎品葉子
- mushroom.image = mushroomImg;
- animal.image = bearEyesClosedImg;
- }
- //熊碰撞邊界
- function HasAnimalHitEdge()
- {
- //熊碰到右邊邊界
- if(animal.x>screenWidth - animal.image.width)
- {
- if(horizontalSpeed > 0)//假如向右移動
- horizontalSpeed =-horizontalSpeed;//改變水平速度方向
- }
- //熊碰到左邊邊界
- if(animal.x<-10)
- {
- if(horizontalSpeed < 0)//假如向左移動
- horizontalSpeed = -horizontalSpeed;//改變水平速度方向
- }
- //熊碰到下面邊界
- if(animal.y>screenHeight - animal.image.height)
- {
- //2秒鐘后從新開始
- setTimeout(function(){
- horizontalSpeed = speed;
- verticalSpeed = -speed;
- animal.x = parseInt(screenWidth/2);
- animal.y = parseInt(screenHeight/2);
- GameLoop();
- }, 2000);
- }
- //熊碰到上邊邊界
- if(animal.y<0)
- {
- verticalSpeed = -verticalSpeed;
- }
- }
- //事件處理
- function AddEventHandlers()
- {
- //鼠標移動則蘑菇跟著移動
- $("#container").mousemove(function(e){
- mushroom.x = e.pageX - (mushroom.image.width/2);
- });
- }
- //檢測2個物體是否碰撞
- function CheckIntersect(object1, object2, overlap)
- {
- // x-軸 x-軸
- // A1------>B1 C1 A2------>B2 C2
- // +--------+ ^ +--------+ ^
- // | object1| | y-軸 | object2| | y-軸
- // | | | | | |
- // +--------+ D1 +--------+ D2
- //
- //overlap是重疊的區域值
- A1 = object1.x + overlap;
- B1 = object1.x + object1.image.width - overlap;
- C1 = object1.y + overlap;
- D1 = object1.y + object1.image.height - overlap;
- A2 = object2.x + overlap;
- B2 = object2.x + object2.image.width - overlap;
- C2 = object2.y + overlap;
- D2 = object2.y + object2.image.width - overlap;
- //假如他們在x-軸重疊
- if(A1 > A2 && A1 < B2
- || B1 > A2 && B1 < B2)
- {
- //判斷y-軸重疊
- if(C1 > C2 && C1 < D1
- || D1 > C2 && D1 < D2)
- {
- //碰撞
- return true;
- }
- }
- return false;
- }
- //動物碰撞蘑菇
- function HasAnimalHitMushroom()
- {
- //假如碰撞
- if(CheckIntersect(animal, mushroom, 5))
- {
- //假如碰撞的位置屬于蘑菇的左下位置
- if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))
- {
- horizontalSpeed = -speed;//反彈
- }
- //假如碰撞的位置屬于蘑菇的左上位置
- else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))
- {
- //反彈速度減半
- horizontalSpeed = -speed/2;
- }
- //假如碰撞的位置屬于蘑菇的右上位置
- else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))
- {
- horizontalSpeed = speed/2;
- }
- else
- {
- horizontalSpeed = speed;
- }
- verticalSpeed = -speed;//改變垂直速度。也即動物向上移動
- }
- }
- //創建獎品數組
- function InitPrizes()
- {
- var count=0;
- //一共3行
- for(var x=0; x<3; x++)
- {
- //一共23列
- for(var y=0; y<23; y++)
- {
- prize = new Prize();
- if(x==0)
- prize.image = flowerImg;//鮮花放在***行
- if(x==1)
- prize.image = acornImg;//豫子剛在第2行
- if(x==2)
- prize.image = leafImg;//葉子放在第3行
- prize.row = x;
- prize.col = y;
- prize.x = 20 * prize.col + 10;//x軸位置
- prize.y = 30 * prize.row + 20;//y軸位置
- //裝入獎品數組，用來描繪
- prizes[count] = prize;
- count++;
- }
- }
- }
- //繪制獎品，把獎品顯示在畫布上
- function DrawPrizes()
- {
- for(var x=0; x<prizes.length; x++)
- {
- currentPrize = prizes[x];
- //假如沒有被撞擊，則描繪
- if(!currentPrize.hit)
- {
- ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);
- }
- }
- }
- //撞到獎品
- function HasAnimalHitPrize()
- {
- //取出所有獎品
- for(var x=0; x<prizes.length; x++)
- {
- var prize = prizes[x];
- //假如沒有碰撞過,則描繪在畫布上
- if(!prize.hit)
- {
- //判斷碰撞
- if(CheckIntersect(prize, animal, 0))
- {
- prize.hit = true;
- //熊反彈下沉
- verticalSpeed = speed;
- }
- }
- }
- }
- //初始化
- $(window).ready(function(){
- AddEventHandlers();//添加事件
- LoadImages();
- ctx = document.getElementById('canvas').getContext('2d'); //獲取2d畫布
- screenWidth = parseInt($("#canvas").attr("width")); //畫布寬度
- screenHeight = parseInt($("#canvas").attr("height"));
- //初始化蘑菇
- mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐標
- mushroom.y = screenHeight - 40;//蘑菇Y坐標
- //初始化熊
- animal.x = parseInt(screenWidth/2);
- animal.y = parseInt(screenHeight/2);
- //初始化獎品
- InitPrizes();
- setInterval(GameLoop, 10);
- });
- </script>
- </head>
- <body>
- <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
- <canvas id="canvas" width="480" height="320" >
- 瀏覽器不支持html5,<a target="_blank" href="http://www.html5china.com/help/browser.html">請下載</a>支持html5的瀏覽器來觀看
- </canvas>
- </div>
- </body>
- </html>
第七回講完，整個游戲功能的大概框架已經出來了，成功就在眼前~
后面我們的任務就是去完善這個簡陋的游戲，比如說加開始按鈕、熊的生命數、顯示得分、獎品被碰到后旋轉再消失、蘑菇被碰到后顫抖幾下、音樂等等
講到這了，相信大家已經對整個游戲的功能、流程差不多了解了。后面的回合就不講那么詳細了，浪費大家的時間是吧~
第八回，開始完善游戲，加開始按鈕、生命數、現實得分
原味鏈接：http://www.html5china.com/course/20110101_1499.html
【編輯推薦】
- 蘑菇與熊游戲開發***回（游戲分析）
- 蘑菇與熊游戲開發第二回（讓蘑菇動起來）
- 蘑菇與熊游戲開發第三回（讓熊動起來）
- 蘑菇與熊游戲開發第四回（熊碰撞邊界處理）
- 蘑菇與熊游戲開發第五回（熊碰撞蘑菇處理）
- 蘑菇與熊游戲開發第六回（繪制獎品）
- 蘑菇與熊游戲開發第八回（完善游戲）
責任編輯：張偉
來源：
HTML5China
