【实例简介】

【实例截图】

【核心代码】

cnGame.init("canvas", { width:600, height: 500,bgColor:"rgba(0,0,0,1)"});//初始化框架

var cg=cnGame,input=cg.input,ctx=cg.context,Line=cg.shape.Line,Text=cg.shape.Text,Sprite=cg.Sprite,Polygon=cg.shape.Polygon,list=cg.spriteList;

var center=[cg.width/2,cg.height/2];//canvas中点

/*图片资源字典*/

var srcObj={

tenBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_tenBall.png",//十分球

twentyBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_twentyBall.png",//二十分球

thirdtyBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_thirdtyBall.png",//三十分球

sTenBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_sTenBall.png",//减十分球

sTwentyBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_sTwentyBall.png",//减二十分球

sThirdtyBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_sThirdtyBall.png"//减三十分球

}

/*小球种类*/

var ballKinds=[["tenBall",10],["twentyBall",20],["thirdtyBall",30],["sTenBall",-10],["sTwentyBall",-20],["sThirdtyBall",-30]];

/*小球对象*/

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

cg.core.extendProto(Ball,{

disappear:function(){//小球被选中消失

list.remove(this);

},

resetXY:function(){//根据Z改变x,y的位置和尺寸

var oriX=this.oriPos[0];

var oriY=this.oriPos[1];

var oriSize=this.oriSize;

this.scale=((center[0]+this.z)/center[0]);//相对于现时的scale

this.x=(oriX-center[0])*this.scale+center[0];

this.y=(oriY-center[1])*this.scale+center[1];

this.height=this.width=this.oriSize*this.scale;

this.speedZ=this.oriSpeedZ*this.scale;

if(this.z>1000){

this.disappear();

}

},

update:function(){

this.parent.prototype.update.call(this);

this.resetXY();

}

});

/*小球对象管理器*/

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

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

var ball=ballsArr[i];

ball.z+=ball.speedZ;

}

}

}

/*游戏对象*/

var gameObj=(function(){

var prePos;//鼠标上次的位置

var currentPos;//鼠标该次的位置

var circle;//圆对象

var hasClosed;

var closedLineSegsArr=[];//闭合轨迹组成线段的数组

var polygon;//多边形选中区域

var startTime;//倒计时开始时间

var isPosSame=function(){//判断是否和上一次的位置一样

return currentPos[0]==prePos[0]&&currentPos[1]==prePos[1];

};

/*倒计时*/

var countDown=function(countTime){//秒数形式传入

var now=Date.now();

startTime=startTime||now;

return Math.ceil(countTime-(now-startTime)/1000);//秒数形式返回

};

/*判断轨迹是否包含了圆*/

var isCover=function(lines,ball){

var ballCenter=[];

ballCenter[0]=ball.x+ball.width/2;

ballCenter[1]=ball.y+ball.height/2;

debugger;

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

var lLine=new Line({start:[ballCenter[0],ballCenter[1]],end:[0,ballCenter[1]],lineWidth:5});//左射线

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

if(lLine.isCross(lines[i])){

count++;

}

}

if(count%2==0){//不包含

return false;

}

return true;//包含

}

/*判断线段是否相连接*/

var isJoin=function(lineSeg1,lineSeg2){

return ((lineSeg1.end[0]==lineSeg2.start[0])&&(lineSeg1.end[1]==lineSeg2.start[1]));

}

/*重置线段*/

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

closedLineSegsArr.push(lines[m]);

}

}

/*返回轨迹是否闭合*/

var isClose=function(lines){

var hasClose=false;

for(var i=0;i

var l1=lines[i];

for(var j=i+2;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;

};

return {

/*初始化*/

initialize:function(){

var self=this;

this.score=0;

this.countDownTime=60;

this.scoreText=new Text({text:"Score:",x:30,y:40,style:"rgb(200,195,195)"});

this.scoreText.setOptions({font:"30px Calibri"});

list.add(this.scoreText);

this.timeText=new Text({text:"60",x:500,y:50,style:"#fff"});

this.timeText.setOptions({font:"60px Calibri"});

list.add(this.timeText);

currentPos=prePos=[input.mouse.x,input.mouse.y];

input.onMouseUp("left",function(){//松开鼠标左键时，如果是线段，则删除

var lines=list.get(function(elem){//获取线段集合

return elem instanceof Line;

});

if(isClose(lines)){//轨迹闭合了

var ballsArr=list.get(function(elem){

return elem instanceof Ball;

});

for(var i=0;i

var ball=ballsArr[i];

var ballCenter=[ball.x+ball.width/2,ball.y+ball.height/2];

if(polygon&&polygon.isInside(ballCenter)&&ball.z>-220){

ball.disappear();//小球消失

self.addScore(ball.score);

}

};

}

list.remove(function(elem){//线段消失

return elem instanceof Line;

});

list.remove(polygon);//多边形消失

hasClosed=false;

closedLineSegsArr=[];

});

},

/*得分*/

addScore:function(s){

this.score+=s;

},

/*更新*/

update:function(){

this.scoreText.setOptions({text:"Score:"+this.score});//设置分数内容

var timeLeft=countDown(this.countDownTime);//倒计时

this.timeText.setOptions({text:timeLeft});

if(timeLeft<=0){//倒计时结束，结束游戏

this.end();

return;

}

currentPos=[input.mouse.x,input.mouse.y];

if(!isPosSame()&&input.mouse.left_pressed){//如果和上次位置不一样并且按着鼠标左键，则生成线段

var newLineSeg=new Line({start:prePos,end:currentPos,lineWidth:5});

list.add(newLineSeg);

var lines=list.get(function(elem){//获取线段集合

return elem instanceof Line;

});

if(!hasClosed){

if(isClose(lines)){

var pointsArr=[];

for(var i=0,len=closedLineSegsArr.length;i

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

}

polygon=new Polygon({pointsArr:pointsArr,style:"rgba(241,46,8,0.5)"});

list.add(polygon);

}

}

}

ballsManager.createRandomBalls(Math.floor((Math.random()*4)));//随机生成小球

ballsManager.changeBallsPos();

prePos=currentPos;

},

/*游戏结束*/

end:function(){

cg.loop.end();

alert("Game over!Your score is:"+this.score);

}

};

})();

var beginText=new Text({text:"press Enter to start",x:100,y:200,style:"rgb(200,195,195)"});

beginText.setOptions({font:"50px Calibri"});

beginText.draw();

input.preventDefault("enter");

input.onKeyDown("enter",function(){

cnGame.loader.start(gameObj, { srcArray: srcObj });

});