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

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

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

一、需要到的全局变量

JavaScript Code复制内容到剪贴板
var flowerImg = new Image();//奖品鲜花   
var leafImg = new Image();//奖品叶子   
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复制内容到剪贴板
  //加载图片      
  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;   
  }   
 

三、定义奖品数据及实例

JavaScript Code复制内容到剪贴板
//定义奖品数组Prizes和对象Prize，继承游戏对象GameObject   
var prizes = new Array();   
function Prize() {};   
Prize.prototype = new GameObject();//继承游戏对象GameObject   
Prize.prototype.row = 0;//奖品行位置   
Prize.prototype.col = 0;//奖品列位置  
四、把奖品装进数组

JavaScript Code复制内容到剪贴板
//创建奖品数组   
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++;   
        }   
    }   
}  
五、从数组中取出奖品并描绘

JavaScript Code复制内容到剪贴板
//绘制奖品，把奖品显示在画布上   
function DrawPrizes()   
{   
    for(var x=0; x<prizes.length; x++)   
    {   
        currentPrize = prizes[x];   
        ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);   
    }   
}  
六、在游戏循环GameLoop()中加入描绘奖品的函数，如下

JavaScript Code复制内容到剪贴板
  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();   
  
      }     
到此第六回的完整代码如下：

展开XML/HTML Code复制内容到剪贴板
第六回就讲到这了，第七回讲描绘熊碰到奖品，奖品消失的事件

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


转载请注明：睿美印象网站建设工作室www.ruimeiyx.com