第八回合中主要是完善游戲，給游戲加上開始按鈕、生命數(shù)、得分

成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、成都網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團(tuán)成都企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。核心團(tuán)隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都食品包裝袋等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致贊揚！

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

一、添加開始按鈕

A、html代碼中加入開始按鈕，并定位他于畫布的中間

開始圖片下載地址：http://www.html5china.com/html5games/mogu/images/START-Button.png

B、全局變量

 
 
 

  
  
  
var gameRunning = false;//游戲運行狀態(tài)      
  
  
  
var gameloopId;//記住循環(huán)的變量    
 
 
 

C、原來是游戲自己開始沒有暫停的、寫一個開始暫停的函數(shù)

 
 
 

  
  
  
//開始或者暫停游戲      
  
  
  
function ToggleGameplay()      
  
  
  
{      
  
  
  
    gameRunning = !gameRunning;      
  
  
  
    if(gameRunning)      
  
  
  
    {      
  
  
  
        $("#BtnImgStart").hide();      
  
  
  
         gameloopId = setInterval(GameLoop, 10);       
  
  
  
    }else      
  
  
  
    {      
  
  
  
        clearInterval(gameloopId);      
  
  
  
    }      
  
  
  
}    
 
 
 

D、添加開始按鈕事件

 
 
 

  
  
  
//事件處理         
  
  
  
function AddEventHandlers()         
  
  
  
{         
  
  
  
    //鼠標(biāo)移動則蘑菇跟著移動         
  
  
  
    $("#container").mousemove(function(e){         
  
  
  
        mushroom.x = e.pageX - (mushroom.image.width/2);         
  
  
  
    });       
  
  
  
    //開始按鈕         
  
  
  
    $("#BtnImgStart").click(function (){              
  
  
  
        ToggleGameplay();      
  
  
  
    });      
  
  
  
}     
 
 
 

注意，要把$(window).ready(function(){})函數(shù)中的setInterval(GameLoop, 10);去掉

#p#

二、添加生命數(shù)條

A、需要的全局變量

 
 
 

  
  
  
var lives=3;//3條生命數(shù)      
  
  
  
var livesImages = new Array();//生命圖片數(shù)組    
 
 
 

B、生命圖片初始化

 
 
 

  
  
  
//生命圖片因為只有6個，所以最多只能6個      
  
  
  
for(var x=0; x<6; x++)      
  
  
  
{      
  
  
  
    livesImages[x] = new Image();         
  
  
  
    livesImages[x].src = "images/lives" + x + ".png";      
  
  
  
}    
 
 
 

C、繪制生命條

 
 
 

  
  
  
//描繪生命條      
  
  
  
function DrawLives()      
  
  
  
{      
  
  
  
    ctx.drawImage(livesImages[lives], 0, 0);      
  
  
  
}    
 
 
 

D、當(dāng)熊碰到底線時，減一條生命

 
 
 

  
  
  
//熊碰到下面邊界      
  
  
  
if(animal.y>screenHeight - animal.image.height)      
  
  
  
{      
  
  
  
    lives -=1;//生命減1     
  
  
  
    //當(dāng)還有生命條時，暫停游戲，熊回到中間位置，顯出開始按鈕    
  
  
  
    if(lives>0)      
  
  
  
    {      
  
  
  
        horizontalSpeed = speed; //初始化水平速度     
  
  
  
        verticalSpeed = -speed; //初始化垂直速度    
  
  
  
        animal.x = parseInt(screenWidth/2); //初始化熊的x坐標(biāo)    
  
  
  
        animal.y = parseInt(screenHeight/2); //初始化熊的y坐標(biāo)      
  
  
  
        $("#BtnImgStart").show(); //顯示開始按鈕     
  
  
  
        ToggleGameplay(); //暫停游戲     
  
  
  
        GameLoop(); //初始化繪圖     
  
  
  
    }      
  
  
  
}    
 
 
 

E、當(dāng)生命條數(shù)等于0或者獎品消滅完，游戲結(jié)束

 
 
 

  
  
  
//結(jié)束游戲      
  
  
  
function GameOver()      
  
  
  
{      
  
  
  
    gameRunning = false;      
  
  
  
    clearInterval(gameloopId);      
  
  
  
    alert("游戲結(jié)束!");      
  
  
  
}    
 
 
 

