蘑菇与熊游戏开发第八回（完善游戏）-与蘑菇有关的游戏

第八回合中主要是完善游戏，给游戏加上开始按钮、生命数、得分

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

一、添加开始按钮

A、html代码中加入开始按钮，并定位他于画布的中间

<img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png">

开始图片下载地址：http://www.html5china.com/html5games/mogu/images/START-Button.png

B、全局变量

var gameRunning = false;//游戏运行状态      
var gameloopId;//记住循环的变量

C、原来是游戏自己开始没有暂停的、写一个开始暂停的函数

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

D、添加开始按钮事件

//事件处理         
function AddEventHandlers()         
{         
    //鼠标移动则蘑菇跟着移动         
    $("#container").mousemove(function(e){         
        mushroom.x = e.pageX - (mushroom.image.width/2);         
    });       
    //开始按钮         
    $("#BtnImgStart").click(function (){              
        ToggleGameplay();      
    });      
}

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

#p#

二、添加生命数条

A、需要的全局变量

var lives=3;//3条生命数      
var livesImages = new Array();//生命图片数组

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、当熊碰到底线时，减一条生命

//熊碰到下面边界      
if(animal.y>screenHeight - animal.image.height)      
{      
    lives -=1;//生命减1     
    //当还有生命条时，暂停游戏，熊回到中间位置，显出开始按钮    
    if(lives>0)      
    {      
        horizontalSpeed = speed; //初始化水平速度     
        verticalSpeed = -speed; //初始化垂直速度    
        animal.x = parseInt(screenWidth/2); //初始化熊的x坐标    
        animal.y = parseInt(screenHeight/2); //初始化熊的y坐标      
        $("#BtnImgStart").show(); //显示开始按钮     
        ToggleGameplay(); //暂停游戏     
        GameLoop(); //初始化绘图     
    }      
}

E、当生命条数等于0或者奖品消灭完，游戏结束

//结束游戏      
function GameOver()      
{      
    gameRunning = false;      
    clearInterval(gameloopId);      
    alert("游戏结束!");      
}

在熊撞到底线的代码中，加入判断，当生命数=0时，游戏结束

if(lives<=0)      
    GameOver();

在绘制奖品函数中加入判断，当奖品被消灭完时，游戏结束

//绘制奖品，把奖品显示在画布上      
function DrawPrizes()      
{      
    for(var x=0; x<prizes.length; 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<prizes.length; c++)      
    {      
        checkPrize = prizes[c];      
        if(checkPrize.hit == false)      
            return false;      
                  
    }      
    return true;      
}

#p#

三、添加得分

A、定义全局变量

var score = 0;//分数      
var scoreImg = new Image();//分数板

B、初始化分数板

scoreImg.src = "images/score.png";//分数板

C、给奖品加一个分数属性。这样在撞奖品时才能知道得到多少分

function Prize() {};      
Prize.prototype = new GameObject();//继承游戏对象GameObject      
Prize.prototype.row = 0;//奖品行位置      
Prize.prototype.col = 0;//奖品列位置      
Prize.prototype.hit = false;//是否被撞过      
Prize.prototype.point = 0;//分数

D、在初始化奖品数组中加入分数

//创建奖品数组      
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轴位置      
            //装入奖品数组，用来描绘      
            prizes[count] = prize;      
            count++;      
        }      
    }      
}

E、当熊撞到奖品时，根据碰撞奖品的分数增加总分

//撞到奖品      
function HasAnimalHitPrize()      
{      
    //取出所有奖品      
    for(var x=0; x<prizes.length; x++)      
    {      
        var prize = prizes[x];      
        //假如没有碰撞过      
        if(!prize.hit)      
        {      
            //判断碰撞      
            if(CheckIntersect(prize, animal, 0))      
            {      
                prize.hit = true;      
                //熊反弹下沉      
                verticalSpeed = speed;      
                //总分增加      
                score += prize.point;      
            }      
        }      
    }      
     
}

F、绘制分数

//描绘分数      
function DrawScore()      
{      
    ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板      
    ctx.font = "12pt Arial";      
    ctx.fillText("" + score, 425, 25);  //得分      
}

#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();//奖品橡子      
    var gameRunning = false;//游戏运行状态      
    var gameloopId;//记住循环的变量      
    var lives=3;//3条生命数      
    var livesImages = new Array();//生命图片数组      
    var score = 0;//分数      
    var scoreImg = 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;//奖品列位置      
    Prize.prototype.hit = false;//是否被撞过      
    Prize.prototype.point = 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();      
        //绘制生命条      
        DrawLives();      
        //绘制分数板      
        DrawScore();              
        //绘制熊      
        //改变移动动物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();      
        //检测熊碰撞奖品      
        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";//分数板      
        //生命图片因为只有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()         
    {         
        //鼠标移动则蘑菇跟着移动         
        $("#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是重叠的区域值      
        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;//鲜花放在***行      
                    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轴位置      
                //装入奖品数组，用来描绘      
                prizes[count] = prize;      
                count++;      
            }      
        }      
    }      
    //绘制奖品，把奖品显示在画布上      
    function DrawPrizes()      
    {      
        for(var x=0; x<prizes.length; x++)      
        {      
            currentPrize = prizes[x];                 
            //假如没有被撞击，则描绘      
            if(!currentPrize.hit)      
            {      
                ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);      
            }      
        }      
        if(AllPrizesHit())      
        {      
            GameOver();      
        }      
    }      
          
    //撞到奖品      
    function HasAnimalHitPrize()      
    {      
        //取出所有奖品      
        for(var x=0; x<prizes.length; x++)      
        {      
            var prize = prizes[x];      
            //假如没有碰撞过      
            if(!prize.hit)      
            {      
                //判断碰撞      
                if(CheckIntersect(prize, animal, 0))      
                {      
                    prize.hit = true;      
                    //熊反弹下沉      
                    verticalSpeed = speed;      
                    //总分增加      
                    score += prize.point;      
                }      
            }      
        }      
     
    }      
    //判断是否撞完奖品，假如其中有一个      
    function AllPrizesHit()      
    {      
        for(var c=0; c<prizes.length; c++)      
        {      
            checkPrize = prizes[c];      
            if(checkPrize.hit == false)      
                return false;      
                      
        }      
        return true;      
    }      
    //开始或者暂停游戏      
    function ToggleGameplay()      
    {      
        gameRunning = !gameRunning;      
        if(gameRunning)      
        {      
            $("#BtnImgStart").hide();      
             gameloopId = setInterval(GameLoop, 10);       
        }else      
        {      
            clearInterval(gameloopId);      
        }      
    }      
    //结束游戏      
    function GameOver()      
    {      
        gameRunning = false;      
        clearInterval(gameloopId);      
        alert("游戏结束!");      
    }      
    //描绘生命条      
    function DrawLives()      
    {      
        ctx.drawImage(livesImages[lives], 0, 0);      
    }      
    //描绘分数      
    function DrawScore()      
    {      
        ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板      
        ctx.font = "12pt Arial";      
        ctx.fillText("" + score, 425, 25);  //得分      
    }      
    //初始化         
    $(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();      
              
    });         
       
        
</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>       
        <img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png">       
       </body>        
</html>

第八回讲完，整个游戏功能的基本已经做出来了。

到这里教程先告一段落先。

其实整个游戏其实还可以继续完善，比如说蘑菇被碰到后颤抖几下、碰撞声音、加入游戏帧数、加入关数、不同的关数、不同的动物和奖品、难度。。等等

假如后面有空的话我再继续完善这个游戏

原文链接：http://www.html5china.com/course/20110101_1500.html

【编辑推荐】