蘑菇與熊游戲開發第六回（繪制獎品）

作者：admin 2012-05-21 13:25:49

由于獎品特別多，而且是有序的，所以我們使用一個數組來裝所有獎品的位置。需要到的全局變量、初始化托全局變量、定義獎品數據及實例、把獎品裝進數組.....

第六回主要講怎么把獎品描繪上去

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

由于獎品特別多，而且是有序的，所以我們使用一個數組來裝所有獎品的位置

一、需要到的全局變量

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

二、初始化托全局變量

//加載圖片         
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;      
}

三、定義獎品數據及實例

//定義獎品數組Prizes和對象Prize，繼承游戲對象GameObject      
var prizes = new Array();      
function Prize() {};      
Prize.prototype = new GameObject();//繼承游戲對象GameObject      
Prize.prototype.row = 0;//獎品行位置      
Prize.prototype.col = 0;//獎品列位置

四、把獎品裝進數組

//創建獎品數組      
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++;      
        }      
    }      
}

五、從數組中取出獎品并描繪

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

六、在游戲循環GameLoop()中加入描繪獎品的函數，如下

  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();      
     
      }

#p#

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

<!DOCTYPE>        
<html>        
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
<title>蘑菇動起來-html5中文網</title>        
<!-- 要記得引用jquery-1.4.2.js -->     
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>        
<script type="text/javascript" >        
    //全局變量         
    var backgroundForestImg = new Image();//森林背景圖         
    var mushroomImg = new Image();//蘑菇       
    var bearEyesClosedImg = new Image();//閉著眼睛的熊熊       
    var ctx;//2d畫布         
    var screenWidth;//畫布寬度         
    var screenHeight;//畫布高度       
    var speed = 2;//不變常量,從新開始的速度        
    var horizontalSpeed = speed;//水平速度,隨著熊的碰撞會發生改變      
    var verticalSpeed = -speed; //垂直速度,開始肯定是要向上飄，所以要負數，隨著熊的碰撞會發生改變      
    var bearAngle = 2;//熊旋轉的速度      
    var flowerImg = new Image();//獎品鮮花      
    var leafImg = new Image();//獎品葉子      
    var acornImg = new Image();//獎品橡子      
     
    //公用 定義一個游戲物體戲對象         
    function GameObject()         
    {         
        this.x = 0;         
        this.y = 0;         
        this.image = null;         
    }         
             
    //定義蘑菇Mushroom 繼承游戲對象GameObject         
    function Mushroom() {};         
    Mushroom.prototype = new GameObject();//游戲對象GameObject         
    //蘑菇實例         
    var mushroom = new Mushroom();        //循環描繪物體        
           
    //定義動物熊 Animal 繼承 游戲對象GameObject      
    function Animal() {};      
    Animal.prototype = new GameObject();//游戲對象GameObject      
    Animal.prototype.angle = 0;//動物的角度，目前中（即作為動物它在屏幕上旋轉退回）      
    //定義熊實例       
    var animal = new Animal();      
          
    //定義獎品數組Prizes和對象Prize，繼承游戲對象GameObject      
    var prizes = new Array();      
    function Prize() {};      
    Prize.prototype = new GameObject();//繼承游戲對象GameObject      
    Prize.prototype.row = 0;//獎品行位置      
    Prize.prototype.col = 0;//獎品列位置      
          
    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();      
     
        }         
    //加載圖片         
    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;      
    }       
    //熊碰撞邊界      
    function HasAnimalHitEdge()      
    {      
        //熊碰到右邊邊界      
        if(animal.x>screenWidth - animal.image.width)      
        {      
            if(horizontalSpeed > 0)//假如向右移動      
                horizontalSpeed =-horizontalSpeed;//改變水平速度方向      
        }      
        //熊碰到左邊邊界      
        if(animal.x<-10)      
        {      
            if(horizontalSpeed < 0)//假如向左移動      
                horizontalSpeed = -horizontalSpeed;//改變水平速度方向      
        }      
        //熊碰到下面邊界      
        if(animal.y>screenHeight - animal.image.height)      
        {      
            //2秒鐘后從新開始      
            setTimeout(function(){      
                horizontalSpeed = speed;      
                verticalSpeed = -speed;      
                animal.x = parseInt(screenWidth/2);      
                animal.y = parseInt(screenHeight/2);      
                GameLoop();      
            }, 2000);      
        }      
        //熊碰到上邊邊界      
        if(animal.y<0)      
        {      
            verticalSpeed = -verticalSpeed;      
        }      
    }      
    //事件處理         
    function AddEventHandlers()         
    {         
        //鼠標移動則蘑菇跟著移動         
        $("#container").mousemove(function(e){         
            mushroom.x = e.pageX - (mushroom.image.width/2);         
        });          
                 
    }       
    //檢測2個物體是否碰撞      
    function CheckIntersect(object1, object2, overlap)      
    {      
        //    x-軸                      x-軸      
        //  A1------>B1 C1              A2------>B2 C2      
        //  +--------+   ^              +--------+   ^      
        //  | object1|   | y-軸         | object2|   | y-軸      
        //  |        |   |              |        |   |      
        //  +--------+  D1              +--------+  D2      
        //      
        //overlap是重疊的區域值      
        A1 = object1.x + overlap;      
        B1 = object1.x + object1.image.width - overlap;      
        C1 = object1.y + overlap;      
        D1 = object1.y + object1.image.height - overlap;      
           
        A2 = object2.x + overlap;      
        B2 = object2.x + object2.image.width - overlap;      
        C2 = object2.y + overlap;      
        D2 = object2.y + object2.image.width - overlap;      
           
        //假如他們在x-軸重疊      
        if(A1 > A2 && A1 < B2     
           || B1 > A2 && B1 < B2)      
        {      
            //判斷y-軸重疊      
            if(C1 > C2 && C1 < D1     
           || D1 > C2 && D1 < D2)      
            {      
                //碰撞      
                return true;      
            }      
           
        }      
        return false;      
    }      
    //動物碰撞蘑菇      
    function HasAnimalHitMushroom()      
    {      
        //假如碰撞      
        if(CheckIntersect(animal, mushroom, 5))      
        {      
            //假如碰撞的位置屬于蘑菇的左下位置      
            if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))      
            {      
                horizontalSpeed = -speed;//反彈      
            }      
            //假如碰撞的位置屬于蘑菇的左上位置      
            else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))      
            {      
                //反彈速度減半      
                horizontalSpeed = -speed/2;      
            }      
            //假如碰撞的位置屬于蘑菇的右上位置      
            else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))      
            {      
                horizontalSpeed = speed/2;      
            }      
            else      
            {      
                horizontalSpeed = speed;      
            }      
            verticalSpeed = -speed;//改變垂直速度。也即動物向上移動      
           
        }      
    }      
    //創建獎品數組      
    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++;      
            }      
        }      
    }      
    //繪制獎品，把獎品顯示在畫布上      
    function DrawPrizes()      
    {      
        for(var x=0; x<prizes.length; x++)      
        {      
            currentPrize = prizes[x];      
            ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);      
        }      
    }      
    //初始化         
    $(window).ready(function(){          
        AddEventHandlers();//添加事件        
        LoadImages();                 
        ctx = document.getElementById('canvas').getContext('2d'); //獲取2d畫布            
        screenWidth = parseInt($("#canvas").attr("width")); //畫布寬度       
        screenHeight = parseInt($("#canvas").attr("height"));         
        //初始化蘑菇      
        mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐標        
        mushroom.y = screenHeight - 40;//蘑菇Y坐標         
        //初始化熊      
        animal.x = parseInt(screenWidth/2);      
        animal.y = parseInt(screenHeight/2);       
        //初始化獎品      
        InitPrizes();      
        setInterval(GameLoop, 10);         
    });         
       
        
</script>        
</head>        
        
<body>        
    <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">        
        <canvas id="canvas" width="480" height="320" >       
        瀏覽器不支持html5,<a target="_blank" href="http://www.html5china.com/help/browser.html">請下載</a>支持html5的瀏覽器來觀看       
        </canvas>        
    </div>        
       </body>        
</html>

第六回就講到這了，第七回講描繪熊碰到獎品，獎品消失的事件

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

【編輯推薦】

蘑菇與熊游戲開發第一回（游戲分析）
蘑菇與熊游戲開發第二回（讓蘑菇動起來）
蘑菇與熊游戲開發第三回（讓熊動起來）
蘑菇與熊游戲開發第四回（熊碰撞邊界處理）
蘑菇與熊游戲開發第五回（熊碰撞蘑菇處理）
蘑菇與熊游戲開發第七回（熊碰到獎品處理）
蘑菇與熊游戲開發第八回（完善游戲）

責任編輯：張偉來源： HTML5China

HTML5

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

蘑菇與熊游戲開發第六回（繪制獎品）