一步一步学做游戏第七回：熊碰到奖品处理_H5之家

HTML5技术

一步一步学做游戏第七回：熊碰到奖品处理

字号+ 作者：admin 来源： 2014-11-16 21:26 我要评论( )

第七回主要讲熊撞到奖品之后，奖品消失预期达到的效果： http://www.html5china.com/html5games/mogu/index6.html 简单说下原理：给奖品加上一个存是否被撞过的属性hit，默认值为false。当奖品撞

第七回主要讲http://www.html5china.com/html5games/mogu/index6.html

简单说下原理：

给奖品加上一个存是否被撞过的属性

JavaScript Code复制内容到剪贴板

//定义奖品数组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;//是否被撞过

二、熊撞到奖品事件

JavaScript Code复制内容到剪贴板

//撞到奖品
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;
}
}
}
}

三、在描绘奖品函数中加如判断是否有被碰撞 if(!prize.hit) ，没被撞过，则

JavaScript Code复制内容到剪贴板

//撞到奖品

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;

            }

        }

    }

}

到此第七回的完整代码如下：

折叠展开XML/HTML Code复制内容到剪贴板

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>绘制奖品-html5中文网</title>



<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;//奖品列位置

    Prize.prototype.hit = false;//是否被撞过



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

        //检测熊碰撞奖品

        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";//奖品叶子



        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];

            //假如没有被撞击，则描绘

            if(!currentPrize.hit)

            {

                ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);

            }

        }

    }

    //撞到奖品

    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;

                }

            }

        }

    }

    //初始化

    $(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://bbs.html5china.com/read.php?tid=2

希望大家在其他地方引用的时候，注明引用来自html5中文网

--作者：深邃老马

-----------------逆水行舟，不进则退

　

分享到新浪微博分享到腾讯微博收藏

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章

如何一步一步用DDD设计一个电商网站（十二）—— 提交并生成订单 - Z

2017-02-01 16:01

如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化

2016-12-27 13:06

如何一步一步用DDD设计一个电商网站（八）—— 会员价的集成 - Zacha

2016-12-14 13:01

C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper

2016-08-04 17:00

网友点评

一步一步学做游戏 第七回：熊碰到奖品处理

一步一步学做游戏第七回：熊碰到奖品处理