自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

蘑菇與熊游戲開發(fā)第五回（熊碰撞蘑菇處理）

作者：admin
開發(fā) 前端 游戲開發(fā)
一、由于碰撞的地方比較多，所以定義一個(gè)通用的判斷2個(gè)物體是否碰撞的函數(shù)。二、熊碰撞蘑菇發(fā)生的事件以及處理。三、在游戲循環(huán)GameLoop()尾部中加入熊碰撞蘑菇函數(shù)。

第五回主要講熊碰到蘑菇之后向上反彈的效果

預(yù)期達(dá)到的效果：http://www.html5china.com/html5games/mogu/index4.html

一、由于碰撞的地方比較多，所以定義一個(gè)通用的判斷2個(gè)物體是否碰撞的函數(shù)

  1. //方法用途：檢測2個(gè)物體是否碰撞      
  2. //參數(shù)object1：物體1      
  3. //參數(shù)object1：物體2      
  4. //參數(shù)overlap：可重疊的區(qū)域值      
  5. //返回布爾值：碰撞返回true，不碰撞返回false      
  6. function CheckIntersect(object1, object2, overlap)      
  7. {      
  8.     //    x-軸                      x-軸      
  9.     //  A1------>B1 C1              A2------>B2 C2      
  10.     //  +--------+   ^              +--------+   ^      
  11.     //  | object1|   | y-軸         | object2|   | y-軸      
  12.     //  |        |   |              |        |   |      
  13.     //  +--------+  D1              +--------+  D2      
  14.     //  看圖可知兩物體各4個(gè)點(diǎn)的位置      
  15.     A1 = object1.x + overlap;      
  16.     B1 = object1.x + object1.image.width - overlap;      
  17.     C1 = object1.y + overlap;      
  18.     D1 = object1.y + object1.image.height - overlap;      
  19.        
  20.     A2 = object2.x + overlap;      
  21.     B2 = object2.x + object2.image.width - overlap;      
  22.     C2 = object2.y + overlap;      
  23.     D2 = object2.y + object2.image.width - overlap;      
  24.        
  25.     //假如他們在x-軸重疊      
  26.     if(A1 > A2 && A1 < B2      
  27.        || B1 > A2 && B1 < B2)      
  28.     {      
  29.         //判斷y-軸重疊      
  30.         if(C1 > C2 && C1 < D1      
  31.        || D1 > C2 && D1 < D2)      
  32.         {      
  33.             //碰撞      
  34.             return true;      
  35.         }      
  36.     }      
  37.     return false;      
  38. }    

二、熊碰撞蘑菇發(fā)生的事件以及處理

  1. //動(dòng)物碰撞蘑菇      
  2. function HasAnimalHitMushroom()      
  3. {      
  4.     //假如碰撞      
  5.     if(CheckIntersect(animal, mushroom, 5))      
  6.     {      
  7.         //假如碰撞的位置屬于蘑菇的左下位置      
  8.         if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))      
  9.         {      
  10.             horizontalSpeed = -speed;//反彈      
  11.         }      
  12.         //假如碰撞的位置屬于蘑菇的左上位置      
  13.         else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))      
  14.         {      
  15.             //反彈速度減半      
  16.             horizontalSpeed = -speed/2;      
  17.         }      
  18.         //假如碰撞的位置屬于蘑菇的右上位置      
  19.         else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))      
  20.         {      
  21.             horizontalSpeed = speed/2;      
  22.         }      
  23.         else     
  24.         {      
  25.             horizontalSpeed = speed;      
  26.         }      
  27.         verticalSpeed = -speed;//改變垂直速度。也即動(dòng)物向上移動(dòng)      
  28.        
  29.     }      
  30. }    

