这段js代码不知道为什么经常绘制失败

Question

#cs{border:black solid 1px;}

var pokers;//5个牌数组 var btns; var panel0;//发牌方位置 var panel1;//左方位置 var panel2;//游戏者位置 var panel3;//右方位置 var panel4;//牌堆位置 var DealerNum=1;//操作者序号 var DealingNum=0; var T; betweenNum=function(a,b){ return Math.round(a+Math.random()*(b-a)); } var can=document.getElementById("cs"); var ctx=can.getContext("2d"); poker=function(id,num,power,str,color){ this.id=id;this.num=num;this.power=power; this.str=str;this.color=color; } //*必须有赋值 poker.prototype={ constructor:poker ,id:0 ,num:0 ,power:0 ,str:null ,color:null ,x:2 ,y:2 ,width:100 ,height:140 ,isSelect:false ,isHide:false ,draw:function(ctx){ if(this.isHide){ ctx.fillStyle="#a1a1e1"; ctx.fillRect(this.x,this.y,this.width,this.height); ctx.fillStyle=this.color; ctx.beginPath(); ctx.moveTo(this.x+2,this.y+2); ctx.lineTo(this.x+2,this.y+this.height-2); ctx.lineTo(this.x+this.width-2,this.y+2); ctx.lineTo(this.x+this.width-2,this.y+this.height-2); ctx.lineTo(this.x+2,this.y+2); ctx.closePath(); ctx.stroke(); } else{ ctx.fillStyle="#e1e1e1"; ctx.fillRect(this.x,this.y,this.width,this.height); ctx.fillStyle=this.color; ctx.font="20px Arial"; if(this.num){ctx.fillText(""+this.num,this.x+6,this.y+21);} ctx.fillText(this.str.charAt(0),this.x+3,this.y+45); ctx.fillText(this.str.charAt(1),this.x+3,this.y+65); } ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.lineTo(this.x,this.y+this.height); ctx.lineTo(this.x+this.width,this.y+this.height); ctx.lineTo(this.x+this.width,this.y); ctx.lineTo(this.x,this.y); ctx.closePath(); ctx.stroke(); } } initpoker=function(){ pokers=[]; for(j=0;j<5;j++)pokers[j]=[]; pokers[0][0]=new poker(1,null,17,"大王","red"); pokers[0][1]=new poker(2,null,16,"小王","black"); for(i=1;i<53;i++){ id=i+2; if(i<14){num=i;str="黑桃";color="black"} if(i>=14&&i<27){num=i-13;str="红桃";color="red"} if(i>=27&&i<40){num=i-26;str="梅花";color="black"} if(i>=40){num=i-39;str="方片";color="red"} power=num; if(power<3)power=power+13; pokers[0][i+1]=new poker(id,num,power,str,color);/* if(pokers[0][i+1].num=1)pokers[0][i+1].power=14; if(pokers[0][i+1].num=2)pokers[0][i+1].power=15;*/ } } Panel=function(x,y,w,h){ this.x=x;this.y=y; this.width=w; this.height=h; } Panel.prototype={ constructor:Panel ,x:0 ,y:0 ,width:0 ,height:0 ,pokers:0 ,isX:true ,distance:6 ,isHide:false ,draw:function(ctx){ il=this.pokers.length*this.distance; for(i=0;i<this.pokers.length;i++){ if(this.isX){ this.pokers[i].x=this.x+(this.width-il-100)/2+i*this.distance; this.pokers[i].y=this.y+22; if(this.pokers[i].isSelect)this.pokers[i].y=this.y+22-20; }else{ this.pokers[i].x=this.x+24; this.pokers[i].y=this.y+(this.height-il-140)/2+i*this.distance; } this.pokers[i].isHide=this.isHide; this.pokers[i].draw(ctx); } return true; } ,_draw:function(ctx){ //扑克宽100 il=(this.width-100*this.pokers.length)/(this.pokers.length+1); for(i=0;i<this.pokers.length;i++){ this.pokers[i].x=il*i+this.x; this.pokers[i].y=22+this.y; this.pokers[i].draw(ctx); } } } panel0=new Panel(150,0,500,190); panel1=new Panel(0,200,150,400); panel2=new Panel(0,600,800,190); panel3=new Panel(650,200,150,400); panel4=new Panel(150,300,500,190); panel0.isX=true; panel2.isX=true; panel4.isX=true; panel1.isX=false; panel3.isX=false; panel2.distance=20; btn=function(x,y,str,fn){ this.x=x;this.y=y; this.str=str; this.onclick=fn; } btn.prototype={ constructor:btn ,x:0 ,y:0 ,width:150 ,height:50 ,fontSize:20 ,theFont:null ,str:"按钮" ,onclick:null } drawall=function(ctx){ ctx.clearRect(0,0,can.width,can.height); panel0.pokers=pokers[0]; panel1.pokers=pokers[1]; panel2.pokers=pokers[2]; panel3.pokers=pokers[3]; panel4.pokers=pokers[4]; panel0.draw(ctx)&&panel1.draw(ctx)&&panel2.draw(ctx)&&panel3.draw(ctx)&&panel4.draw(ctx); return true; oo=function(){ } } dda=function(){ alert("hh");} dealing=function(){ clearTimeout(T); if(pokers[0].length==3)return; //alert(pokers[0].length); if(DealerNum>3)DealerNum=1; r=betweenNum(0,pokers[0].length); pokers[DealerNum].splice(pokers[DealerNum].length,0,pokers[0][r]); pokers[0].splice(r,1); DealerNum++; //alert(pokers[DealerNum].length); while(!drawall(ctx)){};T=setTimeout(dealing,50); } initpoker(); dealing();

Answer 1

https://zhidao.baidu.com/question/553596536966070292.html