zoukankan      html  css  js  c++  java
  • HTML5 game Development Summary

    最近跟着html5中文网的教程写了个HTML5的游戏,做个小结啦!先给个游戏截图

    一、建立的对象模块

    该部分包含游戏中各个对象的建立和实例化

    1、公用的游戏对象(public Object)部分——其他对象均继承Inherit该对象

    function GameObject()       
    {       
        this.x = 0;//x 坐标      
        this.y = 0;//y 坐标      
        this.image = null; //图片      
    }  

    2、蘑菇对象

    function Mushroom() {};       
    Mushroom.prototype = new GameObject();
    var mushroom = new Mushroom(); //蘑菇实例化

    3、熊对象——加一个angle属性,表示熊的选择角度

    function Animal() {};     
    Animal.prototype = new GameObject();
    Animal.prototype.angle = 0;//旋转的角度,(用来改变熊的旋转速度) 
    //定义熊实例      
    var animal = new Animal(); 

    4、奖品对象——加了四个属性

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

    同时定义了一个奖品数组(因为奖品比较多)

    var prizes = new Array();

    此时奖品的初始化也单独写了一个function实现(共三行、每行23个奖品,也就是实例化了69个奖品对象,(⊙o⊙))

        function InitPrizes()
        {
            var count=0;
            for(var x=0; x<3; x++)
            {
                for(var y=0; y<23; y++)
                {
                    prize = new Prize();
                    if(x==0)
                        prize.image = flowerImg;//flower in 1 row
                         prize.point = 3;
                    if(x==1)
                        prize.image = acornImg;//acorn in 2 row
                        prize.point = 2;
                    if(x==2)
                        prize.image = leafImg;//leaf in 3 row
                        prize.point = 2;
                    prize.row = x;
                    prize.col = y;
                    prize.x = 20 * prize.col + 10;
                    prize.y = 30 * prize.row + 40;
                    //撞到奖品数组,用来描绘
                    prizes[count] = prize;
                    count++;
                }
            }
        }

    5、其他

    var lives=3;  //生命个数
    var livesImages = new Array();//生命图片数组
    
    var score = 0;  //得分

    二、整个游戏架构

    该游戏并不复杂,让我们从游戏开始执行分析,既从jQuery的$(window).ready(function(){});开头。

    三、碰撞检测部分

    游戏中检测了三个碰撞: 小熊和边界HasAnimalHitEdge()、小熊和蘑菇HasAnimalHitMushroom()、小熊和奖品HasAnimalHitPrize()

    其中小熊和边界HasAnimalHitEdge()单独检测,其他两个通过调用一个通用的检测函数CheckIntersect()来判断是否碰撞

    1、小熊和边界HasAnimalHitEdge()

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

    小熊碰到下边界的时候比较复杂一点,必须改变其垂直方向为相反方向,还必须判断如果没有碰撞既游戏小熊生命减少一次,并重新开始游戏

    2、通用的检测函数CheckIntersect()

    其基本原理如图所示,如果发生碰撞返回true,否则返回false

    unction CheckIntersect(object1, object2, 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;   
    }  

    3.小熊和蘑菇碰撞

    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;  //改变垂直速度。也即动物向上移动     
        }   
    }  

    原理如图所示

    注解:我有点不是很明白这个判断条件,为什么这样判断呢??????

    4. 小熊和奖品碰撞

    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;   //熊反弹下沉 
                }   
            }   
        }   
    } 
     
     


  • 相关阅读:
    Java Web 网络留言板2 JDBC数据源 (连接池技术)
    Java Web 网络留言板3 CommonsDbUtils
    Java Web ConnectionPool (连接池技术)
    Java Web 网络留言板
    Java Web JDBC数据源
    Java Web CommonsUtils (数据库连接方法)
    Servlet 起源
    Hibernate EntityManager
    Hibernate Annotation (Hibernate 注解)
    wpf控件设计时支持(1)
  • 原文地址:https://www.cnblogs.com/JoannaQ/p/2681309.html
Copyright © 2011-2022 走看看