三、在游戲循環(huán)GameLoop()尾部中加入熊碰撞蘑菇函數(shù)，如下

  1. //游戲功能循環(huán)      
  2.    function GameLoop()         
  3.    {         
  4.        //清除屏幕         
  5.        ctx.clearRect(0, 0, screenWidth, screenHeight);         
  6.        ctx.save();         
  7.        //繪制背景         
  8.        ctx.drawImage(backgroundForestImg, 0, 0);         
  9.        //繪制蘑菇         
  10.        ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
  11.     //繪制熊      
  12.     //改變移動(dòng)動(dòng)物X和Y位置      
  13.     animal.x += horizontalSpeed;      
  14.     animal.y += verticalSpeed;      
  15.     //改變翻滾角度      
  16.     animal.angle += bearAngle;      
  17.     //以當(dāng)前熊的中心位置為基準(zhǔn)      
  18.         ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  19.     //根據(jù)當(dāng)前熊的角度輪換      
  20.     ctx.rotate(animal.angle * Math.PI/180);      
  21.     //描繪熊      
  22.     ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));      
  23.        ctx.restore();      
  24.     //檢測是否碰到邊界      
  25.     HasAnimalHitEdge();      
  26.     //檢測熊碰撞蘑菇      
  27.     HasAnimalHitMushroom();      
  28.        }       

