【实例简介】
【实例截图】
【核心代码】
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]&¤tPos[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 });
});