HTML5圈泡泡游戏发布（详细原理分析以及源码）

var Ball = function (opt)

{

this.parent.call(this, opt);

this.oriPos = [this.x + this.width / 2, this.y + this.height / 2];

this.oriSize = opt.size;

this.z = opt.z || 0;

this.score = opt.score || 0;

this.oriSpeedZ = 4 + Math.random() * 4;

this.scale = 1;

this.resetXY();

}

cg.core.inherit(Ball, Sprite);

var ballsManager =

{

createDuration : 200,

ballSize : 30,

lastCreateTime : Date.now(),

/*    随机生成小球    */

createRandomBalls : function (num)

{

var now = Date.now();

if (now - this.lastCreateTime > this.createDuration)

{

for (var i = 0; i < num; i++)

{

var x = Math.random() * cg.width;

var y = Math.random() * cg.height;

var randomKind = ballKinds[Math.floor(Math.random() * 6)]; //随机获得的小球种类和分值

                var newBall = new Ball(

{

x : x,

y : y,

size : this.ballSize,

z : -280,

score : randomKind[1]

}

);

newBall.setCurrentImage(srcObj[randomKind[0]]); //设置图片

                list.add(newBall);

}

this.lastCreateTime = now;

}

},

/*    改变小球位置    */

changeBallsPos : function ()

{

var ballsArr = list.get(function (elem)

{

return elem instanceof Ball;

}

);

for (var i = 0, len = ballsArr.length; i < len; i++)

{

var ball = ballsArr[i];

ball.z += ball.speedZ;

}

}

}

var line = function (options)

{

if (!(this instanceof arguments.callee))

{

return new arguments.callee(options);

}

this.init(options);

}

line.prototype =

{

/**

*初始化

**/

init : function (options)

{

this.start = [0, 0];

this.end = [0, 0];

this.style = "red";

this.lineWidth = 1;

this.context = cg.context;

options = options || {};

cg.core.extend(this, options);

},

var isClose = function (lines)

{

var hasClose = false;

for (var i = 0; i < lines.length; i++)

{

var l1 = lines[i];

for (var j = i + 2; j < lines.length; j++)

{

var l2 = lines[j];

if (l2)

{

var point = l1.isCross(l2); //交点坐标

                if (point)

{ //非连接的相交

                    resetLineSegs(lines, i, j, point);

hasClosed = true;

return true;

}

}

}

}

return false;

};

var resetLineSegs = function (lines, i, j, point)

{

lines[i].end[0] = point[0];

lines[i].end[1] = point[1];

lines[i + 1].start[0] = point[0];

lines[i + 1].start[1] = point[1];

lines[j].start[0] = point[0];

lines[j].start[1] = point[1];

lines[j - 1].end[0] = point[0];

lines[j - 1].end[1] = point[1];

for (var m = i + 1; m < j; m++)

{

closedLineSegsArr.push(lines[m]);

}

}

{

pointsArr.push([closedLineSegsArr[i].start[0], closedLineSegsArr[i].start[1]]);

}

polygon = new Polygon(

{

pointsArr : pointsArr,

style : "rgba(241,46,8,0.5)"

}

);

*判断某点是否在多边形内(射线法)

**/

isInside : function (point)

{

var lines = this.getLineSegs();

var count = 0; //相交的边的数量

    var lLine = new Line(

{

start : [point[0], point[1]],

end : [-9999, point[1]]

}

); //左射线

    var crossPointArr = []; //相交的点的数组

    for (var i = 0, len = lines.length; i < len; i++)

{

var crossPoint = lLine.isCross(lines[i]);

if (crossPoint)

{

for (var j = 0, len2 = crossPointArr.length; j < len2; j++)

{

//如果交点和之前的交点相同，即表明交点为多边形的顶点

                if (crossPointArr[j][0] == crossPoint[0] && crossPointArr[j][1] == crossPoint[1])

{

break;

}

}

if (j == len2)

{

crossPointArr.push(crossPoint);

count++;

}

}

}

if (count % 2 == 0)

{ //不包含

        return false;

}

return true; //包含

},