到此第五回的完整代碼如下：

  1. <!DOCTYPE>        
  2. <html>        
  3. <head>        
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
  5. <title>蘑菇動(dòng)起來-html5中文網(wǎng)</title>        
  6. <!-- 要記得引用jquery-1.4.2.js -->     
  7. <script type="text/javascript" src="./js/jquery-1.4.2.js"></script>        
  8. <script type="text/javascript" >        
  9.     //全局變量         
  10.     var backgroundForestImg = new Image();//森林背景圖         
  11.     var mushroomImg = new Image();//蘑菇       
  12.     var bearEyesClosedImg = new Image();//閉著眼睛的熊熊       
  13.     var ctx;//2d畫布         
  14.     var screenWidth;//畫布寬度         
  15.     var screenHeight;//畫布高度       
  16.     var speed = 2;//不變常量,從新開始的速度        
  17.     var horizontalSpeed = speed;//水平速度,隨著熊的碰撞會(huì)發(fā)生改變      
  18.     var verticalSpeed = -speed; //垂直速度,開始肯定是要向上飄，所以要負(fù)數(shù)，隨著熊的碰撞會(huì)發(fā)生改變      
  19.     var bearAngle = 2;//熊旋轉(zhuǎn)的速度      
  20.     //公用 定義一個(gè)游戲物體戲?qū)ο?nbsp;        
  21.     function GameObject()         
  22.     {         
  23.         this.x = 0;         
  24.         this.y = 0;         
  25.         this.image = null;         
  26.     }         
  27.              
  28.     //定義蘑菇Mushroom 繼承游戲?qū)ο驡ameObject         
  29.     function Mushroom() {};         
  30.     Mushroom.prototype = new GameObject();//游戲?qū)ο驡ameObject         
  31.     //蘑菇實(shí)例         
  32.     var mushroom = new Mushroom();        //循環(huán)描繪物體        
  33.            
  34.     //定義動(dòng)物熊 Animal 繼承 游戲?qū)ο驡ameObject      
  35.     function Animal() {};      
  36.     Animal.prototype = new GameObject();//游戲?qū)ο驡ameObject      
  37.     Animal.prototype.angle = 0;//動(dòng)物的角度，目前中（即作為動(dòng)物它在屏幕上旋轉(zhuǎn)退回）      
  38.     //定義熊實(shí)例       
  39.     var animal = new Animal();      
  40.     //游戲功能循環(huán)      
  41.     function GameLoop()         
  42.     {         
  43.         //清除屏幕         
  44.         ctx.clearRect(0, 0, screenWidth, screenHeight);         
  45.         ctx.save();         
  46.         //繪制背景         
  47.         ctx.drawImage(backgroundForestImg, 0, 0);         
  48.         //繪制蘑菇         
  49.         ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
  50.         //繪制熊      
  51.         //改變移動(dòng)動(dòng)物X和Y位置      
  52.         animal.x += horizontalSpeed;      
  53.         animal.y += verticalSpeed;      
  54.         //改變翻滾角度      
  55.         animal.angle += bearAngle;      
  56.         //以當(dāng)前熊的中心位置為基準(zhǔn)      
  57.         ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  58.         //根據(jù)當(dāng)前熊的角度輪換      
  59.         ctx.rotate(animal.angle * Math.PI/180);      
  60.         //描繪熊      
  61.         ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));      
  62.         ctx.restore();      
  63.         //檢測是否碰到邊界      
  64.         HasAnimalHitEdge();      
  65.         //檢測熊碰撞蘑菇      
  66.         HasAnimalHitMushroom();      
  67.         }         
  68.     //加載圖片         
  69.     function LoadImages()         
  70.     {         
  71.         mushroomImg.src = "images/mushroom.png";//蘑菇         
  72.         backgroundForestImg.src = "images/forest1.jpg";//森林背景圖        
  73.         bearEyesClosedImg.src = "images/bear_eyesclosed.png";//閉著眼睛的      
  74.               
  75.         mushroom.image = mushroomImg;         
  76.         animal.image = bearEyesClosedImg;      
  77.     }       
  78.     //熊碰撞邊界      
  79.     function HasAnimalHitEdge()      
  80.     {      
  81.         //熊碰到右邊邊界      
  82.         if(animal.x>screenWidth - animal.image.width)      
  83.         {      
  84.             if(horizontalSpeed > 0)//假如向右移動(dòng)      
  85.                 horizontalSpeed =-horizontalSpeed;//改變水平速度方向      
  86.         }      
  87.         //熊碰到左邊邊界      
  88.         if(animal.x<-10)      
  89.         {      
  90.             if(horizontalSpeed < 0)//假如向左移動(dòng)      
  91.                 horizontalSpeed = -horizontalSpeed;//改變水平速度方向      
  92.         }      
  93.         //熊碰到下面邊界      
  94.         if(animal.y>screenHeight - animal.image.height)      
  95.         {      
  96.             //2秒鐘后從新開始      
  97.             setTimeout(function(){      
  98.                 horizontalSpeed = speed;      
  99.                 verticalSpeed = -speed;      
  100.                 animal.x = parseInt(screenWidth/2);      
  101.                 animal.y = parseInt(screenHeight/2);      
  102.                 gameLoop();      
  103.             }, 2000);      
  104.         }      
  105.         //熊碰到上邊邊界      
  106.         if(animal.y<0)      
  107.         {      
  108.             verticalSpeed = -verticalSpeed;      
  109.         }      
  110.     }      
  111.     //事件處理         
  112.     function AddEventHandlers()         
  113.     {         
  114.         //鼠標(biāo)移動(dòng)則蘑菇跟著移動(dòng)         
  115.         $("#container").mousemove(function(e){         
  116.             mushroom.x = e.pageX - (mushroom.image.width/2);         
  117.         });          
  118.                  
  119.     }       
  120.     //方法用途：檢測2個(gè)物體是否碰撞      
  121.     //參數(shù)object1：物體1      
  122.     //參數(shù)object1：物體2      
  123.     //參數(shù)overlap：可重疊的區(qū)域值      
  124.     //返回布爾值：碰撞返回true，不碰撞返回false      
  125.     function CheckIntersect(object1, object2, overlap)      
  126.     {      
  127.         //    x-軸                      x-軸      
  128.         //  A1------>B1 C1              A2------>B2 C2      
  129.         //  +--------+   ^              +--------+   ^      
  130.         //  | object1|   | y-軸         | object2|   | y-軸      
  131.         //  |        |   |              |        |   |      
  132.         //  +--------+  D1              +--------+  D2      
  133.         //  看圖可知兩物體各4個(gè)點(diǎn)的位置      
  134.         A1 = object1.x + overlap;      
  135.         B1 = object1.x + object1.image.width - overlap;      
  136.         C1 = object1.y + overlap;      
  137.         D1 = object1.y + object1.image.height - overlap;      
  138.            
  139.         A2 = object2.x + overlap;      
  140.         B2 = object2.x + object2.image.width - overlap;      
  141.         C2 = object2.y + overlap;      
  142.         D2 = object2.y + object2.image.width - overlap;      
  143.            
  144.         //假如他們在x-軸重疊      
  145.         if(A1 > A2 && A1 < B2     
  146.            || B1 > A2 && B1 < B2)      
  147.         {      
  148.             //判斷y-軸重疊      
  149.             if(C1 > C2 && C1 < D1     
  150.            || D1 > C2 && D1 < D2)      
  151.             {      
  152.                 //碰撞      
  153.                 return true;      
  154.             }      
  155.         }      
  156.         return false;      
  157.     }      
  158.     //動(dòng)物碰撞蘑菇      
  159.     function HasAnimalHitMushroom()      
  160.     {      
  161.         //假如碰撞      
  162.         if(CheckIntersect(animal, mushroom, 5))      
  163.         {      
  164.             //假如碰撞的位置屬于蘑菇的左下位置      
  165.             if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))      
  166.             {      
  167.                 horizontalSpeed = -speed;//反彈      
  168.             }      
  169.             //假如碰撞的位置屬于蘑菇的左上位置      
  170.             else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))      
  171.             {      
  172.                 //反彈速度減半      
  173.                 horizontalSpeed = -speed/2;      
  174.             }      
  175.             //假如碰撞的位置屬于蘑菇的右上位置      
  176.             else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))      
  177.             {      
  178.                 horizontalSpeed = speed/2;      
  179.             }      
  180.             else      
  181.             {      
  182.                 horizontalSpeed = speed;      
  183.             }      
  184.             verticalSpeed = -speed;//改變垂直速度。也即動(dòng)物向上移動(dòng)      
  185.            
  186.         }      
  187.     }      
  188.     //初始化         
  189.     $(window).ready(function(){          
  190.         AddEventHandlers();//添加事件        
  191.         LoadImages();                 
  192.         ctx = document.getElementById('canvas').getContext('2d'); //獲取2d畫布            
  193.         screenWidth = parseInt($("#canvas").attr("width")); //畫布寬度       
  194.         screenHeight = parseInt($("#canvas").attr("height"));         
  195.         //初始化蘑菇      
  196.         mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐標(biāo)        
  197.         mushroom.y = screenHeight - 40;//蘑菇Y(jié)坐標(biāo)         
  198.         //初始化熊      
  199.         animal.x = parseInt(screenWidth/2);      
  200.         animal.y = parseInt(screenHeight/2);       
  201.         setInterval(GameLoop, 10);         
  202.     });         
  203.        
  204.         
  205. </script>        
  206. </head>        
  207.         
  208. <body>        
  209.     <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">        
  210.         <canvas id="canvas" width="480" height="320" >       
  211.         瀏覽器不支持html5,<a target="_blank" href="http://www.html5china.com/help/browser.html">請下載</a>支持html5的瀏覽器來觀看       
  212.         </canvas>        
  213.     </div>        
  214.        </body>        
  215. </html>       

