$(function(){ $(window).resize(function(){ requestData(ludan); requestData2(ludan); }) requestData(ludan); requestData2(ludan); // 庄问路 $(".bankerask").click(function(){ var olddata =ludan; var requestdata=getLudanBanker(); clearInterval(askInterval); ask(requestdata,olddata) }) // 闲问路 $(".playerask").click(function(){ var olddata =ludan; var requestdata=getLudanPlayer(); clearInterval(askInterval); ask(requestdata,olddata) }) // 关闭结果 $(document).on("click",".result .box .off-btn",function(){ $(this).parents(".play .result").animate({"bottom":"-100%"},800,function(){ $(".play .result").remove(); }) }) // 弹窗问路 // 庄问路 $(".banker2").click(function(){ var olddata =ludan; var requestdata=getLudanBanker(); clearInterval(askInterval); ask(requestdata,olddata,2) }) // 闲问路 $(".player2").click(function(){ var olddata =ludan; var requestdata=getLudanPlayer(); clearInterval(askInterval); ask(requestdata,olddata,2) }) $(".play .canvas-box").click(function(){ $(".ludanbox").css({"visibility":"visible","opacity":1}); }) // 关闭弹窗 $(".off-btn").click(function(){ $(".ludanbox").css({"visibility":"hidden","opacity":0}); }) $(".enlarge-btn").click(function(){ var scale=$(".video-canvas").hasClass("scale") if(scale){ $(".video-canvas").removeClass("scale") }else{ $(".video-canvas").addClass("scale") } }) }) var getLudan = function (){ var ludan = false; var query = new Object(); query.game_id = $('#game_id').val(); query.boot_id = $('#boot_dt_id').val(); //query.reform = 1; // 调整数据结构传参,防止显示爆格 $.ajax({ url:'/index/waybill', data:query, dataType:"json", type:"POST", async:false, success:function(data){ ludan = data } }); return ludan; } //庄问路 var getLudanBanker = function(){ var next = new Object; next.game_id = $('#game_id').val(); next.boot_id = $('#boot_dt_id').val(); next.forecast = 1; //next.reform = 1; // 调整数据结构传参,防止显示爆格 var returnData = false; $.ajax({ url:"/index/waybill", type:"POST", dataType:"JSON", data:next, async:false, success:function(data){ returnData = data; } }); return returnData; } //闲问路 var getLudanPlayer = function(){ var next = new Object; next.game_id = $('#game_id').val(); next.boot_id = $('#boot_dt_id').val(); //next.reform = 1; // 调整数据结构传参,防止显示爆格 next.forecast = 2; var returnData = false; $.ajax({ url:"/index/waybill", type:"POST", dataType:"JSON", data:next, async:false, success:function(data){ returnData = data; } }); return returnData; } // 画布数据入口 var dpr = window.devicePixelRatio function requestData(ludan,ask,askroad){ var ask=ask||false; var askroad=askroad||{ "askshowroad":false, "askbigRoad":false, "askbigEyeRoad":false, "askpathway":false, "askroach":false, }; var Vh=$(window).height(); var Vw=$(window).width(); var rows=6; var cols=0; // alert(Vh) if(Vh<=622){ cols=24; }else if(Vh<=736){ cols=16; }else{ cols=14; } var unit=Vw/cols*dpr; var Tabheight=unit*rows; var betH=$(".bet-box").outerHeight(), chipH=$(".chip-box").outerHeight(), headH=$(".head-box").outerHeight(), Tabwidth=$(".canvas-box").width()*dpr, videoH=Vh-Tabheight/dpr-betH-chipH-headH; $("#playtab").attr("width",Tabwidth); $("#playtab").attr("height",Tabheight); $("#playtab").css("width",Tabwidth/dpr); $("#playtab").css("height",Tabheight/dpr); // 视频自适应 $(".video-box").height(videoH) CanvasTable("#playtab",unit,rows,cols,ludan,ask,askroad) } function requestData2(ludan,ask,askroad){ var ask=ask||false; var askroad=askroad||{ "askshowroad":false, "askbigRoad":false, "askbigEyeRoad":false, "askpathway":false, "askroach":false, }; var width=$(".ludanbox .box .canvas").width()*dpr; CanvasTable2("#canvas1",width,ludan,ask,askroad); CanvasTable2("#canvas2",width,ludan,ask,askroad); } // 判断游戏类型 var gameId=$('#game_id').val(); // 路单数据分布1 function CanvasTable(Id,unit,rows,cols,ludan,ask,askroad){ var ctb=$(Id)[0].getContext('2d'), width=unit*cols, height=unit*rows; $(Id).attr("width",width); $(Id).attr("height",height); $(Id).css("width","100%"); $(Id).css("height",height/dpr); Drawline(ctb,unit,rows,cols,width,height); if(ludan){ var showRoad=ludan.waybill.showRoad; var bigRoad=ludan.waybill.bigRoad; var bigEyeRoad=ludan.waybill.bigEyeRoad; var pathway=ludan.waybill.pathway; var roach=ludan.waybill.roach; if(showRoad!=''){ var roadType="showWay" RoadcutRoad(roadType,ctb,unit,showRoad,cols,ask,askroad.askshowroad); } if(bigRoad!=''){ if(bigRoad[0].result==3&&bigRoad[0].show_x==1&&bigRoad[0].show_y==1){ var start_x=7; BigPathTie(ctb,unit,start_x,bigRoad[0].tie_num) }else{ var roadType="bigWay"; RoadcutRoad(roadType,ctb,unit,bigRoad,cols,ask,askroad.askbigRoad); } } if(bigEyeRoad!=''){ var roadType="bigeyeWay" RoadcutRoad(roadType,ctb,unit,bigEyeRoad,cols,ask,askroad.askbigEyeRoad); }; if(pathway!=''){ var roadType="littlWay" RoadcutRoad(roadType,ctb,unit,pathway,cols,ask,askroad.askpathway); }; if(roach!=''){ var roadType="roachWay"; RoadcutRoad(roadType,ctb,unit,roach,cols,ask,askroad.askroach); }; } } // 路单数据分布2 function CanvasTable2(Id,width,ludan,ask,askroad){ var ctb=$(Id)[0].getContext('2d'); if(Id=="#canvas1"){ var rows=6,cols=21; var unit=width/21; }else if(Id=="#canvas2"){ var rows=12,cols=32; var unit=width/32; } $(Id).attr("width",unit*cols) $(Id).attr("height",unit*rows) $(Id).css("width",unit*cols/dpr); $(Id).css("height",unit*rows/dpr); Drawline2(ctb,unit,rows,cols) if(ludan){ var showRoad=ludan.waybill.showRoad; var bigRoad=ludan.waybill.bigRoad; var bigEyeRoad=ludan.waybill.bigEyeRoad; var pathway=ludan.waybill.pathway; var roach=ludan.waybill.roach; if(Id=="#canvas1"){ if(showRoad!=''){ var roadType="showWay" RoadcutRoad2(roadType,ctb,unit,showRoad,cols,ask,askroad.askshowroad); } }else{ if(bigRoad!=''){ if(bigRoad[0].result==3&&bigRoad[0].show_x==1&&bigRoad[0].show_y==1){ var start_x=0; BigPathTie(ctb,unit*2,start_x,bigRoad[0].tie_num) }else{ var roadType="bigWay"; RoadcutRoad2(roadType,ctb,unit,bigRoad,cols,ask,askroad.askbigRoad); } } if(bigEyeRoad!=''){ var roadType="bigeyeWay" RoadcutRoad2(roadType,ctb,unit,bigEyeRoad,cols,ask,askroad.askbigEyeRoad); }; if(pathway!=''){ var roadType="littlWay" RoadcutRoad2(roadType,ctb,unit,pathway,cols,ask,askroad.askpathway); }; if(roach!=''){ var roadType="roachWay"; RoadcutRoad2(roadType,ctb,unit,roach,cols,ask,askroad.askroach); }; } } } // 前端路单数据截取 一分布 function RoadcutRoad(roadType,ctb,unit,roadData,cols,ask,askroad){ var L=roadData.length; var new_roadData=[]; var Tab=0; if(roadType=="showWay"){ if(ask&&askroad){ Tab=7; }else{ Tab=6; } }else if(roadType=="bigeyeWay"){ if(ask&&askroad){ Tab=(cols-7)*4; }else{ Tab=(cols-7)*4-1; } }else{ if(ask&&askroad){ Tab=(cols-7)*2; }else{ Tab=(cols-7)*2-1; } } var start_x=7.25; if(L>=1){ var last_x=roadData[L-1].show_x if(last_x>Tab){ var cut=last_x-Tab $.each(roadData,function(i,v){ if(v.show_x>cut){ new_roadData.push(v) } }) }else{ new_roadData=roadData; cut=0; } }else{ new_roadData=roadData; cut=0; } $.each(new_roadData,function(i,v){ if(roadType=="roachWay"){ start_x=7.25+(cols-7)/2 CockrochPath(ctb,unit,start_x,cols,v.show_x-cut,v.show_y,v.result) }else if(roadType=="littlWay"){ LittlePath(ctb,unit,start_x,v.show_x-cut,v.show_y,v.result) }else if(roadType=="bigeyeWay"){ BigeyePath(ctb,unit,start_x,v.show_x-cut,v.show_y,v.result) }else if(roadType=="showWay"){ SoloPath(ctb,unit,v.show_x-cut,v.show_y,v.result,v.pair) }else if(roadType=="bigWay"){ BigPath(ctb,unit,start_x,v.show_x-cut,v.show_y,v.result,v.tie_num,v.pair) } }) } // 前端路单数据截取 二分布 function RoadcutRoad2(roadType,ctb,unit,roadData,cols,ask,askroad){ var L=roadData.length; var new_roadData=[]; var Tab=0; if(roadType=="bigeyeWay"){ if(ask&&askroad){ Tab=cols*2; }else{ Tab=cols*2-1; } }else{ if(ask&&askroad){ Tab=cols; }else{ Tab=cols-1; } } var start_x=0.25; if(L>=1){ var last_x=roadData[L-1].show_x if(last_x>Tab){ var cut=last_x-Tab $.each(roadData,function(i,v){ if(v.show_x>cut){ new_roadData.push(v) } }) }else{ new_roadData=roadData; cut=0; } }else{ new_roadData=roadData; cut=0; } $.each(new_roadData,function(i,v){ if(roadType=="roachWay"){ start_x=cols/4+0.25 CockrochPath(ctb,unit*2,start_x,cols,v.show_x-cut,v.show_y,v.result) }else if(roadType=="littlWay"){ LittlePath(ctb,unit*2,start_x,v.show_x-cut,v.show_y,v.result) }else if(roadType=="bigeyeWay"){ BigeyePath(ctb,unit*2,start_x,v.show_x-cut,v.show_y,v.result) }else if(roadType=="showWay"){ SoloPath(ctb,unit,v.show_x-cut,v.show_y,v.result,v.pair) }else if(roadType=="bigWay"){ BigPath(ctb,unit*2,start_x,v.show_x-cut,v.show_y,v.result,v.tie_num,v.pair) } }) } // 画线条 一分布 function Drawline(ctb,unit,rows,cols,width,height){ ctb.lineWidth = 1;//线条宽度 ctb.strokeStyle = "#777";//线条颜色 ctb.beginPath(); ctb.moveTo(0.5, 0); ctb.lineTo(0.5, height); for (var i = 1; i <= cols; i++) { ctb.moveTo(unit*i,0); ctb.lineTo(unit*i,height); } for (var l = 0; l <= rows; l++) { ctb.moveTo(0,l*unit); ctb.lineTo(width,l*unit); } for (var j = 1; j <= rows*2; j++) { ctb.moveTo(7*unit,unit/2*j); ctb.lineTo(width,unit/2*j); } for (var k = 1; k <= (cols-7)*2; k++) { ctb.moveTo(unit*(7+0.5*k),0); ctb.lineTo(unit*(7+0.5*k),height); } ctb.closePath() ctb.stroke(); } // 画线条 二分布 function Drawline2(ctb,Unit,row,col){ ctb.lineWidth = 1;//线条宽度 ctb.strokeStyle = "#999";//线条颜色 ctb.beginPath(); ctb.moveTo(0.5, 0); ctb.lineTo(0.5, Unit*col); for (var i = 1; i <= col; i++) { ctb.moveTo(Unit*i,0); ctb.lineTo(Unit*i,Unit*col); } ctb.closePath() ctb.stroke(); ctb.beginPath(); ctb.moveTo(0, 0.5); ctb.lineTo(Unit*col, 0.5); for (var j = 1; j <= row; j++) { ctb.moveTo(0,Unit*j); ctb.lineTo(Unit*col,Unit*j); } ctb.closePath() ctb.stroke(); } // 画线条 function Drawline2(ctb,Unit,row,col){ ctb.lineWidth = 1;//线条宽度 ctb.strokeStyle = "#999";//线条颜色 ctb.beginPath(); ctb.moveTo(0.5, 0); ctb.lineTo(0.5, Unit*col); for (var i = 1; i <= col; i++) { ctb.moveTo(Unit*i,0); ctb.lineTo(Unit*i,Unit*col); } ctb.closePath() ctb.stroke(); ctb.beginPath(); ctb.moveTo(0, 0.5); ctb.lineTo(Unit*col, 0.5); for (var j = 1; j <= row; j++) { ctb.moveTo(0,Unit*j); ctb.lineTo(Unit*col,Unit*j); } ctb.closePath() ctb.stroke(); } // 局数 数,文字X坐标,文字Y坐标,文字大小风格 function Font_tie(ctb,num,Font_x,Font_y,fontsize,color){ if(num!==undefined){ ctb.beginPath(); ctb.font=fontsize; ctb.textAlign = 'center'; ctb.textBaseline = 'middle'; ctb.fillStyle =color||"#ddd"; ctb.fillText(num,Font_x,Font_y); ctb.stroke(); } } function SoloPath(ctb,unit,x,y,type,corners){ ctb.beginPath(); ctb.lineWidth = 0.5; ctb.strokeStyle = "#fff"; var radius=unit/2||0; if(gameId==1){ if(type==1){ var color='#b20a00', fonts=lang.banker; }else if(type==2){ var color='#0543bc', fonts=lang.player; }else if(type==3){ var color='#1d8701', fonts=lang.tie; } }else if(gameId==2){ if(type==1){ var color='#b20a00', fonts=lang.dragon; }else if(type==2){ var color='#0543bc', fonts=lang.tiger; }else if(type==3){ var color='#1d8701', fonts=lang.tie; } } ctb.arc(radius+unit*(x-1), radius+unit*(y-1), unit*0.44, 0, Math.PI * 2); ctb.fillStyle=color; ctb.fill(); ctb.font=unit*0.5+"px Arial"; ctb.fillStyle ="#fff" ; // 颜色 ctb.textAlign = 'center'; ctb.textBaseline = 'middle'; ctb.fillText(fonts,radius+unit*(x-1),radius+unit*(y-1)); ctb.stroke(); var corner_xy=unit/3.4 if(corners==1){ corner(ctb,unit,x,y,corner_xy,'#ff2202'); }else if(corners==2){ corner(ctb,unit,x,y,-corner_xy,'#0337ff'); }else if(corners==3){ corner(ctb,unit,x,y,corner_xy,'#ff2202'); corner(ctb,unit,x,y,-corner_xy,'#0337ff'); } } //角标 function corner(ctb,unit,x,y,corner_xy,corner_color){ var radius=unit/2 ctb.beginPath(); ctb.lineWidth = 0.04*unit; ctb.strokeStyle = "#fff"; ctb.arc(radius+unit*(x-1)-corner_xy, radius+unit*(y-1)-corner_xy, unit*0.14, 0, Math.PI * 2); ctb.fillStyle=corner_color; ctb.fill(); ctb.stroke(); } // 大路 function BigPath(ctb,unit,start_x,x,y,type,slash,corners){ ctb.beginPath(); ctb.lineWidth = unit*0.05; var radius=unit/2 var thisunit=radius/2 if(type==2){ var color="#0543bc"; }else if(type==1){ var color="#b20a00" } ctb.strokeStyle = color; ctb.arc(radius*(x-1)+unit*start_x,radius*(y-0.5), radius*0.4, 0, Math.PI * 2); ctb.closePath() ctb.stroke(); if(slash!=0){ ctb.beginPath(); linewidth=unit*0.18; ctb.lineWidth = thisunit*0.18;//线条宽度 ctb.lineCap = "round"; ctb.strokeStyle = "#3EA542";//线条颜色 ctb.moveTo(radius*(x-1)-linewidth+unit*start_x,radius*(y-0.5)+linewidth); ctb.lineTo(radius*(x-1)+linewidth+unit*start_x,radius*(y-0.5)-linewidth); ctb.stroke(); Font_tie(ctb,slash,radius*(x-1)+unit*start_x,radius*(y-0.5),radius*0.55+"px Arial","#000"); } var corner_xy=radius/3.4 if(corners==1){ corner2(ctb,radius,start_x,x,y,corner_xy,'#ff2202'); }else if(corners==2){ corner2(ctb,radius,start_x,x,y,-corner_xy,'#0337ff'); }else if(corners==3){ corner2(ctb,radius,start_x,x,y,corner_xy,'#ff2202'); corner2(ctb,radius,start_x,x,y,-corner_xy,'#0337ff'); } } //大路角标 function corner2(ctb,unit,start_x,x,y,corner_xy,corner_color){ var radius=unit/2 ctb.beginPath(); ctb.lineWidth = 0.04*unit; ctb.strokeStyle = "#fff"; ctb.arc(unit*start_x*2+unit*(x-1)-corner_xy, radius+unit*(y-1)-corner_xy, unit*0.14, 0, Math.PI * 2); ctb.fillStyle=corner_color; ctb.fill(); ctb.stroke(); } // ctb,unit,cols,bigRoad[0].tie_num // 大路 第一局 和 function BigPathTie(ctb,unit,start_x,order){ console.log(order) var thisunit=unit/2 ctb.beginPath(); ctb.lineWidth = thisunit*0.1;//线条宽度 ctb.strokeStyle = "#3EA542";//线条颜色 ctb.lineCap = "round"; ctb.moveTo(thisunit*0.15+unit*start_x,thisunit/2); ctb.lineTo(thisunit*0.85+unit*start_x,thisunit/2); ctb.stroke(); Font_tie(ctb,order,thisunit/2+unit*start_x, thisunit/2,thisunit*0.55+"px Arial","#000"); } // 大眼路 function BigeyePath(ctb,unit,start_x,x,y,type){ ctb.beginPath(); var radius=unit/2, thisunit=radius/2 ctb.lineWidth = thisunit*0.18; if(type==2){ var color="#0543bc"; }else if(type==1){ var color="#b20a00" } ctb.strokeStyle = color; ctb.arc(thisunit*(x-1.5)+unit*start_x,thisunit/2+thisunit*(y-1)+unit*3, thisunit*0.35, 0, Math.PI * 2); ctb.closePath() ctb.stroke(); } //小路 function LittlePath(ctb,unit,start_x,x,y,type){ ctb.beginPath(); ctb.lineWidth = 0; var radius=unit/2, thisunit=radius/2 if(type==2){ var color="#0543bc"; }else if(type==1){ var color="#b20a00" } ctb.strokeStyle = color; ctb.fillStyle=color; ctb.arc(thisunit*(x-1.5)+unit*start_x,thisunit/2+thisunit*(y-1)+unit*4.5, thisunit*0.35, 0, Math.PI * 2); ctb.closePath() ctb.stroke(); ctb.fill(); } function CockrochPath(ctb,unit,start_x,cols,x,y,type){ var radius=unit/2, thisunit=radius/2, linewidth=radius*0.18; ctb.beginPath(); ctb.lineCap = "round"; ctb.lineWidth = thisunit*0.25;//线条宽度 if(type==2){ var color="#0543bc"; }else if(type==1){ var color="#b20a00" } ctb.strokeStyle = color; ctb.moveTo(thisunit*(x-1.5)-linewidth+unit*start_x,thisunit/2+thisunit*(y-1)+linewidth+unit*4.5); ctb.lineTo(thisunit*(x-1.5)+linewidth+unit*start_x,thisunit/2+thisunit*(y-1)-linewidth+unit*4.5); ctb.stroke(); } // 问路方法 var askInterval; function ask(newdata,olddata,type){ var nshowRoad=newdata.waybill.showRoad; var nbigEyeRoad=newdata.waybill.bigEyeRoad; var nbigRoad=newdata.waybill.bigRoad; var npathway=newdata.waybill.pathway; var nroach=newdata.waybill.roach; var oshowRoad=olddata.waybill.showRoad; var obigEyeRoad=olddata.waybill.bigEyeRoad; var obigRoad=olddata.waybill.bigRoad; var opathway=olddata.waybill.pathway; var oroach=olddata.waybill.roach; if(nshowRoad.length>0){ var n_s_last_x=nshowRoad[nshowRoad.length-1].show_x }else{ var n_s_last_x=0 } if(nbigEyeRoad.length>0){ var n_e_last_x=nbigEyeRoad[nbigEyeRoad.length-1].show_x }else{ var n_e_last_x=0 } if(nbigRoad.length>0){ var n_b_last_x=nbigRoad[nbigRoad.length-1].show_x }else{ var n_b_last_x=0 } if(npathway.length>0){ var n_p_last_x=npathway[npathway.length-1].show_x }else{ var n_p_last_x=0 } if(nroach.length>0){ var n_r_last_x=nroach[nroach.length-1].show_x }else{ var n_r_last_x=0 } if(oshowRoad.length>0){ var o_s_last_x=oshowRoad[oshowRoad.length-1].show_x }else{ var o_s_last_x=0 } if(obigEyeRoad.length>0){ var o_e_last_x=obigEyeRoad[obigEyeRoad.length-1].show_x }else{ var o_e_last_x=0 } if(obigRoad.length>0){ var o_b_last_x=obigRoad[obigRoad.length-1].show_x }else{ var o_b_last_x=0 } if(opathway.length>0){ var o_p_last_x=opathway[opathway.length-1].show_x }else{ var o_p_last_x=0 } if(oroach.length>0){ var o_r_last_x=oroach[oroach.length-1].show_x }else{ var o_r_last_x=0 } var askroad={ "askshowroad":false, "askbigRoad":false, "askbigEyeRoad":false, "askpathway":false, "askroach":false, }; if(n_s_last_x>o_s_last_x){ askroad.askshowroad=true; }else{ askroad.askshowroad=false; } if(n_e_last_x>o_e_last_x){ askroad.askbigEyeRoad=true; }else{ askroad.askbigEyeRoad=false; } if(n_b_last_x>o_b_last_x){ askroad.askbigRoad=true; }else{ askroad.askbigRoad=false; } if(n_p_last_x>o_p_last_x){ askroad.askpathway=true; }else{ askroad.askpathway=false; } if(n_r_last_x>o_r_last_x){ askroad.askroach=true; }else{ askroad.askroach=false; } var time=8; askInterval=setInterval(function(){ time--; var num=time%2; if(time<0){ clearInterval(askInterval); }else{ if(type==2){ if(num==1){ requestData2(newdata,true,askroad) }else{ requestData2(olddata,true) } }else{ if(num==1){ requestData(newdata,true,askroad) }else{ requestData(olddata,true) } } } },200); }