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

蘑菇與熊游戲開發(fā)第二回（讓蘑菇動起來）

作者：admin
開發(fā) 前端 游戲開發(fā)
定義蘑菇實(shí)例：由于在畫布上的物體全部都有3個共同的屬性：x、y坐標(biāo)，素材image。所以我們定義一個公用的游戲物體。為了方便拓展，定義一個公用的蘑菇。

上回分析了游戲，在這一回我們將讓蘑菇跟隨鼠標(biāo)動起來~

達(dá)到這個效果：http://www.html5china.com/html5games/mogu/index1.html

一、寫html代碼

  1. <body>         
  2.     <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">         
  3.         <canvas id="canvas" width="480" height="320" >         
  4.         </canvas>         
  5.     </div>         
  6. </body>    

用ID為container 的DIV來獲取鼠標(biāo)移動畫面的事件

canvas用來繪圖

二、定義全局變量

  1. //全局變量             
  2. var backgroundForestImg = new Image();//森林背景圖             
  3. var mushroomImg = new Image();//蘑菇圖             
  4. var ctx;//2d畫布             
  5. var screenWidth;//畫布寬度             
  6. var screenHeight;//畫布高度    

賦予全局變量值

  1. mushroomImg.src = "images/mushroom.png";//蘑菇             
  2. backgroundForestImg.src = "images/forest1.jpg";//森林背景圖             
  3. ctx = document.getElementById('canvas').getContext('2d');             
  4. screenWidth = parseInt($("#canvas").attr("width"));             
  5. screenHeight = parseInt($("#canvas").attr("height"));     

三、定義蘑菇實(shí)例

由于在畫布上的物體全部都有3個共同的屬性：x、y坐標(biāo)，素材image

所以我們定義一個公用的游戲物體

  1. //公用 定義一個游戲物體戲?qū)ο?nbsp;         
  2. function GameObject()          
  3. {          
  4.     this.x = 0;//x 坐標(biāo)         
  5.     this.y = 0;//y 坐標(biāo)         
  6.     this.image = null; //圖片         
  7. }        

為了方便拓展，定義一個公用的蘑菇

  1. //定義公用蘑菇Mushroom 繼承游戲?qū)ο驡ameObject          
  2. function Mushroom() {};          
  3. Mushroom.prototype = new GameObject();//游戲?qū)ο驡ameObject    

定義一個我們使用到的具體蘑菇

  1. //蘑菇實(shí)例          
  2. var mushroom = new Mushroom();      

初始化蘑菇的位置和圖片

  1. mushroom.image = mushroomImg;             
  2. mushroom.x = parseInt(screenWidth/2);             
  3. mushroom.y = screenHeight - 40;      

四、用canvas把蘑菇繪制出來

  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.     ctx.restore();          
  12.     }       

好了，到這里蘑菇也定義了，背景圖也定義了，繪圖也定義了，下面就開始整合上面的代碼寫一個完整的把蘑菇和背景描述在畫布上

  1. <!DOCTYPE>     
  2. <html>     
  3. <head>     
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
  5. <title>蘑菇動起來-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 ctx;//2d畫布      
  13.     var screenWidth;//畫布寬度      
  14.     var screenHeight;//畫布高度      
  15.           
  16.     //公用 定義一個游戲物體戲?qū)ο?nbsp;     
  17.     function GameObject()      
  18.     {      
  19.         this.x = 0;      
  20.         this.y = 0;      
  21.         this.image = null;      
  22.     }      
  23.           
  24.     //定義蘑菇Mushroom 繼承游戲?qū)ο驡ameObject      
  25.     function Mushroom() {};      
  26.     Mushroom.prototype = new GameObject();//游戲?qū)ο驡ameObject      
  27.           
  28.     //蘑菇實(shí)例      
  29.     var mushroom = new Mushroom();      
  30.     //循環(huán)描繪物體      
  31.     function gameLoop()      
  32.     {      
  33.         //清除屏幕      
  34.         ctx.clearRect(0, 0, screenWidth, screenHeight);      
  35.         ctx.save();      
  36.         //繪制背景      
  37.         ctx.drawImage(backgroundForestImg, 0, 0);      
  38.         //繪制蘑菇      
  39.         ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);      
  40.         ctx.restore();      
  41.         }      
  42.     //加載圖片      
  43.     function loadImages()      
  44.     {      
  45.         mushroomImg.src = "images/mushroom.png";//蘑菇      
  46.         backgroundForestImg.src = "images/forest1.jpg";//森林背景圖      
  47.     }         
  48.     //初始化      
  49.     $(window).ready(function(){       
  50.         loadImages();              
  51.         ctx = document.getElementById('canvas').getContext('2d'); //獲取2d畫布         
  52.         screenWidth = parseInt($("#canvas").attr("width")); //畫布寬度    
  53.         screenHeight = parseInt($("#canvas").attr("height"));      
  54.         mushroom.image = mushroomImg;      
  55.         mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐標(biāo)     
  56.         mushroom.y = screenHeight - 40;//蘑菇Y(jié)坐標(biāo)       
  57.         setInterval(gameLoop, 10);      
  58.     });      
  59.     
  60.      
  61. </script>     
  62. </head>     
  63.      
  64. <body>     
  65.     <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">     
  66.         <canvas id="canvas" width="480" height="320" >     
  67.         </canvas>     
  68.     </div>     
  69.        </body>     
  70. </html>    