在熊撞到底線的代碼中，加入判斷，當(dāng)生命數(shù)=0時，游戲結(jié)束

 
 
 

  
  
  
if(lives<=0)      
  
  
  
    GameOver();    
 
 
 

在繪制獎品函數(shù)中加入判斷，當(dāng)獎品被消滅完時，游戲結(jié)束

 
 
 

  
  
  
//繪制獎品，把獎品顯示在畫布上      
  
  
  
function DrawPrizes()      
  
  
  
{      
  
  
  
    for(var x=0; x  
  
  
    {      
  
  
  
        currentPrize = prizes[x];                 
  
  
  
        //假如沒有被撞擊，則描繪      
  
  
  
        if(!currentPrize.hit)      
  
  
  
        {      
  
  
  
            ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);      
  
  
  
        }      
  
  
  
    }      
  
  
  
    if(AllPrizesHit())      
  
  
  
    {      
  
  
  
        GameOver();      
  
  
  
    }      
  
  
  
}      
  
  
  
//判斷是否撞完獎品，假如其中有一個      
  
  
  
function AllPrizesHit()      
  
  
  
{      
  
  
  
    for(var c=0; c  
  
  
    {      
  
  
  
        checkPrize = prizes[c];      
  
  
  
        if(checkPrize.hit == false)      
  
  
  
            return false;      
  
  
  
                  
  
  
  
    }      
  
  
  
    return true;      
  
  
  
}    
 
 
 

#p#

三、添加得分

A、定義全局變量

 
 
 

  
  
  
var score = 0;//分?jǐn)?shù)      
  
  
  
var scoreImg = new Image();//分?jǐn)?shù)板    
 
 
 

B、初始化分?jǐn)?shù)板

 
 
 

  
  
  
scoreImg.src = "images/score.png";//分?jǐn)?shù)板    
 
 
 

C、給獎品加一個分?jǐn)?shù)屬性。這樣在撞獎品時才能知道得到多少分

 
 
 

  
  
  
function Prize() {};      
  
  
  
Prize.prototype = new GameObject();//繼承游戲?qū)ο驡ameObject      
  
  
  
Prize.prototype.row = 0;//獎品行位置      
  
  
  
Prize.prototype.col = 0;//獎品列位置      
  
  
  
Prize.prototype.hit = false;//是否被撞過      
  
  
  
Prize.prototype.point = 0;//分?jǐn)?shù)    
 
 
 

D、在初始化獎品數(shù)組中加入分?jǐn)?shù)

 
 
 

  
  
  
//創(chuà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;//鮮花放在***行      
  
  
  
                prize.point = 3;//鮮花3分      
  
  
  
            }      
  
  
  
            if(x==1)      
  
  
  
            {      
  
  
  
                prize.image = acornImg;//豫子剛在第2行      
  
  
  
                prize.point = 2;//橡子2分      
  
  
  
            }      
  
  
  
            if(x==2)      
  
  
  
            {      
  
  
  
                prize.image = leafImg;//葉子放在第3行      
  
  
  
                prize.point = 1;//葉子1分      
  
  
  
            }      
  
  
  
                      
  
  
  
            prize.row = x;      
  
  
  
            prize.col = y;      
  
  
  
            prize.x = 20 * prize.col + 10;//x軸位置      
  
  
  
            prize.y = 20 * prize.row + 40;//y軸位置      
  
  
  
            //裝入獎品數(shù)組，用來描繪      
  
  
  
            prizes[count] = prize;      
  
  
  
            count++;      
  
  
  
        }      
  
  
  
    }      
  
  
  
}    
 
 
 

E、當(dāng)熊撞到獎品時，根據(jù)碰撞獎品的分?jǐn)?shù)增加總分

 
 
 

  
  
  
//撞到獎品      
  
  
  
function HasAnimalHitPrize()      
  
  
  
