日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

第六回主要講怎么把獎(jiǎng)品描繪上去

在洛江等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需求定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè),洛江網(wǎng)站建設(shè)費(fèi)用合理。

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

由于獎(jiǎng)品特別多，而且是有序的，所以我們使用一個(gè)數(shù)組來裝所有獎(jiǎng)品的位置

一、需要到的全局變量

 
 
 

  
  
  
var flowerImg = new Image();//獎(jiǎng)品鮮花      
  
  
  
var leafImg = new Image();//獎(jiǎng)品葉子      
  
  
  
var acornImg = new Image();//獎(jiǎng)品橡子     
 
 
 

鮮花圖片下載：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

二、初始化托全局變量

 
 
 

  
  
  
//加載圖片         
  
  
  
function LoadImages()         
  
  
  
{         
  
  
  
    mushroomImg.src = "images/mushroom.png";//蘑菇         
  
  
  
    backgroundForestImg.src = "images/forest1.jpg";//森林背景圖        
  
  
  
    bearEyesClosedImg.src = "images/bear_eyesclosed.png";//閉著眼睛的      
  
  
  
    flowerImg.src = "images/flower.png";//獎(jiǎng)品花      
  
  
  
    acornImg.src = "images/acorn.png";//獎(jiǎng)品橡子      
  
  
  
    leafImg.src = "images/leaf.png";//獎(jiǎng)品葉子      
  
  
  
   
  
  
  
    mushroom.image = mushroomImg;         
  
  
  
    animal.image = bearEyesClosedImg;      
  
  
  
}     
 
 
 

三、定義獎(jiǎng)品數(shù)據(jù)及實(shí)例

 
 
 

  
  
  
//定義獎(jiǎng)品數(shù)組Prizes和對(duì)象Prize，繼承游戲?qū)ο驡ameObject      
  
  
  
var prizes = new Array();      
  
  
  
function Prize() {};      
  
  
  
Prize.prototype = new GameObject();//繼承游戲?qū)ο驡ameObject      
  
  
  
Prize.prototype.row = 0;//獎(jiǎng)品行位置      
  
  
  
Prize.prototype.col = 0;//獎(jiǎng)品列位置    
 
 
 

四、把獎(jiǎng)品裝進(jìn)數(shù)組

 
 
 

  
  
  
//創(chuàng)建獎(jiǎng)品數(shù)組      
  
  
  
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軸位置      
  
  
  
            //裝入獎(jiǎng)品數(shù)組，用來描繪      
  
  
  
            prizes[count] = prize;      
  
  
  
            count++;      
  
  
  
        }      
  
  
  
    }      
  
  
  
}    
 
 
 

五、從數(shù)組中取出獎(jiǎng)品并描繪

 
 
 

  
  
  
//繪制獎(jiǎng)品，把獎(jiǎng)品顯示在畫布上      
  
  
  
function DrawPrizes()      
  
  
  
{      
  
  
  
    for(var x=0; x
  
  
  
    {      
  
  
  
        currentPrize = prizes[x];      
  
  
  
        ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);      
  
  
  
    }      
  
  
  
}    
 
 
 

六、在游戲循環(huán)GameLoop()中加入描繪獎(jiǎng)品的函數(shù)，如下

 
 
 

  
  
  
  function GameLoop()         
  
  
  
  {         
  
  
  
      //清除屏幕         
  
  
  
      ctx.clearRect(0, 0, screenWidth, screenHeight);         
  
  
  
      ctx.save();         
  
  
  
      //繪制背景         
  
  
  
      ctx.drawImage(backgroundForestImg, 0, 0);         
  
  
  
      //繪制蘑菇         
  
  
  
      ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
  
  
  
//繪制獎(jiǎng)品      
  
  
  
DrawPrizes();             
  
  
  
//繪制熊      
  
  
  
//改變移動(dòng)動(dòng)物X和Y位置      
  
  
  
animal.x += horizontalSpeed;      
  
  
  
animal.y += verticalSpeed;      
  
  
  
//改變翻滾角度      
  
  
  
animal.angle += bearAngle;      
  
  
  
//以當(dāng)前熊的中心位置為基準(zhǔn)      
  
  
  
        ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
//根據(jù)當(dāng)前熊的角度輪換      
  
  
  
    ctx.rotate(animal.angle * Math.PI/180);      
  
  
  
//描繪熊      
  
  
  
    ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));      
  
  
  
     
  
  
  
      ctx.restore();      
  
  
  
//檢測(cè)是否碰到邊界      
  
  
  
HasAnimalHitEdge();      
  
  
  
//檢測(cè)熊碰撞蘑菇      
  
  
  
HasAnimalHitMushroom();      
  
  
  
     
  
  
  
      }       
 
 
 

#p#

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

 
 
 

  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
     
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
            
  
  
  
               
  
  
  
        瀏覽器不支持html5,請(qǐng)下載支持html5的瀏覽器來觀看