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

蘑菇與熊游戲開(kāi)發(fā)第四回（熊碰撞邊界處理）

作者：admin
開(kāi)發(fā) 前端 游戲開(kāi)發(fā)
第四回主要講熊移動(dòng)碰到邊界時(shí)的反彈處理:一、寫(xiě)一個(gè)碰撞處理函數(shù)、二、在游戲循環(huán)GameLoop()尾部中加入檢測(cè)邊界函數(shù)，如下：

第四回主要講熊移動(dòng)碰到邊界時(shí)的反彈處理

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

一、寫(xiě)一個(gè)碰撞處理函數(shù)

  1. function HasAnimalHitEdge()      
  2. {      
  3.     //熊碰到右邊邊界      
  4.     if(animal.x>screenWidth - animal.image.width)      
  5.     {      
  6.         if(horizontalSpeed > 0)//假如向右移動(dòng)      
  7.             horizontalSpeed =-horizontalSpeed;//改變水平速度方向      
  8.     }      
  9.     //熊碰到左邊邊界      
  10.     if(animal.x<-10)      
  11.     {      
  12.         if(horizontalSpeed < 0)//假如向左移動(dòng)      
  13.             horizontalSpeed = -horizontalSpeed;//改變水平速度方向      
  14.     }      
  15.     //熊碰到下面邊界      
  16.     if(animal.y>screenHeight - animal.image.height)      
  17.     {      
  18.         //2秒鐘后從新開(kāi)始      
  19.         setTimeout(function(){      
  20.             horizontalSpeed = speed;      
  21.             verticalSpeed = -speed;      
  22.             animal.x = parseInt(screenWidth/2);      
  23.             animal.y = parseInt(screenHeight/2);      
  24.             gameLoop();      
  25.         }, 2000);      
  26.     }      
  27.     //熊碰到上邊邊界      
  28.     if(animal.y<0)      
  29.     {      
  30.         verticalSpeed = -verticalSpeed;      
  31.     }      
  32. }    

二、在游戲循環(huán)GameLoop()尾部中加入檢測(cè)邊界函數(shù)，如下

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

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

  1. <!DOCTYPE>        
  2. <html>        
  3. <head>        
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
  5. <title>蘑菇動(dòng)起來(lái)-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畫(huà)布         
  14.     var screenWidth;//畫(huà)布寬度         
  15.     var screenHeight;//畫(huà)布高度       
  16.     var speed = 2;//不變常量,從新開(kāi)始的速度        
  17.     var horizontalSpeed = speed;//水平速度,隨著熊的碰撞會(huì)發(fā)生改變      
  18.     var verticalSpeed = -speed; //垂直速度,開(kāi)始肯定是要向上飄，所以要負(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.           
  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.         //檢測(cè)是否碰到邊界      
  64.         HasAnimalHitEdge();      
  65.         }         
  66.     //加載圖片         
  67.     function LoadImages()         
  68.     {         
  69.         mushroomImg.src = "images/mushroom.png";//蘑菇         
  70.         backgroundForestImg.src = "images/forest1.jpg";//森林背景圖        
  71.         bearEyesClosedImg.src = "images/bear_eyesclosed.png";//閉著眼睛的      
  72.               
  73.         mushroom.image = mushroomImg;         
  74.         animal.image = bearEyesClosedImg;      
  75.     }       
  76.     function HasAnimalHitEdge()      
  77.     {      
  78.         //熊碰到右邊邊界      
  79.         if(animal.x>screenWidth - animal.image.width)      
  80.         {      
  81.             if(horizontalSpeed > 0)//假如向右移動(dòng)      
  82.                 horizontalSpeed =-horizontalSpeed;//改變水平速度方向      
  83.         }      
  84.         //熊碰到左邊邊界      
  85.         if(animal.x<-10)      
  86.         {      
  87.             if(horizontalSpeed < 0)//假如向左移動(dòng)      
  88.                 horizontalSpeed = -horizontalSpeed;//改變水平速度方向      
  89.         }      
  90.         //熊碰到下面邊界      
  91.         if(animal.y>screenHeight - animal.image.height)      
  92.         {      
  93.             //2秒鐘后從新開(kāi)始      
  94.             setTimeout(function(){      
  95.                 horizontalSpeed = speed;      
  96.                 verticalSpeed = -speed;      
  97.                 animal.x = parseInt(screenWidth/2);      
  98.                 animal.y = parseInt(screenHeight/2);      
  99.                 gameLoop();      
  100.             }, 2000);      
  101.         }      
  102.         //熊碰到上邊邊界      
  103.         if(animal.y<0)      
  104.         {      
  105.             verticalSpeed = -verticalSpeed;      
  106.         }      
  107.     }      
  108.     //事件處理         
  109.     function AddEventHandlers()         
  110.     {         
  111.         //鼠標(biāo)移動(dòng)則蘑菇跟著移動(dòng)         
  112.         $("#container").mousemove(function(e){         
  113.             mushroom.x = e.pageX - (mushroom.image.width/2);         
  114.         });          
  115.                  
  116.     }       
  117.     //初始化         
  118.     $(window).ready(function(){          
  119.         AddEventHandlers();//添加事件        
  120.         LoadImages();                 
  121.         ctx = document.getElementById('canvas').getContext('2d'); //獲取2d畫(huà)布            
  122.         screenWidth = parseInt($("#canvas").attr("width")); //畫(huà)布寬度       
  123.         screenHeight = parseInt($("#canvas").attr("height"));         
  124.         //初始化蘑菇      
  125.         mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐標(biāo)        
  126.         mushroom.y = screenHeight - 40;//蘑菇Y(jié)坐標(biāo)         
  127.         //初始化熊      
  128.         animal.x = parseInt(screenWidth/2);      
  129.         animal.y = parseInt(screenHeight/2);       
  130.         setInterval(GameLoop, 10);         
  131.     });         
  132.        
  133.         
  134. </script>        
  135. </head>        
  136.         
  137. <body>        
  138.     <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">        
  139.         <canvas id="canvas" width="480" height="320" >       
  140.         瀏覽器不支持html5,<a target="_blank" href="http://www.html5china.com/help/browser.html">請(qǐng)下載</a>支持html5的瀏覽器來(lái)觀看       
  141.         </canvas>        
  142.     </div>        
  143.        </body>        
  144. </html>       

第四回就講到這了，第五回講熊碰撞蘑菇的事件

【編輯推薦】

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

2012-05-21 13:18:12

HTML5

2012-05-21 13:32:45

HTML5

2012-05-21 10:53:30

HTML5

2012-05-21 14:08:21

HTML5

2012-05-21 10:40:13

HTML5

2012-05-21 13:25:49

HTML5

2012-05-21 10:45:30

HTML5

2021-03-13 13:59:49

Python編碼回測(cè)

2020-07-09 10:18:00

人工智能

2020-12-07 16:20:53

Python 開(kāi)發(fā)編程語(yǔ)言

2012-11-05 10:48:14

敏捷測(cè)試軟件測(cè)試

2020-03-31 19:22:04

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

2018-02-24 15:48:53

2017-04-11 10:27:10

2015-11-17 11:15:23

2011-05-31 13:18:14

51CTO 熊平 新

2013-10-31 11:03:02

2013年度IT博客大熊子川

2020-11-25 08:24:13

人臉識(shí)別

2012-09-07 10:20:53

點(diǎn)贊
收藏

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