html绘制水管,html5 canvas-接水管小游戏_游戏教程_小游戏源码,蚂蚁社区-严谨,有原则的开源社区...

var Box = function(center , style , Gateway , angle , coordinate){

this.center = center;

this.style = style;

this.angle = angle;

this.endangle = angle;

this.Gateway = Gateway;

this.coordinate = coordinate;

}

Box.prototype = {

constructor:Box,

draw:function(){

this.setHole();

if(this.angle!==this.endangle){

canclick = false;

this.rotate();

}

var ext = [

{x:0,y:-boxWidth/2},

{x:boxWidth/2,y:0},

{x:0,y:boxWidth/2},

{x:-boxWidth/2,y:0},

]

ctx.save();

ctx.translate(this.center.x , this.center.y);

ctx.rotate(this.angle);

//画管道

switch(this.style){

case 0:break;

case 1:ctx.drawImage(document.getElementById("pipe1") , -boxWidth/2 , -boxWidth/2 , boxWidth , boxWidth);

break;

case 2:ctx.drawImage(document.getElementById("pipe2") , -boxWidth/2 , -boxWidth/2 , boxWidth , boxWidth);

break;

case 3:ctx.drawImage(document.getElementById("start") , -boxWidth/2 , -boxWidth/2 , boxWidth , boxWidth);

break;

}

ctx.restore();

},

rotate:function(){

if(Math.abs(this.endangle-this.angle)<=0.01){

canclick = true;

this.endangle = this.endangle>=2*Math.PI?0:this.endangle;

this.angle = this.endangle;

if(this.style===3){

var result = connectPipes();

if(result){

// alert('成功连通')

connectSuccess = true;

}

else {

alert("游戏失败")

window.location.reload();

}

}

}

else {

this.angle += (this.endangle-this.angle)*0.2;

}

},

setHole:function(){

if(this.style===1){

var zl = this.endangle/(0.5*Math.PI);

var initHole1 = 0 , initHole2 = 2;

this.inHole = (initHole1+zl)>=4?((initHole1+zl)-4):(initHole1+zl);

this.outHole = (initHole2+zl)>=4?((initHole2+zl)-4):(initHole2+zl);

}

else if(this.style===2){

var zl = this.endangle/(0.5*Math.PI);

var initHole1 = 1 , initHole2 = 2;

this.inHole = (initHole1+zl)>=4?((initHole1+zl)-4):(initHole1+zl);

this.outHole = (initHole2+zl)>=4?((initHole2+zl)-4):(initHole2+zl);

}

}

}