蘑菇圖片下載地址：http://www.html5china.com/html5games/mogu/images/mushroom.png

背景圖片下載地址：http://www.html5china.com/html5games/mogu/images/forest1.jpg

你試著在支持html5的瀏覽器上運(yùn)行上面代碼試看~是不是蘑菇描繪出來了~

假如你能看到效果了，那祝賀你~你有了個很好的開端~

上面的步驟只是將蘑菇和場景繪出來了，那么接下來我們讓他隨鼠標(biāo)動起來~

給DIV#container添加放上鼠標(biāo)的事件

當(dāng)鼠標(biāo)放在DIV#container上面時，蘑菇的X軸坐標(biāo)等與鼠標(biāo)的X軸坐標(biāo)

  1. //事件處理      
  2. function addEventHandlers()      
  3. {      
  4.     //鼠標(biāo)移動則蘑菇跟著移動      
  5.     $("#container").mousemove(function(e){      
  6.         mushroom.x = e.pageX - (mushroom.image.width/2);      
  7.     });       
  8.           
  9. }    

我們只要在剛才的演示代碼中的 $(window).ready(function(){ }); 里面加上addEventHandlers();就可以了，如下

  1. //初始化      
  2. $(window).ready(function(){     
  3.     addEventHandlers();//加上事件   
  4.     loadImages();         
  5.     ctx = document.getElementById('canvas').getContext('2d'); //獲取2d畫布         
  6.     mushroom.image = mushroomImg;      
  7.     screenWidth = parseInt($("#canvas").attr("width"));      
  8.     screenHeight = parseInt($("#canvas").attr("height"));      
  9.     mushroom.x = parseInt(screenWidth/2);      
  10.     mushroom.y = screenHeight - 40;       
  11.     setInterval(gameLoop, 10);      
  12. });    

你再運(yùn)行代碼試下，是不是蘑菇跟著鼠標(biāo)動起來了~

第二回就講到這了，第三回講怎么繪制一只熊并讓他滾動起來~

原文鏈接：http://www.html5china.com/course/20110101_898.html

【編輯推薦】

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

2012-05-21 10:53:30

HTML5

2012-05-21 13:18:12

HTML5

2012-05-21 14:08:21

HTML5

2012-05-21 13:11:51

HTML5

2012-05-21 10:40:13

HTML5

2012-05-21 13:32:45

HTML5

2012-05-21 13:25:49

HTML5

2012-09-03 09:21:51

2010-09-08 09:48:56

Gif播放教程Android

2020-06-04 15:24:33

微信蘋果虛擬支付

2009-06-19 11:18:51

Factory BeaSpring配置

2022-06-07 09:00:32

PythonAI靜態(tài)圖片

2020-11-16 11:50:21

Python代碼命令

2013-05-27 15:35:18

用友UAP移動應(yīng)用移動平臺

2019-05-21 14:18:09

PygamePython編程語言

2011-06-01 14:51:54

jQuery

2021-09-26 09:23:01

GC算法垃圾

2018-07-26 13:53:27

2010-05-21 11:03:51

統(tǒng)一通信系統(tǒng)

2011-09-15 17:36:29

Android應(yīng)用Call Cartoo動畫
點(diǎn)贊
收藏

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