第五回就講到這了，第六回講描繪獎(jiǎng)品

【編輯推薦】

  1. 蘑菇與熊游戲開發(fā)第一回（游戲分析）
  2. 蘑菇與熊游戲開發(fā)第二回（讓蘑菇動(dòng)起來）
  3. 蘑菇與熊游戲開發(fā)第三回（讓熊動(dòng)起來）
  4. 蘑菇與熊游戲開發(fā)第四回（熊碰撞邊界處理）
  5. 蘑菇與熊游戲開發(fā)第六回（繪制獎(jiǎng)品）
  6. 蘑菇與熊游戲開發(fā)第七回（熊碰到獎(jiǎng)品處理）
  7. 蘑菇與熊游戲開發(fā)第八回（完善游戲）
責(zé)任編輯：張偉 來源： HTML5China
HTML5
相關(guān)推薦

2012-05-21 13:11:51

HTML5

2012-05-21 13:32:45

HTML5

2012-05-21 14:08:21

HTML5

2012-05-21 10:53:30

HTML5

2012-05-21 10:45:30

HTML5

2012-05-21 10:40:13

HTML5

2012-05-21 13:25:49

HTML5

2010-10-09 16:51:47

2023-03-08 08:54:18

CPU內(nèi)存語言

2020-07-09 10:18:00

人工智能

2017-10-13 17:35:30

深度學(xué)習(xí)移動(dòng)端機(jī)器學(xué)習(xí)

2021-03-13 13:59:49

Python編碼回測

2020-12-07 16:20:53

Python 開發(fā)編程語言

2012-11-05 10:48:14

敏捷測試軟件測試

2020-03-31 19:22:04

微信實(shí)名制小游戲

2012-10-29 09:47:24

蘑菇街

2023-03-20 13:21:49

計(jì)算機(jī)

2017-04-28 11:50:02

電商搜索WOT

2018-02-24 15:48:53

2012-04-15 20:44:18

淘寶聯(lián)盟蘑菇街
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)