html5 小游戏

搜索
您当前位置：首页 > 文章中心 > HTML5+CSS3 > HTML5
【HTML5】
下载
新闻
文章
代码是学习了一个老外Jason Croucher博客里的一个小游戏

代码是学习了一个老外Jason Croucher博客里的一个小游戏：
用蘑菇顶住熊不给落地，熊碰撞完顶部的奖品为赢。顶部的奖品有3种:叶子、鲜花、橡子。
<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8 />
    <title>蘑菇动起来</title>
    <script type="text/javascript" src="images/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" >
    //公用 定义一个游戏物体戏对象
    function GameObject(img){
        this.x = 0;
        this.y = 0;
        this.image = img;
    }
    //公用 定义一个图片对象
    function set_img(src){
        var b = new Image();
        b.src = src ;
        return b;
    }
    //全局变量
    var backgroundForestImg = set_img("images/forest1.jpg");//森林背景图
    var MushRoomImg = set_img("images/MushRoom.png");//蘑菇
    var bearEyesClosedImg = set_img("images/bear_eyesclosed.png");//闭着眼睛的熊熊
    var ctx;//2d画布
    var screenWidth;//画布宽度
    var screenHeight;//画布高度
    var speed = 2;//不变常量,从新开始的速度
    var horizontalSpeed = speed;//水平速度,随着熊的碰撞会发生改变
    var verticalSpeed = -speed;	//垂直速度,开始肯定是要向上飘，所以要负数，随着熊的碰撞会发生改变
    var bearAngle = 2;//熊旋转的速度
    var gameRunning = false;//游戏运行状态
    var gameloopId;//记住循环的变量
    var lives=3;//3条生命数
    var livesImages = [];//生命图片数组
        //生命图片因为只有6个，所以最多只能6个
        for(var x=0; x<6; x++){
            livesImages[x] = set_img("images/lives" + x + ".png");
        }
    var score = 0;//分数
    var scoreImg = set_img("images/score.png");//分数板

    //定义蘑菇MushRoom 继承游戏对象GameObject
    var MushRoom = new GameObject(MushRoomImg);//游戏对象GameObject
    //定义熊实例
    var animal = new GameObject(bearEyesClosedImg);
        animal.angle = 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();
        //描绘生命条
        ctx.drawImage(livesImages[lives], 0, 0);
        //绘制分数板
        ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);
        ctx.font = "12pt Arial";
        ctx.fillText("" + score, 425, 25);
        //绘制熊
        //改变移动动物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 HasAnimalHitEdge(){
        if(animal.y<0){
            //熊碰到上边边界
            verticalSpeed = -verticalSpeed;
        }else if(animal.x>screenWidth - animal.image.width){
            //熊碰到右边边界
            if(horizontalSpeed > 0)//假如向右移动
                horizontalSpeed =-horizontalSpeed;//改变水平速度方向
        }else if(animal.x<-10){
            //熊碰到左边边界
            if(horizontalSpeed < 0)//假如向左移动
                horizontalSpeed = -horizontalSpeed;//改变水平速度方向
        }else 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();
            }else{
                GameOver();
            }
        }
    }
    //检测2个物体是否碰撞
    function CheckIntersect(object1, object2, overlap) {
        //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;//改变垂直速度。也即动物向上移动
        }
    }
    //定义奖品数组Prizes和对象Prize，继承游戏对象GameObject
    var prizes = [];
    function Prize() {}
    Prize.prototype = new GameObject("");//继承游戏对象GameObject
    Prize.prototype.row = 0;//奖品行位置
    Prize.prototype.col = 0;//奖品列位置
    Prize.prototype.hit = false;//是否被撞过
    Prize.prototype.point = 0;//分数

    //创建奖品数组
    function InitPrizes(){
        var arr_img=[set_img("images/flower.png"),set_img("images/acorn.png"),set_img("images/leaf.png")];//奖品花\奖品橡子\奖品叶子
        var arr_point=[3,2,1]; //奖分
        for(var x=0; x<3; x++){
            for(var y=0; y<23; y++){
                prize = new Prize();
                prize.image = arr_img[x];
                prize.point = arr_point[x];
                prize.row = x;
                prize.col = y;
                prize.x = 20 * prize.col + 10;//x轴位置
                prize.y = 20 * prize.row + 40;//y轴位置
                prizes.push(prize);//装入奖品数组，用来描绘
            }
        }
    }
    //绘制奖品，把奖品显示在画布上
    function DrawPrizes(){
        var b = true;//判断是否全部奖品被撞击
        for(var x=0; x<prizes.length; x++){
            currentPrize = prizes[x];
            //假如没有被撞击，则描绘
            if(!currentPrize.hit){
                ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);
                b = false;
            }
        }
        if(b){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 ToggleGameplay(){
        gameRunning = !gameRunning;
        if(gameRunning){
            $("#BtnImgStart").hide();
            gameloopId = setInterval(GameLoop, 10);
        }else{
            clearInterval(gameloopId);
        }
    }
    //结束游戏
    function GameOver(){
        gameRunning = false;
        clearInterval(gameloopId);
        alert("游戏结束!");
    }
    //初始化
    $(window).ready(function(){
        $("#container").mousemove(function(e){
            MushRoom.x = e.pageX - (MushRoom.image.width/2);//鼠标移动则蘑菇跟着移动
        });
        $("#BtnImgStart").click(function (){
            ToggleGameplay();//开始按钮
        });
        backgroundForestImg.onload = function(){GameLoop()};
        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; 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; display: block; " src="./images/START-Button.png">
</body>
</html>