{      
  
  
  
    //取出所有獎品      
  
  
  
    for(var x=0; x  
  
  
    {      
  
  
  
        var prize = prizes[x];      
  
  
  
        //假如沒有碰撞過      
  
  
  
        if(!prize.hit)      
  
  
  
        {      
  
  
  
            //判斷碰撞      
  
  
  
            if(CheckIntersect(prize, animal, 0))      
  
  
  
            {      
  
  
  
                prize.hit = true;      
  
  
  
                //熊反彈下沉      
  
  
  
                verticalSpeed = speed;      
  
  
  
                //總分增加      
  
  
  
                score += prize.point;      
  
  
  
            }      
  
  
  
        }      
  
  
  
    }      
  
  
  
     
  
  
  
}    
 
 
 

F、繪制分?jǐn)?shù)

 
 
 

  
  
  
//描繪分?jǐn)?shù)      
  
  
  
function DrawScore()      
  
  
  
{      
  
  
  
    ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分?jǐn)?shù)板      
  
  
  
    ctx.font = "12pt Arial";      
  
  
  
    ctx.fillText("" + score, 425, 25);  //得分      
  
  
  
}    
 
 
 

#p#

綜合上面的代碼， 到此第八回的完整代碼如下：

 
 
 

  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
     
  
  
  
        
  
  
  
        
  
  
  
    //全局變量         
  
  
  
    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;//水平速度,隨著熊的碰撞會發(fā)生改變      
  
  
  
    var verticalSpeed = -speed; //垂直速度,開始肯定是要向上飄，所以要負(fù)數(shù)，隨著熊的碰撞會發(fā)生改變      
  
  
  
    var bearAngle = 2;//熊旋轉(zhuǎn)的速度      
  
  
  
    var flowerImg = new Image();//獎品鮮花      
  
  
  
    var leafImg = new Image();//獎品葉子      
  
  
  
    var acornImg = new Image();//獎品橡子      
  
  
  
    var gameRunning = false;//游戲運行狀態(tài)      
  
  
  
    var gameloopId;//記住循環(huán)的變量      
  
  
  
    var lives=3;//3條生命數(shù)      
  
  
  
    var livesImages = new Array();//生命圖片數(shù)組      
  
  
  
    var score = 0;//分?jǐn)?shù)      
  
  
  
    var scoreImg = new Image();//分?jǐn)?shù)板      
  
  
  
    //公用 定義一個游戲物體戲?qū)ο?nbsp;        
  
  
  
    function GameObject()         
  
  
  
    {         
  
  
  
        this.x = 0;         
  
  
  
        this.y = 0;         
  
  
  
        this.image = null;         
  
  
  
    }         
  
  
  
             
  
  
  
    //定義蘑菇Mushroom 繼承游戲?qū)ο驡ameObject         
  
  
  
    function Mushroom() {};         
  
  
  
    Mushroom.prototype = new GameObject();//游戲?qū)ο驡ameObject         
  
  
  
    //蘑菇實例         
  
  
  
    var mushroom = new Mushroom();        //循環(huán)描繪物體        
  
  
  
           
  
  
  
    //定義動物熊 Animal 繼承 游戲?qū)ο驡ameObject      
  
  
  
    function Animal() {};      
  
  
  
    Animal.prototype = new GameObject();//游戲?qū)ο驡ameObject      
  
  
  
    Animal.prototype.angle = 0;//動物的角度，目前中（即作為動物它在屏幕上旋轉(zhuǎn)退回）      
  
  
  
    //定義熊實例       
  
  
  
    var animal = new Animal();      
  
  
  
          
  
  
  
    //定義獎品數(shù)組Prizes和對象Prize，繼承游戲?qū)ο驡ameObject      
  
  
  
    var prizes = new Array();      
  
  
  
    function Prize() {};      
  
  
  
    Prize.prototype = new GameObject();//繼承游戲?qū)ο驡ameObject      
  
  
  
    Prize.prototype.row = 0;//獎品行位置      
  
  
  
    Prize.prototype.col = 0;//獎品列位置      
  
  
  
    Prize.prototype.hit = false;//是否被撞過      
  
  
  
    Prize.prototype.point = 0;//分?jǐn)?shù)      
  
  
  
          
  
  
  
    function GameLoop()         
  
  
  
    {         
  
  
  
        //清除屏幕         
  
  
  
        ctx.clearRect(0, 0, screenWidth, screenHeight);         
  
  
  
        ctx.save();         
  
  
  
        //繪制背景         
  
  
  
        ctx.drawImage(backgroundForestImg, 0, 0);         
  
  
  
        //繪制蘑菇         
  
  
  
        ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
  
  
  
        //繪制獎品      
  
  
  
        DrawPrizes();      
  
  
  
        //繪制生命條      
  
  
  
        DrawLives();      
  
  
  
        //繪制分?jǐn)?shù)板      
  
  
  
        DrawScore();              
  
  
  
        //繪制熊      
  
  
  
        //改變移動動物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();      
  
  
  
        //檢測是否碰到邊界      
  
  
  
        HasAnimalHitEdge();      
  
  
  
        //檢測熊碰撞蘑菇      
  
  
  
        HasAnimalHitMushroom();      
  
  
  
        //檢測熊碰撞獎品      
  
  
  
        HasAnimalHitPrize();      
  
  
  
        }         
  
  
  
    //加載圖片         
  
  
  
    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";//獎品葉子      
  
  
  
        scoreImg.src = "images/score.png";//分?jǐn)?shù)板      
  
  
  
        //生命圖片因為只有6個，所以最多只能6個      
  
  
  
        for(var x=0; x<6; x++)      
  
  
  
        {      
  
  
  
            livesImages[x] = new Image();         
  
  
  
            livesImages[x].src = "images/lives" + x + ".png";      
  
  
  
        }      
  
  
  
              
  
  
  
        mushroom.image = mushroomImg;         
  
  
  
        animal.image = bearEyesClosedImg;      
  
  
  
        backgroundForestImg.onload = function(){GameLoop(); };      
  
  
  
    }       
  
  
  
    //熊碰撞邊界      
  
  
  
    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)      
  
  
  
        {      
  
  
  
            lives -=1;//生命減1      
  
  
  
            if(lives>0)      
  
  
  
            {      
  
  
  
                horizontalSpeed = speed;      
  
  
  
                verticalSpeed = -speed;      
  
  
  
                animal.x = parseInt(screenWidth/2);      
  
  
  
                animal.y = parseInt(screenHeight/2);      
  
  
  
                $("#BtnImgStart").show();      
  
  
  
                ToggleGameplay();      
  
  
  
                GameLoop();      
  
  
  
            }      
  
  
  
        }      
  
  
  
        //熊碰到上邊邊界      
  
  
  
        if(animal.y<0)      
  
  
  
        {      
  
  
  
            verticalSpeed = -verticalSpeed;      
  
  
  
        }      
  
  
  
        if(lives<=0)      
  
  
  
            GameOver();      
  
  
  
    }      
  
  
  
    //事件處理         
  
  
  
    function AddEventHandlers()         
  
  
  
    {         
  
  
  
        //鼠標(biāo)移動則蘑菇跟著移動         
  
  
  
        $("#container").mousemove(function(e){         
  
  
  
            mushroom.x = e.pageX - (mushroom.image.width/2);         
  
  
  
        });       
  
  
  
        //開始按鈕         
  
  
  
        $("#BtnImgStart").click(function (){              
  
  
  
            ToggleGameplay();      
  
  
  
        });      
  
  
  
    }       
  
  
  
    //檢測2個物體是否碰撞      
  
  
  
    function CheckIntersect(object1, object2, overlap)      
  
  
  
    {      
  
  
  
        //    x-軸                      x-軸      
  
  
  
        //  A1------>B1 C1              A2------>B2 C2      
  
  
  
        //  +--------+   ^              +--------+   ^      
  
  
  
        //  | object1|   | y-軸         | object2|   | y-軸      
  
  
  
        //  |        |   |              |        |   |      
  
  
  
        //  +--------+  D1              +--------+  D2      
  
  
  
        //      
  
  
  
        //overlap是重疊的區(qū)域值      
  
  
  
        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;//改變垂直速度。也即動物向上移動      
  
  
  
           
  
  
  
        }      
  
  
  
    }      
  
  
  
    //創(chuàng)建獎品數(shù)組      
  
  
  
    function InitPrizes()      
  
  
  
    {      
  
  
  
        var count=0;      
  
  
  
        //一共3行                       

                    文章名稱：蘑菇與熊游戲開發(fā)第八回（完善游戲）                    

                    網(wǎng)頁鏈接：http://uogjgqi.cn/article/codcspc.html