HTML5 game Development Summary

最新推荐文章于 2025-11-23 16:56:34 发布

转载最新推荐文章于 2025-11-23 16:56:34 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JoannaQ/archive/2012/09/12/2681309.html

文章标签：

#javascript #ViewUI

本文分享了一款HTML5游戏的开发经验，详细介绍了游戏对象模块的建立与实例化，包括蘑菇、熊和奖品等角色的特性设定。游戏架构解析及碰撞检测机制，如小熊与边界、蘑菇和奖品的碰撞逻辑，为初学者提供了实用的代码示例。

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