一步一步学做游戏 第六回：绘制奖品

第五回主要讲怎么把奖品描绘上去 预期达到的效果： http://www.html5china.com/html5games/mogu/index5.html 由于奖品特别多，而且是有序的，所以我们使用一个数组来装所有奖品的位置 一、需要到…

第五回主要讲怎么把奖品描绘上去

预期达到的效果：http://www.html5china.com/html5games/mogu/index5.html

由于奖品特别多，而且是有序的，所以我们使用一个数组来装所有奖品的位置

一、需要到的全局变量

JavaScript Code复制内容到剪贴板

1. var flowerImg = new Image();//奖品鲜花  
2. var leafImg = new Image();//奖品叶子  
3. var acornImg = new Image();//奖品橡子  

鲜花图片下载：http://www.html5china.com/html5games/mogu/images/flower.png

叶子图片下载：http://www.html5china.com/html5games/mogu/images/leaf.png

橡子图片下载：http://www.html5china.com/html5games/mogu/images/acorn.png

二、初始化托全局变量

JavaScript Code复制内容到剪贴板

1.   //加载图片      
2.   function LoadImages()      
3.   {      
4.       mushroomImg.src = "images/mushroom.png";//蘑菇     
5.       backgroundForestImg.src = "images/forest1.jpg";//森林背景图    
6.       bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的  
7.       flowerImg.src = "images/flower.png";//奖品花  
8.       acornImg.src = "images/acorn.png";//奖品橡子  
9.       leafImg.src = "images/leaf.png";//奖品叶子  
10.   
11.       mushroom.image = mushroomImg;      
12.       animal.image = bearEyesClosedImg;   
13.   }   

 

三、定义奖品数据及实例

JavaScript Code复制内容到剪贴板

1. //定义奖品数组Prizes和对象Prize，继承游戏对象GameObject  
2. var prizes = new Array();   
3. function Prize() {};   
4. Prize.prototype = new GameObject();//继承游戏对象GameObject  
5. Prize.prototype.row = 0;//奖品行位置  
6. Prize.prototype.col = 0;//奖品列位置  

四、把奖品装进数组

JavaScript Code复制内容到剪贴板

1. //创建奖品数组   
2. function InitPrizes()   
3. {   
4.     var count=0;   
5.     //一共3行   
6.     for(var x=0; x<3; x++)   
7.     {   
8.         //一共23列   
9.         for(var y=0; y<23; y++)   
10.         {   
11.             prize = new Prize();   
12.             if(x==0)   
13.                 prize.image = flowerImg;//鲜花放在第一行  
14.             if(x==1)   
15.                 prize.image = acornImg;//豫子刚在第2行  
16.             if(x==2)   
17.                 prize.image = leafImg;//叶子放在第3行  
18.                    
19.             prize.row = x;   
20.             prize.col = y;   
21.             prize.x = 20 * prize.col + 10;//x轴位置  
22.             prize.y = 30 * prize.row + 20;//y轴位置  
23.             //装入奖品数组，用来描绘   
24.             prizes[count] = prize;   
25.             count++;   
26.         }   
27.     }   
28. }  

五、从数组中取出奖品并描绘

JavaScript Code复制内容到剪贴板

1. //绘制奖品，把奖品显示在画布上   
2. function DrawPrizes()   
3. {   
4.     for(var x=0; x<prizes.length; x++)   
5.     {   
6.         currentPrize = prizes[x];   
7.         ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);   
8.     }   
9. }  

六、在游戏循环GameLoop()中加入描绘奖品的函数，如下

JavaScript Code复制内容到剪贴板

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. DrawPrizes();          
12. //绘制熊   
13. //改变移动动物X和Y位置   
14. animal.x += horizontalSpeed;   
15. animal.y += verticalSpeed;   
16. //改变翻滚角度   
17. animal.angle += bearAngle;   
18. //以当前熊的中心位置为基准   
19.         ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));   
20. //根据当前熊的角度轮换   
21.     ctx.rotate(animal.angle * Math.PI/180);   
22. //描绘熊   
23.     ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));   
24.   
25.       ctx.restore();   
26. //检测是否碰到边界   
27. HasAnimalHitEdge();   
28. //检测熊碰撞蘑菇   
29. HasAnimalHitMushroom();   
30.   
31.       }     

到此第六回的完整代码如下：

展开XML/HTML Code复制内容到剪贴板

第六回就讲到这了，第七回讲描绘熊碰到奖品，奖品消失的事件

大家有什么建议的话，可以到论坛留言讨论：http://bbs.html5china.com/read.php?tid=2

希望大家在其他地方引用的时候，注明引用来自html5中文网

 --作者：深邃老马    

-----------------逆水行舟，不进则退