对于一些复杂或不规则的UI，我们可能无法通过组合其它组件的方式来实现，比如我们需要一个

  • 正六边形
  • 一个渐变的圆形进度条
  • 一个棋盘等。

当然，有时候我们可以使用图片来实现，但在一些需要动态交互的场景静态图片也是实现不了的，比如要实现一个手写输入面板，这时，我们就需要来自己绘制UI外观

几乎所有的UI系统都会提供一个自绘UI的接口，这个接口通常会提供一块2D画布Canvas，Canvas内部封装了一些基本绘制的API，开发者可以通过Canvas绘制各种自定义图形。在Flutter中，提供了一个CustomPaint 组件，它可以结合画笔CustomPainter来实现自定义图形绘制。

CustomPaint

我们看看CustomPaint构造函数：

  1. CustomPaint({
  2.   Key key,
  3.   this.painter, 
  4.   this.foregroundPainter,
  5.   this.size = Size.zero, 
  6.   this.isComplex = false, 
  7.   this.willChange = false, 
  8.   Widget child, //子节点，可以为空
  9. })
  • painter: 背景画笔，会显示在子节点后面;
  • foregroundPainter: 前景画笔，会显示在子节点前面
  • size：
    • 当child为null时，代表默认绘制区域大小
    • 如果有child则忽略此参数，画布尺寸则为child尺寸
    • 如果有child但是想指定画布为特定大小，可以使用SizeBox包裹CustomPaint实现。
  • isComplex：是否复杂的绘制，如果是，Flutter会应用一些缓存策略来减少重复渲染的开销。
  • willChange：和isComplex配合使用，当启用缓存时，该属性代表在下一帧中绘制是否会改变。

可以看到，绘制时我们需要提供前景或背景画笔，两者也可以同时提供。我们的画笔需要继承CustomPainter类，我们在画笔类中实现真正的绘制逻辑

注意

如果CustomPaint有子节点，为了避免子节点不必要的重绘并提高性能，通常情况下都会将子节点包裹在RepaintBoundary组件中，这样会在绘制时就会创建一个新的绘制层（Layer），其子组件将在新的绘制层（Layer）上绘制，而父组件将在原来Layer上绘制，也就是说RepaintBoundary 子组件的绘制将独立于父组件的绘制，RepaintBoundary会隔离其子节点和CustomPaint本身的绘制边界。示例如下：

  1. CustomPaint(
  2.   size: Size(300, 300), //指定画布大小
  3.   painter: MyPainter(),
  4.   child: RepaintBoundary(child:...)), 
  5. )

CustomPainter

CustomPainter中提定义了一个虚函数paint：

  1. void paint(Canvas canvas, Size size);

paint有两个参数:

  • Canvas：一个画布，包括各种绘制方法，我们列出一下常用的方法：
    • drawLine 画线
    • drawPoint 画点
    • drawPath 画路径
    • drawImage 画图像
    • drawRect 画矩形
    • drawCircle 画圆
    • drawOval 画椭圆
    • drawArc 画圆弧
  • Size：当前绘制区域大小

画笔Paint

现在画布有了，我们最后还缺一个画笔，Flutter提供了Paint类来实现画笔。在Paint中，我们可以配置画笔的各种属性如粗细、颜色、样式等。如：

  1. var paint = Paint() //创建一个画笔并配置其属性
  2.   ..isAntiAlias = true //是否抗锯齿
  3.   ..style = PaintingStyle.fill //画笔样式：填充
  4.   ..color=Color(0x77cdb175);//画笔颜色

更多的配置属性读者可以参考Paint类定义。

示例：五子棋/盘

下面我们通过一个五子棋游戏中棋盘和棋子的绘制来演示自绘UI的过程，首先我们看一下我们的目标效果，如图所示：
自绘组件 （CustomPaint与Canvas） - 图1
代码：

  1. import 'package:flutter/material.dart';
  2. import 'dart:math';
  4. void main() => runApp(new MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.         debugShowCheckedModeBanner: true,
  11.         title: 'CustomPaintRoute',
  12.         theme: ThemeData(
  13.           primarySwatch: Colors.blue,
  14.         ),
  15.         home: Scaffold(
  16.           appBar: AppBar(title: Text("CustomPaintRoute")),
  17.           body: CustomPaintRoute(),
  18.         ));
  19.   }
  20. }
  23. class CustomPaintRoute extends StatelessWidget {
  24.   @override
  25.   Widget build(BuildContext context) {
  26.     return Center(
  27.       child: CustomPaint(
  28.         size: Size(300, 300), //指定画布大小
  29.         painter: MyPainter(),
  30.       ),
  31.     );
  32.   }
  33. }
  34. class MyPainter extends CustomPainter {
  35.   @override
  36.   void paint(Canvas canvas, Size size) {
  37.     double eWidth = size.width / 15;
  38.     double eHeight = size.height / 15;
  39.     //画棋盘背景
  40.     var paint = Paint()
  41.       ..isAntiAlias = true
  42.       ..style = PaintingStyle.fill //填充
  43.       ..color = Color(0x77cdb175); //背景为纸黄色
  44.     canvas.drawRect(Offset.zero & size, paint);
  45.     //画棋盘网格
  46.     paint
  47.       ..style = PaintingStyle.stroke //线
  48.       ..color = Colors.black87
  49.       ..strokeWidth = 1.0;
  50.     for (int i = 0; i <= 15; ++i) {
  51.       double dy = eHeight * i;
  52.       canvas.drawLine(Offset(0, dy), Offset(size.width, dy), paint);
  53.     }
  54.     for (int i = 0; i <= 15; ++i) {
  55.       double dx = eWidth * i;
  56.       canvas.drawLine(Offset(dx, 0), Offset(dx, size.height), paint);
  57.     }
  58.     //画一个黑子
  59.     paint
  60.       ..style = PaintingStyle.fill
  61.       ..color = Colors.black;
  62.     canvas.drawCircle(
  63.       Offset(size.width / 2 - eWidth / 2, size.height / 2 - eHeight / 2),
  64.       min(eWidth / 2, eHeight / 2) - 2,
  65.       paint,
  66.     );
  67.     //画一个白子
  68.     paint.color = Colors.white;
  69.     canvas.drawCircle(
  70.       Offset(size.width / 2 + eWidth / 2, size.height / 2 - eHeight / 2),
  71.       min(eWidth / 2, eHeight / 2) - 2,
  72.       paint,
  73.     );
  74.   }
  75.   //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  76.   @override
  77.   bool shouldRepaint(CustomPainter oldDelegate) => true;
  78. }

性能

绘制是比较昂贵的操作，所以我们在实现自绘控件时应该考虑到性能开销，下面是两条关于性能优化的建议：

  • 尽可能的利用好shouldRepaint返回值:在UI树重新build时，控件在绘制前都会先调用该方法以确定是否有必要重绘；
    • 假如我们绘制的UI不依赖外部状态，那么就应该始终返回false，因为外部状态改变导致重新build时不会影响我们的UI外观；
    • 如果绘制依赖外部状态，那么我们就应该在shouldRepaint中判断依赖的状态是否改变，如果已改变则应返回true来重绘，反之则应返回false不需要重绘。

  • 绘制尽可能多的分层:在上面五子棋的示例中，我们将棋盘和棋子的绘制放在了一起，这样会有一个问题：由于棋盘始终是不变的，用户每次落子时变的只是棋子，但是如果按照上面的代码来实现，每次绘制棋子时都要重新绘制一次棋盘，这是没必要的。优化的方法就是将棋盘单独抽为一个组件，并设置其shouldRepaint回调值为false，然后将棋盘组件作为背景。然后将棋子的绘制放到另一个组件中，这样每次落子时只需要绘制棋子。

    总结

    自绘控件非常强大，理论上可以实现任何2D图形外观，实际上Flutter提供的所有组件最终都是通过调用Canvas绘制出来的，只不过绘制的逻辑被封装起来了，读者有兴趣可以查看具有外观样式的组件源码，找到其对应的RenderObject对象，

  • 如Text对应的RenderParagraph对象最终会通过Canvas实现文本绘制逻辑

对比HTML+JS中的canvas

  2. <style>
  3. canvas { background:rgba(222, 222, 222, 0.3) }
  4. div {  background: gray;float: left;}
  5. </style>
  7. <div></div><canvas id="myCanvas" width="400px" height="400px"></canvas></div>
  8. <div><canvas id="mycanvas2" width="600px" height="600px"></canvas></div>
  9. <div><canvas id="mycanvas3" width="800px" height="500px" style="background: red;"></canvas></div>
  10. <div>    <canvas id="mycanvas4" width="500px" height="500px"></canvas></div>
  11. <script>
  12.     var c = document.querySelector("#myCanvas");
  13.     var ctx = c.getContext("2d");
  16.     var cX = 200;  //y轴坐标
  17.     var cY = 200;  //x轴坐标
  18.     var r = 200;  //半径
  19.     var deg = 0;  //角度
  20.     var angle = deg * Math.PI / 180;  //弧度
  21.     var start = Math.PI / 2;
  22.     var end = start + Math.PI;
  23.     var ang = Math.PI / 180;  //弧度
  25.     function drawCirle(ctx, x, y, r, start, end, color = "#000", anti = false) {
  26.         ctx.beginPath();
  27.         ctx.fillStyle = color;
  28.         ctx.arc(x, y, r, start, end, anti);
  29.         ctx.fill();
  30.     }
  32.     setInterval(function () {
  33.         ctx.clearRect(0, 0, c.width, c.height);
  34.         drawCirle(ctx, cX, cY, r, start + deg * ang, end + deg * ang, "#000", false);
  35.         drawCirle(ctx, cX, cY, r, start + deg * ang, end + deg * ang, "#fff", true);
  36.         drawCirle(ctx, cX + (r / 2) * Math.sin(deg * ang), cY - (r / 2) * Math.cos(deg * ang), r / 2, 0, Math.PI * 2, "#000", true);
  37.         drawCirle(ctx, cX - (r / 2) * Math.sin(deg * ang), cY + (r / 2) * Math.cos(deg * ang), r / 2, 0, Math.PI * 2, "#fff", false);
  38.         drawCirle(ctx, cX + (r / 2) * Math.sin(deg * ang), cY - (r / 2) * Math.cos(deg * ang), 20, 0, Math.PI * 2, "#fff", true);
  39.         drawCirle(ctx, cX - (r / 2) * Math.sin(deg * ang), cY + (r / 2) * Math.cos(deg * ang), 20, 0, Math.PI * 2, "#000", true);
  40.         deg++;
  41.         c.style.transform = "rotate(" + deg + "deg)";
  42.     }, 100);
  44. </script>
  46. <script>
  47.     var mycanvas = document.querySelector("#mycanvas2");
  48.     var ctx2 = mycanvas.getContext("2d");
  49.     setInterval(function () {
  50.         ctx2.beginPath();
  51.         ctx2.strokeStyle = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
  52.         ctx2.lineWidth = 3;
  53.         ctx2.moveTo(rand(0, 500), rand(0, 500));
  54.         ctx2.lineTo(rand(0, 600), rand(0, 600));
  55.         ctx2.stroke();
  56.     }, 1000);
  59.     function rand(min, max) {
  60.         return Math.round(Math.random() * (max - min)) + min;
  61.     }
  63.     setInterval(function () {
  64.         ctx2.beginPath();
  66.         //填充坐标
  67.         ctx2.fillRect(rand(0, 300), rand(0, 300), rand(0, 300), rand(0, 300));
  69.         //边框颜色
  70.         ctx2.strokeStyle = "rgb(" + rand(0, 200) + "," + rand(0, 200) + "," + rand(0, 200) + ")";
  71.         ctx2.lineWidth = 2;
  72.         //边框坐标            
  73.         ctx2.strokeRect(rand(1, 300), rand(1, 300), rand(1, 300), rand(1, 300));
  75.         //填充颜色
  76.         ctx2.fillStyle = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
  77.     }, 3000)
  78. </script>
  80. <script type="text/javascript">
  81.     var mycanvas=document.querySelector("#mycanvas3");
  82.     var cx=mycanvas.getContext("2d");
  83.  function drawstar(cxt,x,y,R,r,fillStyle,rot){
  84.     cxt.beginPath();
  85.     for (var i=0;i<5;i++) {
  86.         cxt.lineTo(Math.cos((18+72*i)/180*Math.PI+rot)*R+x,-Math.sin((18+72*i)/180*Math.PI+rot)*R+y);
  87.         cxt.lineTo(Math.cos((54+72*i)/180*Math.PI+rot)*r+x,-Math.sin((54+72*i)/180*Math.PI+rot)*r+y);    
  88.     }
  89.         cxt.fillStyle=fillStyle;
  90.         cxt.closePath();
  91.         cxt.fill()
  92.  }
  95.     drawstar(cx,120,130,80,35,"yellow",0)
  96.     drawstar(cx,250,50,30,12,"yellow",12)
  97.     drawstar(cx,300,110,30,12,"yellow",-12)
  98.     drawstar(cx,290,200,30,12,"yellow",-12)
  99.     drawstar(cx,220,250,30,12,"yellow",12)
  100. </script>
  102. <script type="text/javascript">
  103.     var mycanvas = document.querySelector("#mycanvas4");
  104.     var cx = mycanvas.getContext("2d");
  106.     function drawCircle({fillStyle,x,y,r,start,end,color}) {
  107.     cx.beginPath();
  108.     cx.fillStyle = color||"#fff";
  109.     cx.arc(x||250, y||250, r||200, start||0, end||Math.PI*2)
  110.     cx.fill();
  111.     }
  113.     function drawLine({strokeColor,lineWidth,y,r,start,end,color,x1,y1,x2,y2}) {
  114.         cx.beginPath();
  115.         cx.strokeStyle=strokeColor||"red";
  116.         cx.lineWidth=lineWidth||"8"
  117.         cx.moveTo(x1||240,y1||140);
  118.         cx.lineTo(x2||160,y2||220);
  119.         cx.stroke();
  120.     }
  124.     drawCircle({color:'red',x:250,y:250,r:200})
  125.     drawCircle({color:'#fff',x:250,y:250,r:194})
  126.     drawCircle({color:'red',x:250,y:250,r:190})
  127.     drawCircle({color:'#fff',x:250,y:250,r:145})
  128.     drawCircle({color:'red',x:250,y:250,r:139})
  129.     drawCircle({color:'#fff',x:250,y:250,r:133})
  131.     drawLine({x1:240,y1:140,x2:160,y2:220})
  132.     drawLine({x1:160,y1:216,x2:228,y2:300})
  133.     drawLine({x1:228,y1:300,x2:280,y2:300})
  136. </script>

JS画板绘图

  1. <style type="text/css">
  2. body{background-color:#8fbc8f;}
  3. #bj{margin:0 400px;width:530px;height:700px;border-radius:20px;background-color:#000;}
  4. canvas{margin:15px;border-radius:20px;background-color:#fff;}
  5. #to{margin:0 100px;color:#FFF;}
  6. input{margin:0 8px;}
  7. </style>
  10. <div id="bj">
  11.     <canvas id="mycanvas" width="500px" height="600px"></canvas>
  12.     <div id="to">
  13.         画笔颜色:<input id="color" type="color" /> 画笔大小:
  14.         <input type="number" id="number" min="1" max="20" value="1" />
  15.     </div>
  16. </div>
  17. <script>
  18.     var mycanvas = document.querySelector("#mycanvas");
  19.     var cxt = mycanvas.getContext("2d");
  20.     var color = "#000";
  21.     var lineWith = 2;
  22.     //接触鼠标时候，然后在移动鼠标时候
  23.     mycanvas.onmousedown = function (e) {
  24.         start_draw();
  25.         cxt.moveTo(e.clientX - mycanvas.offsetLeft, e.clientY - mycanvas.offsetTop);
  26.         mycanvas.addEventListener("mousemove", draw);
  27.     }
  29.     //松开鼠标
  30.     mycanvas.onmouseup = function () {
  31.         mycanvas.removeEventListener("mousemove", draw);
  32.     }
  34.     //选择画笔
  35.     document.querySelector("#color").oninput = function () {
  36.         color = this.value;
  37.     }
  38.     //选择画笔大小
  39.     document.querySelector("#number").oninput = function () {
  40.         lineWith = this.value;
  41.     }
  43.     //开始画
  44.     function start_draw() {
  45.         cxt.beginPath();
  46.         cxt.strokeStyle = color;
  47.         cxt.lineWidth = lineWith;
  48.     }
  50.     function draw(e) {
  51.         e.preventDefault();
  52.         cxt.lineTo(e.clientX - mycanvas.offsetLeft, e.clientY - mycanvas.offsetTop);
  53.         cxt.stroke();
  54.     }
  56. </script>

JS canvas绘制象棋

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title></title>
  7.         <!--<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>-->
  8.         <!--<link rel="stylesheet" type="text/css" href="css/chess.css"/>-->
  9.         <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  10.     </head>
  11.     <style type="text/css">
  12.         * {
  13.             margin: 0;
  14.             padding: 0
  15.         }
  17.         #Wrap {
  18.             width: 700px;
  19.             height: 640px;
  20.             margin: 0 auto
  21.         }
  23.         #currActive {
  24.             font-size: 30px;
  25.             font-weight: 700;
  26.             margin-left: 260px;
  27.             margin: 8px 250px
  28.         }
  30.         #canvas {
  31.             float: left;
  32.             background: #EAC591;
  33.             display: block
  34.         }
  36.         #take_notes {
  37.             width: 80px;
  38.             height: 645px;
  39.             padding: 10px;
  40.             float: right;
  41.             overflow: hidden;
  42.             display: flex;
  43.             flex-direction: column-reverse;
  44.         }
  46.         #ul {
  47.             list-style: none;
  48.             margin: 0;
  49.             padding: 0
  50.         }
  52.         #ul li {
  53.             padding: 2px;
  54.             overflow: hidden
  55.         }
  57.         #shuying {
  58.             float: left
  59.         }
  61.         #shuying p {
  62.             margin: 10px;
  63.             font-size: 30px
  64.         }
  66.         #main {
  67.             width: 600px;
  68.             height: 150px;
  69.             -webkit-justify-content: space-around;
  70.             display: flex; //分横栏
  71.             justify-content: space-around
  72.         }
  74.         #main div {
  75.             width: 100px;
  76.             height: 50px;
  77.             line-height: 50px;
  78.             text-align: center;
  79.             margin-top: 10px;
  80.             border-radius: 20%;
  81.             font-weight: 700
  82.         }
  84.         #main div a {
  85.             text-decoration: none;
  86.             color: #000
  87.         }
  89.         #main div a:hover {
  90.             color: #00f
  91.         }
  93.         #main div ul {
  94.             list-style: none;
  95.             position: relative
  96.         }
  98.         #main div ul {
  99.             position: absolute
  100.         }
  102.         .daohang {
  103.             position: absolute;
  104.             display: none;
  105.             margin-left: 18px;
  106.             margin-top: -190px;
  107.             background: pink;
  108.             border-radius: 10%
  109.         }
  111.         .daohang a {
  112.             font: "微软雅黑";
  113.             font-size: 15px;
  114.             margin-top: -6px
  115.         }
  117.         #dianji:hover .daohang {
  118.             display: block
  119.         }
  121.         #red_zi {
  122.             color: red
  123.         }
  124.     </style>
  126.     <body>
  127.         <div id="Wrap">
  128.             <div id="currActive"></div>
  129.             <canvas id="canvas" width="600" height="660"></canvas>
  130.             <div id="take_notes">
  131.                 <div id="shuying"></div>
  132.                 <ul id="ul"></ul>
  133.             </div>
  134.             <div id="main">
  135.                 <div style="background-color:coral;"><a href="canvas绘制象棋.html">重新开始</a></div>
  136.                 <div style="background-color:lightblue;"><a href="#">提示</a></div>
  137.                 <div style="background-color:khaki;"><a href="#">悔棋</a></div>
  138.                 <div style="background-color:pink;" id="dianji">
  139.                     <a href="#">设置</a>
  140.                     <ul class="daohang">
  141.                         <li class="daohang_1"><a href="#">棋盘大小</a></li>
  142.                         <li class="daohang_2"><a href="#">棋子大小</a></li>
  143.                         <li class="daohang_3"><a href="#">棋子颜色</a></li>
  144.                     </ul>
  146.                 </div>
  147.             </div>
  149.     </body>
  152.     <script>
  153.         var obj = {};
  155.         // 棋盘初始化
  156.         obj.init = function (lqfs) {
  157.             var canvas = document.querySelector("canvas");
  158.             this.ctx = canvas.getContext("2d");
  160.             // 棋盘初始化
  161.             obj.init_back = function () {
  162.                 this.drawRowLine();
  163.                 this.drawColLine();
  164.                 this.ctx.clearRect(this.chunk + 1, this.chunk * 5 + 1, this.chunk * 8 - 2, this.chunk - 2);
  165.                 this.drawsharpS();
  166.                 this.drawX();
  167.                 this.drawText();
  168.             }
  170.             //                this.chunk =lqfs&&lqfs.chunk?lqfs.chunk:50;  
  171.             //                this.radius =lqfs&&lqfs.radius?lqfs.radius:23;  
  172.             //                this.CandidateCircleR =lqfs&&lqfs.ccr?lqfs.ccr:5;
  174.             /*---------------------------可以修改棋盘、棋子大小，颜色，谁先手 ------------------------------------------------------------*/
  175.             obj.chunk = 60;  //棋盘线格大小           
  176.             this.radius = this.chunk / 2 - 3;   // 棋子半径
  177.             this.CandidateCircleR = this.chunk / 10;  //候选棋子的半径大小
  178.             this.drawCandidateCircle_fillStyle = "#fff"; //候选的内圆颜色
  179.             this.drawCandidateCircle_strokeStyle = "red"; //候选的内圆边框原色
  180.             this.drawCandidateCircle_lineWidth = 2;   //候选内圆的边框大小
  181.             this.init_back();
  182.             this.init_chess();
  183.             $(canvas).unbind();
  184.             this.addEvent();
  185.             this.Notations = [];           // 记录步骤
  186.             this.currActive = "red";   // 先下
  187.             $("#currActive").text("红方先下").css({ "color": "red", })
  188.             /*---------------------------------------------------------------------------------------------------------------------------------*/
  189.         }
  190.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  191.         // 棋子初始化
  192.         obj.init_chess = function () {
  193.             //上方（红）
  194.             var Car_b1 = { x: 1, y: 1, text: "車" }
  195.             var Horse_b1 = { x: 2, y: 1, text: "馬" }
  196.             var Elephant_b1 = { x: 3, y: 1, text: "象" }
  197.             var Scholar_b1 = { x: 4, y: 1, text: "士" }
  198.             var Boss_b = { x: 5, y: 1, text: "将" }
  199.             var Scholar_b2 = { x: 6, y: 1, text: "士" }
  200.             var Elephant_b2 = { x: 7, y: 1, text: "象" }
  201.             var Horse_b2 = { x: 8, y: 1, text: "馬" }
  202.             var Car_b2 = { x: 9, y: 1, text: "車" }
  203.             var Cannon_b1 = { x: 2, y: 3, text: "炮" }
  204.             var Cannon_b2 = { x: 8, y: 3, text: "炮" }
  205.             var Soldier_b1 = { x: 1, y: 4, text: "卒" }
  206.             var Soldier_b2 = { x: 3, y: 4, text: "卒" }
  207.             var Soldier_b3 = { x: 5, y: 4, text: "卒" }
  208.             var Soldier_b4 = { x: 7, y: 4, text: "卒" }
  209.             var Soldier_b5 = { x: 9, y: 4, text: "卒" }
  211.             //下方（黑）
  212.             var Car_r1 = { x: 1, y: 10, text: "車" }
  213.             var Horse_r1 = { x: 2, y: 10, text: "馬" }
  214.             var Elephant_r1 = { x: 3, y: 10, text: "相" }
  215.             var Scholar_r1 = { x: 4, y: 10, text: "仕" }
  216.             var Boss_r = { x: 5, y: 10, text: "帅" }
  217.             var Scholar_r2 = { x: 6, y: 10, text: "仕" }
  218.             var Elephant_r2 = { x: 7, y: 10, text: "相" }
  219.             var Horse_r2 = { x: 8, y: 10, text: "馬" }
  220.             var Car_r2 = { x: 9, y: 10, text: "車" }
  221.             var Cannon_r1 = { x: 2, y: 8, text: "炮" }
  222.             var Cannon_r2 = { x: 8, y: 8, text: "炮" }
  223.             var Soldier_r1 = { x: 1, y: 7, text: "兵" }
  224.             var Soldier_r2 = { x: 3, y: 7, text: "兵" }
  225.             var Soldier_r3 = { x: 5, y: 7, text: "兵" }
  226.             var Soldier_r4 = { x: 7, y: 7, text: "兵" }
  227.             var Soldier_r5 = { x: 9, y: 7, text: "兵" }
  228.             this.cheer_arr_B = [Car_b1, Horse_b1, Elephant_b1, Scholar_b1, Boss_b, Scholar_b2, Elephant_b2, Horse_b2, Car_b2,
  229.                 Cannon_b1, Cannon_b2, Soldier_b1, Soldier_b2, Soldier_b3, Soldier_b4, Soldier_b5];
  231.             this.cheer_arr_R = [Car_r1, Horse_r1, Elephant_r1, Scholar_r1, Boss_r, Scholar_r2, Elephant_r2, Horse_r2, Car_r2,
  232.                 Cannon_r1, Cannon_r2, Soldier_r1, Soldier_r2, Soldier_r3, Soldier_r4, Soldier_r5];
  234.             var that = this;
  235.             $.each(this.cheer_arr_B, function (i, e) {
  236.                 e.color = "#000";     //圆的文字颜色
  237.                 e.bgcolor = "#fff";  //圆的背景颜色
  238.                 e.bgColor_b = "#000"; //外边的框颜色
  239.                 e.type = "black";
  240.                 that.drawPiece(e);
  241.                 that.drawChessText(e);
  242.             });
  244.             $.each(this.cheer_arr_R, function (i, e) {
  245.                 e.color = "#f00";   //圆的文字颜色
  246.                 e.bgcolor = "#fff"; //圆的背景颜色
  247.                 e.bgColor_b = "#f00";  //外边的框颜色
  248.                 e.type = "red";
  250.                 that.drawPiece(e);
  251.                 that.drawChessText(e);
  252.             });
  254.             this.cheer_arr_ALL = this.cheer_arr_B.concat(this.cheer_arr_R);
  255.         }
  256.         /*--------------------------------------------------------------------------------------------------------------------------------------*/
  258.         // 画棋子形状
  259.         obj.drawPiece = function (e) {
  260.             this.ctx.beginPath();
  261.             this.ctx.fillStyle = e.bgcolor;
  262.             this.ctx.strokeStyle = e.bgColor_b;
  263.             this.ctx.lineWidth = 2;
  264.             this.ctx.arc(e.x * this.chunk, e.y * this.chunk, this.radius, 0, Math.PI * 2, true);  //this.radius棋子大小
  265.             this.ctx.closePath();
  266.             this.ctx.fill();
  267.             this.ctx.stroke();
  268.         }
  270.         /*--------------------------------------------------------------------------------------------------------------------------------------*/
  271.         // 画棋子文字
  272.         obj.drawChessText = function (e) {
  273.             var font = "" + this.chunk / 1.5 + "px "
  274.             this.ctx.font = "bold " + font + " Courier New";
  275.             this.ctx.fillStyle = e.color;
  276.             var offset = this.ctx.measureText(e.text).width / 2;
  277.             this.ctx.fillText(e.text, e.x * this.chunk - offset, e.y * this.chunk + this.chunk / 4.5);
  278.         }
  281.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  283.         // 画直线
  284.         obj.drawLine = function (x0, y0, x1, y1, lw) {
  285.             this.ctx.beginPath();
  286.             var x0 = x0 * this.chunk;
  287.             var y0 = y0 * this.chunk;
  288.             var x1 = x1 * this.chunk;
  289.             var y1 = y1 * this.chunk;
  290.             this.ctx.strokeStyle = "#000";
  291.             this.ctx.lineWidth = lw ? lw : 1;
  292.             this.ctx.moveTo(x0, y0);
  293.             this.ctx.lineTo(x1, y1);
  294.             this.ctx.closePath();
  295.             this.ctx.stroke();
  296.         }
  297.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  298.         // 画横线
  299.         obj.drawRowLine = function () {
  300.             for (var i = 1; i <= 10; i++) {
  301.                 this.drawLine(1, i, 9, i);
  302.             }
  303.         }
  305.         // 画竖线
  306.         obj.drawColLine = function () {
  307.             for (var i = 1; i <= 9; i++) {
  308.                 this.drawLine(i, 1, i, 10);
  309.             }
  310.         }
  312.         // 画X
  313.         obj.drawX = function () {
  314.             this.drawLine(4, 1, 6, 3, 0.5);
  315.             this.drawLine(4, 3, 6, 1, 0.5);
  316.             this.drawLine(4, 8, 6, 10, 0.5);
  317.             this.drawLine(4, 10, 6, 8, 0.5);
  318.         }
  320.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  321.         // 画单个#
  322.         obj.drawsharp = function (x, y) {
  323.             var x = x * this.chunk;
  324.             var y = y * this.chunk;
  325.             var range_y = this.chunk / 4.3;  /*#的竖的距离*/
  326.             var range_x = this.chunk / 4.3;  /*#的横的距离*/
  327.             var range_close = this.chunk / 12;   /*间隔距离*/
  329.             /*var range_y=10;  
  330.             var range_x=10;  
  331.             var range_close=5; */
  333.             this.ctx.beginPath();
  334.             this.ctx.strokeStyle = "#000";
  335.             this.ctx.lineWidth = 1;
  337.             if (x != 1) {
  338.                 // 左上
  339.                 this.ctx.moveTo(x - range_close, y - range_y);
  340.                 this.ctx.lineTo(x - range_close, y - range_close);
  341.                 this.ctx.lineTo(x - range_x, y - range_close);
  343.                 // 左下
  344.                 this.ctx.moveTo(x - range_close, y + range_y);
  345.                 this.ctx.lineTo(x - range_close, y + range_close);
  346.                 this.ctx.lineTo(x - range_x, y + range_close);
  347.             }
  350.             if (x != 9) {
  351.                 // 右上
  352.                 this.ctx.moveTo(x + range_close, y - range_y);
  353.                 this.ctx.lineTo(x + range_close, y - range_close);
  354.                 this.ctx.lineTo(x + range_x, y - range_close);
  356.                 // 右下
  357.                 this.ctx.moveTo(x + range_close, y + range_y);
  358.                 this.ctx.lineTo(x + range_close, y + range_close);
  359.                 this.ctx.lineTo(x + range_x, y + range_close);
  360.             }
  363.             this.ctx.stroke();
  364.             this.ctx.closePath();
  365.         }
  366.         // 画#
  367.         /*obj.drawsharpS = function(){
  368.             this.drawsharp(2,3);
  369.             this.drawsharp(8,3);
  370.             this.drawsharp(1,4);
  371.             this.drawsharp(3,4);
  372.             this.drawsharp(5,4);
  373.             this.drawsharp(7,4);
  374.             this.drawsharp(9,4);
  376.             this.drawsharp(2,8);
  377.             this.drawsharp(8,8);
  378.             this.drawsharp(1,7);
  379.             this.drawsharp(3,7);
  380.             this.drawsharp(5,7);
  381.             this.drawsharp(7,7);
  382.             this.drawsharp(9,7);
  383.         }*/
  385.         //用循环函数的并和画#
  386.         obj.drawsharpS = function () {
  387.             this.drawsharp(2, 3);
  388.             this.drawsharp(8, 3);
  389.             for (var i = 1; i <= 5; i++) {
  390.                 this.drawsharp(2 * i - 1, 4)
  391.             }
  392.             for (var i = 1; i <= 5; i++) {
  393.                 this.drawsharp(2 * i - 1, 7)
  394.             }
  395.             this.drawsharp(2, 8);
  396.             this.drawsharp(8, 8);
  397.         }
  398.         /*--------------------------------------------------------------------------------------------------------------------------------------*/
  400.         // 画楚河/漢界
  401.         obj.drawText = function () {
  402.             var font = "" + this.chunk / 1.5 + "px  ";
  403.             this.ctx.font = "bold " + font + " KaiTi_GB2312";
  404.             this.ctx.fillStyle = "#000";
  405.             this.ctx.fillText("楚  河", this.chunk * 2, this.chunk * 5 + this.chunk / 1.3);
  406.             this.ctx.fillText("漢  界", this.chunk * 6 + this.chunk / 3, this.chunk * 5 + this.chunk / 1.3);
  408.             var font1 = "" + this.chunk / 6 + "px"
  409.             this.ctx.font = "" + font1 + " Courier New";
  410.             this.text_arr = ["九", "八", "七", "六", "五", "四", "三", "二", "一"];
  411.             for (var i = 0; i < 9; i++) {
  412.                 this.ctx.fillText((i + 1).toString(), this.chunk * (i + 1) - 5, 20);
  413.                 this.ctx.fillText(this.text_arr[i], this.chunk * (i + 1) - 5, this.chunk * 11 - this.chunk / 6);
  414.             }
  415.         }
  416.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  417.         // 画候选形状
  418.         obj.drawCandidateCircle = function (x, y) {
  419.             this.ctx.beginPath();
  420.             this.ctx.fillStyle = this.drawCandidateCircle_fillStyle;     //候选内圆的颜色
  421.             this.ctx.strokeStyle = this.drawCandidateCircle_strokeStyle;  //候选内圆的边框颜色
  422.             this.ctx.lineWidth = this.drawCandidateCircle_lineWidth;   //候选内圆的边框大小
  423.             this.ctx.arc(x * this.chunk, y * this.chunk, this.CandidateCircleR, 0, Math.PI * 2, true);
  424.             this.ctx.closePath();
  425.             this.ctx.fill();
  426.             this.ctx.stroke();
  427.         }
  429.         // 画选中棋子状态
  430.         obj.drawChecked = function (p) {
  432.             //画候选的形状
  433.             var temp_x = p.x * this.chunk;
  434.             var temp_y = p.y * this.chunk;
  435.             this.ctx.beginPath();
  436.             this.ctx.strokeStyle = "#00f";
  437.             this.ctx.lineWidth = 1;
  438.             this.ctx.moveTo(temp_x - this.radius, temp_y - this.radius + 10);  //this.radius棋子大小
  439.             this.ctx.lineTo(temp_x - this.radius, temp_y - this.radius);
  440.             this.ctx.lineTo(temp_x - this.radius + 10, temp_y - this.radius);
  442.             this.ctx.moveTo(temp_x - this.radius, temp_y + this.radius - 10);
  443.             this.ctx.lineTo(temp_x - this.radius, temp_y + this.radius);
  444.             this.ctx.lineTo(temp_x - this.radius + 10, temp_y + this.radius);
  446.             this.ctx.moveTo(temp_x + this.radius, temp_y - this.radius + 10);
  447.             this.ctx.lineTo(temp_x + this.radius, temp_y - this.radius);
  448.             this.ctx.lineTo(temp_x + this.radius - 10, temp_y - this.radius);
  450.             this.ctx.moveTo(temp_x + this.radius, temp_y + this.radius - 10);
  451.             this.ctx.lineTo(temp_x + this.radius, temp_y + this.radius);
  452.             this.ctx.lineTo(temp_x + this.radius - 10, temp_y + this.radius);
  454.             this.ctx.stroke();
  455.             this.ctx.closePath();
  456.         }
  458.         // 画候选位置
  459.         obj.drawCandidate = function () {
  460.             switch (this.action.text) {
  461.                 case "車":
  462.                     var temp_y = this.action.y;
  463.                     while (!this.inArray(this.action.x, ++temp_y) && temp_y <= 10) {
  464.                         this.drawCandidateCircle(this.action.x, temp_y);
  465.                     }
  466.                     var temp_y = this.action.y;
  467.                     while (!this.inArray(this.action.x, --temp_y) && temp_y > 0) {
  468.                         this.drawCandidateCircle(this.action.x, temp_y);
  469.                     }
  470.                     var temp_x = this.action.x;
  471.                     while (!this.inArray(++temp_x, this.action.y) && temp_x < 10) {
  472.                         this.drawCandidateCircle(temp_x, this.action.y);
  473.                     }
  474.                     var temp_x = this.action.x;
  475.                     while (!this.inArray(--temp_x, this.action.y) && temp_x > 0) {
  476.                         this.drawCandidateCircle(temp_x, this.action.y);
  477.                     }
  478.                     break;
  479.                 case "馬":
  480.                     if (!this.inArray(this.action.x - 2, this.action.y - 1)
  481.                         && this.action.x - 2 >= 1 && this.action.y - 1 >= 1
  482.                         && !this.inArray(this.action.x - 1, this.action.y)) {
  483.                         this.drawCandidateCircle(this.action.x - 2, this.action.y - 1);
  484.                     }
  485.                     if (!this.inArray(this.action.x - 1, this.action.y - 2)
  486.                         && this.action.x - 1 >= 1 && this.action.y - 2 >= 1
  487.                         && !this.inArray(this.action.x, this.action.y - 1)) {
  488.                         this.drawCandidateCircle(this.action.x - 1, this.action.y - 2);
  489.                     }
  490.                     if (!this.inArray(this.action.x + 1, this.action.y - 2)
  491.                         && this.action.x + 1 <= 9 && this.action.y - 2 >= 1
  492.                         && !this.inArray(this.action.x, this.action.y - 1)) {
  493.                         this.drawCandidateCircle(this.action.x + 1, this.action.y - 2);
  494.                     }
  495.                     if (!this.inArray(this.action.x + 2, this.action.y - 1)
  496.                         && this.action.x + 2 <= 9 && this.action.y - 1 >= 1
  497.                         && !this.inArray(this.action.x + 1, this.action.y)) {
  498.                         this.drawCandidateCircle(this.action.x + 2, this.action.y - 1);
  499.                     }
  500.                     if (!this.inArray(this.action.x + 2, this.action.y + 1)
  501.                         && this.action.x + 2 <= 9 && this.action.y + 1 <= 10
  502.                         && !this.inArray(this.action.x + 1, this.action.y)) {
  503.                         this.drawCandidateCircle(this.action.x + 2, this.action.y + 1);
  504.                     }
  505.                     if (!this.inArray(this.action.x + 1, this.action.y + 2)
  506.                         && this.action.x + 1 <= 9 && this.action.y + 2 <= 10
  507.                         && !this.inArray(this.action.x, this.action.y + 1)) {
  508.                         this.drawCandidateCircle(this.action.x + 1, this.action.y + 2);
  509.                     }
  510.                     if (!this.inArray(this.action.x - 1, this.action.y + 2)
  511.                         && this.action.x - 1 >= 1 && this.action.y + 2 <= 10
  512.                         && !this.inArray(this.action.x, this.action.y + 1)) {
  513.                         this.drawCandidateCircle(this.action.x - 1, this.action.y + 2);
  514.                     }
  515.                     if (!this.inArray(this.action.x - 2, this.action.y + 1)
  516.                         && this.action.x - 2 >= 1 && this.action.y + 1 <= 10
  517.                         && !this.inArray(this.action.x - 1, this.action.y)) {
  518.                         this.drawCandidateCircle(this.action.x - 2, this.action.y + 1);
  519.                     }
  520.                     break;
  521.                 case "相":
  522.                     if (this.action.y == 10) {
  523.                         if (!this.inArray(this.action.x - 2, this.action.y - 2)
  524.                             && !this.inArray(this.action.x - 1, this.action.y - 1)) {
  525.                             this.drawCandidateCircle(this.action.x - 2, this.action.y - 2);
  526.                         }
  527.                         if (!this.inArray(this.action.x + 2, this.action.y - 2)
  528.                             && !this.inArray(this.action.x + 1, this.action.y - 1)) {
  529.                             this.drawCandidateCircle(this.action.x + 2, this.action.y - 2);
  530.                         }
  531.                     } else if (this.action.y == 6) {
  532.                         if (!this.inArray(this.action.x - 2, this.action.y + 2)
  533.                             && !this.inArray(this.action.x - 1, this.action.y + 1)) {
  534.                             this.drawCandidateCircle(this.action.x - 2, this.action.y + 2);
  535.                         }
  536.                         if (!this.inArray(this.action.x + 2, this.action.y + 2)
  537.                             && !this.inArray(this.action.x + 1, this.action.y + 1)) {
  538.                             this.drawCandidateCircle(this.action.x + 2, this.action.y + 2);
  539.                         }
  540.                     } else if (this.action.x == 1) {
  541.                         if (!this.inArray(this.action.x + 2, this.action.y - 2)
  542.                             && !this.inArray(this.action.x + 1, this.action.y - 1)) {
  543.                             this.drawCandidateCircle(this.action.x + 2, this.action.y - 2);
  544.                         }
  545.                         if (!this.inArray(this.action.x + 2, this.action.y + 2)
  546.                             && !this.inArray(this.action.x + 1, this.action.y + 1)) {
  547.                             this.drawCandidateCircle(this.action.x + 2, this.action.y + 2);
  548.                         }
  549.                     } else if (this.action.x == 9) {
  550.                         if (!this.inArray(this.action.x - 2, this.action.y - 2)
  551.                             && !this.inArray(this.action.x - 1, this.action.y - 1)) {
  552.                             this.drawCandidateCircle(this.action.x - 2, this.action.y - 2);
  553.                         }
  554.                         if (!this.inArray(this.action.x - 2, this.action.y + 2)
  555.                             && !this.inArray(this.action.x - 1, this.action.y + 1)) {
  556.                             this.drawCandidateCircle(this.action.x - 2, this.action.y + 2);
  557.                         }
  558.                     } else {
  559.                         if (!this.inArray(this.action.x + 2, this.action.y - 2)
  560.                             && !this.inArray(this.action.x + 1, this.action.y - 1)) {
  561.                             this.drawCandidateCircle(this.action.x + 2, this.action.y - 2);
  562.                         }
  563.                         if (!this.inArray(this.action.x + 2, this.action.y + 2)
  564.                             && !this.inArray(this.action.x + 1, this.action.y + 1)) {
  565.                             this.drawCandidateCircle(this.action.x + 2, this.action.y + 2);
  566.                         }
  567.                         if (!this.inArray(this.action.x - 2, this.action.y - 2)
  568.                             && !this.inArray(this.action.x - 1, this.action.y - 1)) {
  569.                             this.drawCandidateCircle(this.action.x - 2, this.action.y - 2);
  570.                         }
  571.                         if (!this.inArray(this.action.x - 2, this.action.y + 2)
  572.                             && !this.inArray(this.action.x - 1, this.action.y + 1)) {
  573.                             this.drawCandidateCircle(this.action.x - 2, this.action.y + 2);
  574.                         }
  575.                     }
  576.                     break;
  577.                 case "象":
  578.                     if (this.action.y == 1) {
  579.                         if (!this.inArray(this.action.x - 2, this.action.y + 2)
  580.                             && !this.inArray(this.action.x - 1, this.action.y + 1)) {
  581.                             this.drawCandidateCircle(this.action.x - 2, this.action.y + 2);
  582.                         }
  583.                         if (!this.inArray(this.action.x + 2, this.action.y + 2)
  584.                             && !this.inArray(this.action.x + 1, this.action.y + 1)) {
  585.                             this.drawCandidateCircle(this.action.x + 2, this.action.y + 2);
  586.                         }
  587.                     } else if (this.action.y == 5) {
  588.                         if (!this.inArray(this.action.x - 2, this.action.y - 2)
  589.                             && !this.inArray(this.action.x - 1, this.action.y - 1)) {
  590.                             this.drawCandidateCircle(this.action.x - 2, this.action.y - 2);
  591.                         }
  592.                         if (!this.inArray(this.action.x + 2, this.action.y - 2)
  593.                             && !this.inArray(this.action.x + 1, this.action.y - 1)) {
  594.                             this.drawCandidateCircle(this.action.x + 2, this.action.y - 2);
  595.                         }
  596.                     } else if (this.action.x == 1) {
  597.                         if (!this.inArray(this.action.x + 2, this.action.y - 2)
  598.                             && !this.inArray(this.action.x + 1, this.action.y - 1)) {
  599.                             this.drawCandidateCircle(this.action.x + 2, this.action.y - 2);
  600.                         }
  601.                         if (!this.inArray(this.action.x + 2, this.action.y + 2)
  602.                             && !this.inArray(this.action.x + 1, this.action.y + 1)) {
  603.                             this.drawCandidateCircle(this.action.x + 2, this.action.y + 2);
  604.                         }
  605.                     } else if (this.action.x == 9) {
  606.                         if (!this.inArray(this.action.x - 2, this.action.y - 2)
  607.                             && !this.inArray(this.action.x - 1, this.action.y - 1)) {
  608.                             this.drawCandidateCircle(this.action.x - 2, this.action.y - 2);
  609.                         }
  610.                         if (!this.inArray(this.action.x - 2, this.action.y + 2)
  611.                             && !this.inArray(this.action.x - 1, this.action.y + 1)) {
  612.                             this.drawCandidateCircle(this.action.x - 2, this.action.y + 2);
  613.                         }
  614.                     } else {
  615.                         if (!this.inArray(this.action.x + 2, this.action.y - 2)
  616.                             && !this.inArray(this.action.x + 1, this.action.y - 1)) {
  617.                             this.drawCandidateCircle(this.action.x + 2, this.action.y - 2);
  618.                         }
  619.                         if (!this.inArray(this.action.x + 2, this.action.y + 2)
  620.                             && !this.inArray(this.action.x + 1, this.action.y + 1)) {
  621.                             this.drawCandidateCircle(this.action.x + 2, this.action.y + 2);
  622.                         }
  623.                         if (!this.inArray(this.action.x - 2, this.action.y - 2)
  624.                             && !this.inArray(this.action.x - 1, this.action.y - 1)) {
  625.                             this.drawCandidateCircle(this.action.x - 2, this.action.y - 2);
  626.                         }
  627.                         if (!this.inArray(this.action.x - 2, this.action.y + 2)
  628.                             && !this.inArray(this.action.x - 1, this.action.y + 1)) {
  629.                             this.drawCandidateCircle(this.action.x - 2, this.action.y + 2);
  630.                         }
  631.                     }
  632.                     break;
  633.                 case "仕":
  634.                     if (this.action.x == 5 && this.action.y == 9) {
  635.                         if (!this.inArray(this.action.x - 1, this.action.y - 1)) {
  636.                             this.drawCandidateCircle(this.action.x - 1, this.action.y - 1);
  637.                         }
  638.                         if (!this.inArray(this.action.x - 1, this.action.y + 1)) {
  639.                             this.drawCandidateCircle(this.action.x - 1, this.action.y + 1);
  640.                         }
  641.                         if (!this.inArray(this.action.x + 1, this.action.y - 1)) {
  642.                             this.drawCandidateCircle(this.action.x + 1, this.action.y - 1);
  643.                         }
  644.                         if (!this.inArray(this.action.x + 1, this.action.y + 1)) {
  645.                             this.drawCandidateCircle(this.action.x + 1, this.action.y + 1);
  646.                         }
  647.                     } else {
  648.                         this.drawCandidateCircle(5, 9);
  649.                     }
  650.                     break;
  651.                 case "士":
  652.                     if (this.action.x == 5 && this.action.y == 2) {
  653.                         if (!this.inArray(this.action.x - 1, this.action.y - 1)) {
  654.                             this.drawCandidateCircle(this.action.x - 1, this.action.y - 1);
  655.                         }
  656.                         if (!this.inArray(this.action.x - 1, this.action.y + 1)) {
  657.                             this.drawCandidateCircle(this.action.x - 1, this.action.y + 1);
  658.                         }
  659.                         if (!this.inArray(this.action.x + 1, this.action.y - 1)) {
  660.                             this.drawCandidateCircle(this.action.x + 1, this.action.y - 1);
  661.                         }
  662.                         if (!this.inArray(this.action.x + 1, this.action.y + 1)) {
  663.                             this.drawCandidateCircle(this.action.x + 1, this.action.y + 1);
  664.                         }
  665.                     } else {
  666.                         this.drawCandidateCircle(5, 2);
  667.                     }
  668.                     break;
  669.                 case "帅":
  670.                     if (!this.inArray(this.action.x, this.action.y - 1) && this.action.y > 8) {
  671.                         this.drawCandidateCircle(this.action.x, this.action.y - 1);
  672.                     }
  673.                     if (!this.inArray(this.action.x, this.action.y + 1) && this.action.y < 10) {
  674.                         this.drawCandidateCircle(this.action.x, this.action.y + 1);
  675.                     }
  676.                     if (!this.inArray(this.action.x - 1, this.action.y) && this.action.x > 4) {
  677.                         this.drawCandidateCircle(this.action.x - 1, this.action.y);
  678.                     }
  679.                     if (!this.inArray(this.action.x + 1, this.action.y) && this.action.x < 6) {
  680.                         this.drawCandidateCircle(this.action.x + 1, this.action.y);
  681.                     }
  682.                     break;
  683.                 case "将":
  684.                     if (!this.inArray(this.action.x, this.action.y - 1) && this.action.y > 1) {
  685.                         this.drawCandidateCircle(this.action.x, this.action.y - 1);
  686.                     }
  687.                     if (!this.inArray(this.action.x, this.action.y + 1) && this.action.y < 3) {
  688.                         this.drawCandidateCircle(this.action.x, this.action.y + 1);
  689.                     }
  690.                     if (!this.inArray(this.action.x - 1, this.action.y) && this.action.x > 4) {
  691.                         this.drawCandidateCircle(this.action.x - 1, this.action.y);
  692.                     }
  693.                     if (!this.inArray(this.action.x + 1, this.action.y) && this.action.x < 6) {
  694.                         this.drawCandidateCircle(this.action.x + 1, this.action.y);
  695.                     }
  696.                     break;
  697.                 case "兵":
  698.                     if (this.action.y > 5 && !this.inArray(this.action.x, this.action.y - 1)) {
  699.                         this.drawCandidateCircle(this.action.x, this.action.y - 1);
  700.                     } else if (this.action.y <= 5) {
  701.                         if (!this.inArray(this.action.x, this.action.y - 1) && this.action.y > 1) {
  702.                             this.drawCandidateCircle(this.action.x, this.action.y - 1);
  703.                         }
  704.                         if (!this.inArray(this.action.x - 1, this.action.y) && this.action.x > 1) {
  705.                             this.drawCandidateCircle(this.action.x - 1, this.action.y);
  706.                         }
  707.                         if (!this.inArray(this.action.x + 1, this.action.y) && this.action.x < 9) {
  708.                             this.drawCandidateCircle(this.action.x + 1, this.action.y);
  709.                         }
  710.                     }
  711.                     break;
  712.                 case "卒":
  713.                     if (this.action.y <= 5 && !this.inArray(this.action.x, this.action.y + 1)) {
  714.                         this.drawCandidateCircle(this.action.x, this.action.y + 1);
  715.                     } else if (this.action.y > 5) {
  716.                         if (!this.inArray(this.action.x, this.action.y + 1) && this.action.y < 10) {
  717.                             this.drawCandidateCircle(this.action.x, this.action.y + 1);
  718.                         }
  719.                         if (!this.inArray(this.action.x - 1, this.action.y) && this.action.x > 1) {
  720.                             this.drawCandidateCircle(this.action.x - 1, this.action.y);
  721.                         }
  722.                         if (!this.inArray(this.action.x + 1, this.action.y) && this.action.x < 9) {
  723.                             this.drawCandidateCircle(this.action.x + 1, this.action.y);
  724.                         }
  725.                     }
  726.                     break;
  727.                 case "炮":
  728.                     var temp_y = this.action.y;
  729.                     while (!this.inArray(this.action.x, ++temp_y) && temp_y <= 10) {
  730.                         this.drawCandidateCircle(this.action.x, temp_y);
  731.                     }
  732.                     var temp_y = this.action.y;
  733.                     while (!this.inArray(this.action.x, --temp_y) && temp_y > 0) {
  734.                         this.drawCandidateCircle(this.action.x, temp_y);
  735.                     }
  736.                     var temp_x = this.action.x;
  737.                     while (!this.inArray(++temp_x, this.action.y) && temp_x < 10) {
  738.                         this.drawCandidateCircle(temp_x, this.action.y);
  739.                     }
  740.                     var temp_x = this.action.x;
  741.                     while (!this.inArray(--temp_x, this.action.y) && temp_x > 0) {
  742.                         this.drawCandidateCircle(temp_x, this.action.y);
  743.                     }
  744.                     break;
  745.             }
  746.         }
  747.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  748.         // 更新棋局
  749.         obj.updateChess = function (e) {
  750.             var lqf =
  751.                 this.ctx.clearRect(0, 0, canvas.width, canvas.height);
  752.             this.init_back();
  753.             var that = this;
  754.             $.each(this.cheer_arr_ALL, function (i, e) {
  755.                 that.drawPiece(e);
  756.                 that.drawChessText(e);
  757.             });
  758.             $("#ul").empty();  //清空
  759.             $.each(this.Notations, function (iii, lqfs) {
  760.                 var cars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25"]
  761.                 for (var i = 1; i < 2; i++) {
  762.                     var html_2 = '<li data-id="' + cars[i] + '" class="lqf' + i * 6 + '" style="color: red" >' + lqfs + '</li>';
  763.                     var html_1 = '<li data-id="' + cars[3] + '" class="lqf' + i * 7 + '" style="color: black">' + lqfs + '</li>';
  766.                     var tas = true;
  767.                     if (tas) { $("#ul").append(html_1); tas = false; }
  768.                     else { $("#ul").append(html_2); tas = true; }
  772.                 }
  773.             });
  774.         }
  776.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  777.         // 增加点击事件
  778.         obj.addEvent = function () {
  780.             var that = this;//保存当前对象
  781.             this.checked = false;//保存选中当前棋子的索引
  782.             $(canvas).on("mousedown", function (ev) {  //鼠标按下
  783.                 for (var j = 1; j <= 10; j++) {
  784.                     for (var i = 1; i <= 9; i++) {
  785.                         //计算当前棋子的位置坐标
  786.                         var temp_i = i * obj.chunk;
  787.                         var temp_j = j * obj.chunk;
  788.                         //计算当前位置和鼠标位置之间的距离
  789.                         var distanct = Math.sqrt(Math.pow(temp_i - ev.offsetX, 2) + Math.pow(temp_j - ev.offsetY, 2));
  791.                         if (distanct <= that.radius) {
  792.                             var overChess = false;
  793.                             $.each(that.cheer_arr_ALL, function (ii, ee) {
  794.                                 if (ee.x == i && ee.y == j) {
  795.                                     overChess = true;
  796.                                     var p = { x: ee.x, y: ee.y };
  797.                                     //                                        console.log(that.checked); 
  798.                                     if (that.currActive != ee.type && !that.checked) {
  799.                                         return false;
  800.                                     }
  802.                                     if (!that.checked) {
  803.                                         console.log("选中一个棋子");
  804.                                         that.drawChecked(p);
  805.                                         that.action = ee;
  806.                                         that.drawCandidate();
  807.                                         that.checked = true;
  808.                                     } else if (that.action.x == ee.x && that.action.y == ee.y) {
  809.                                         console.log("点在原棋子上");
  810.                                         that.updateChess();
  811.                                         that.checked = false;
  812.                                     } else if (that.action.type == ee.type) {
  813.                                         console.log("切换棋子");
  814.                                         that.updateChess();
  815.                                         that.drawChecked(p);
  816.                                         that.action = ee;
  817.                                         that.drawCandidate();
  818.                                     } else {
  819.                                         // 是否能吃子
  820.                                         if (that.Eating_ruless(i, j)) {
  821.                                             that.eat(ii, ee, i, j);
  822.                                         } else if (that.action.text == "帅") {  // 对将
  823.                                             if (that.action.x == i) {
  824.                                                 var canEat = true;
  825.                                                 $.each(that.cheer_arr_ALL, function (iii, lqfs) {
  826.                                                     if (lqfs.x == that.action.x && lqfs.y == j) {
  827.                                                         if (lqfs.text == "将") {
  828.                                                             for (var t = that.action.y - 1; t > j; t--) {
  829.                                                                 if (that.inArray(that.action.x, t)) {
  830.                                                                     canEat = false;
  831.                                                                     break;
  832.                                                                 }
  833.                                                             }
  834.                                                         } else {
  835.                                                             canEat = false;
  836.                                                         }
  837.                                                         return false;
  838.                                                     }
  839.                                                 });
  840.                                                 if (canEat) {
  841.                                                     that.eat(ii, ee, i, j);
  842.                                                 }
  843.                                             }
  844.                                         } else if (that.action.text == "将") {
  845.                                             if (that.action.x == i) {
  846.                                                 var canEat = true;
  847.                                                 $.each(that.cheer_arr_ALL, function (iii, lqfs) {
  848.                                                     if (lqfs.x == that.action.x && lqfs.y == j) {
  849.                                                         if (lqfs.text == "帅") {
  850.                                                             for (var t = that.action.y + 1; t < j; t++) {
  851.                                                                 if (that.inArray(that.action.x, t)) {
  852.                                                                     canEat = false;
  853.                                                                     break;
  854.                                                                 }
  855.                                                             }
  856.                                                         } else {
  857.                                                             canEat = false;
  858.                                                         }
  859.                                                         return false;
  860.                                                     }
  861.                                                 });
  862.                                                 if (canEat) {
  863.                                                     that.eat(ii, ee, i, j);
  864.                                                 }
  865.                                             }
  866.                                         }
  867.                                     }
  868.                                     return false;
  869.                                 }
  870.                             });
  872.                             if (overChess) {
  873.                                 console.log("点在棋子上");
  874.                             } else {
  876.                                 // 是否能移动
  877.                                 if (that.checked && that.Move_rules(i, j)) {
  878.                                     console.log("移动棋子");
  879.                                     that.move(i, j);
  880.                                 }
  882.                             }
  883.                         }
  884.                     }
  885.                 }
  887.             });
  888.         }
  890.         // 记谱
  891.         obj.book = function (ee, i, j) {
  892.             var distance = Math.abs(ee.y - j);
  893.             var Notation;
  894.             if (ee.type == "red") {
  895.                 $("#currActive").text("轮到黑方").css({ "color": "black", })
  896.                 var oldP = this.text_arr[ee.x - 1];
  897.                 var newP = this.text_arr[i - 1];
  898.                 var num = this.text_arr[9 - distance];
  899.                 if (j < ee.y) {
  900.                     if (ee.x == i) {
  901.                         var tag_1 = '<span style="color: red">进<span>';
  902.                         var tag_2 = '<span style="color: red">' + ee.text + '<span>';
  903.                         console.log(ee.text + oldP + "进" + num);
  904.                         Notation = tag_2 + oldP + tag_1 + num;
  905.                     } else {
  906.                         var tag_1 = '<span style="color: red">进<span>';
  907.                         var tag_2 = '<span style="color: red">' + ee.text + '<span>';
  908.                         console.log(ee.text + oldP + "进" + newP);
  909.                         Notation = tag_2 + oldP + tag_1 + newP;
  910.                     }
  911.                 } else if (j > ee.y) {
  912.                     if (ee.x == i) {
  913.                         var tag_1 = '<span style="color: red">退<span>';
  914.                         var tag_2 = '<span style="color: red">' + ee.text + '<span>';
  915.                         console.log(ee.text + oldP + "退" + num);
  916.                         Notation = tag_2 + oldP + tag_1 + num;
  917.                     } else {
  918.                         var tag_1 = '<span style="color: red">退<span>';
  919.                         var tag_2 = '<span style="color: red">' + ee.text + '<span>';
  920.                         console.log(ee.text + oldP + "退" + newP);
  921.                         Notation = tag_2 + oldP + tag_1 + newP;
  922.                     }
  923.                 } else {
  924.                     var tag_1 = '<span style="color: red">平<span>';
  925.                     var tag_2 = '<span style="color: red">' + ee.text + '<span>';
  926.                     console.log(ee.text + oldP + "平" + newP);
  927.                     Notation = tag_2 + oldP + tag_1 + newP;
  928.                 }
  929.             } else {
  930.                 $("#currActive").text("轮到红方").css({ "color": "red", })
  931.                 if (j > ee.y) {
  932.                     if (ee.x == i) {
  933.                         console.log(ee.text + ee.x + "进" + distance);
  934.                         Notation = ee.text + ee.x + "进" + distance
  935.                     } else {
  936.                         console.log(ee.text + ee.x + "进" + i);
  937.                         Notation = ee.text + ee.x + "进" + i;
  938.                     }
  939.                 } else if (j < ee.y) {
  940.                     if (ee.x == i) {
  941.                         console.log(ee.text + ee.x + "退" + distance);
  942.                         Notation = ee.text + ee.x + "退" + distance;
  943.                     } else {
  944.                         console.log(ee.text + ee.x + "退" + i);
  945.                         Notation = ee.text + ee.x + "退" + i;
  946.                     }
  947.                 } else {
  948.                     console.log(ee.text + ee.x + "平" + i);
  949.                     Notation = ee.text + ee.x + "平" + i;
  950.                 }
  951.             }
  952.             this.Notations.push(Notation);
  953.         }
  954.         // 是否结束
  955.         obj.isOver = function (ee) {
  956.             if (ee.text == "将") {
  957.                 $("#shuying").html('<p>' + "结束红方赢" + '</p>').css({ "background": "yellow", "color": "red" });
  958.                 $("#ul").empty();
  959.                 return true;
  960.             } else if (ee.text == "帅") {
  961.                 $("#shuying").html('<p>' + "结束黑方赢" + '</p>').css({ "background": "yellow", "color": "black" });
  962.                 $("#ul").empty();
  963.                 return true;
  964.             } else {
  965.                 return false;
  966.             }
  968.         }
  970.         /*--------------------------------------------------------------------------------------------------------------------------------------*/
  972.         // 移动
  973.         obj.move = function (i, j) {
  974.             var that = this;
  975.             $.each(that.cheer_arr_ALL, function (iii, lqfs) {
  976.                 if (lqfs.x == that.action.x && lqfs.y == that.action.y) {
  977.                     that.book(lqfs, i, j);
  978.                     lqfs.x = i;
  979.                     lqfs.y = j;
  980.                     that.currActive = lqfs.type == "red" ? "black" : "red";
  981.                     return false;
  982.                 }
  983.             });
  984.             that.updateChess();
  985.             that.checked = false;
  986.         }
  988.         // 吃子
  989.         obj.eat = function (ii, ee, i, j) {
  990.             this.cheer_arr_ALL.splice(ii, 1);
  991.             this.move(i, j);
  992.             if (this.isOver(ee)) {
  993.                 this.ctx.clearRect(0, 0, canvas.width, canvas.height);
  994.                 this.init();
  995.                 return false;
  996.             };
  997.         }
  999.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  1000.         // 棋子移动规则
  1001.         obj.Move_rules = function (i, j) {
  1002.             switch (this.action.text) {
  1003.                 case "車":
  1004.                     return this.rules_Car(i, j);
  1005.                 case "馬":
  1006.                     return this.rules_Horse(i, j);
  1007.                 case "相":
  1008.                     return this.rules_Elephant_r(i, j);
  1009.                 case "象":
  1010.                     return this.rules_Elephant_b(i, j);
  1011.                 case "仕":
  1012.                     return this.rules_Scholar_r(i, j);
  1013.                 case "士":
  1014.                     return this.rules_Scholar_b(i, j);
  1015.                 case "帅":
  1016.                     return this.rules_Boss_r(i, j);
  1017.                 case "将":
  1018.                     return this.rules_Boss_b(i, j);
  1019.                 case "兵":
  1020.                     return this.rules_Soldier_r(i, j);
  1021.                 case "卒":
  1022.                     return this.rules_Soldier_b(i, j);
  1023.                 case "炮":
  1024.                     if (this.rules_Cannon(i, j) == 0) {
  1025.                         return true;
  1026.                     }
  1027.                     return false;
  1028.             }
  1029.         }
  1030.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  1031.         // 棋子吃子规则
  1032.         obj.Eating_ruless = function (i, j) {
  1033.             switch (this.action.text) {
  1034.                 case "車":
  1035.                     return this.rules_Car(i, j);
  1036.                 case "馬":
  1037.                     return this.rules_Horse(i, j);
  1038.                 case "相":
  1039.                     return this.rules_Elephant_r(i, j);
  1040.                 case "象":
  1041.                     return this.rules_Elephant_b(i, j);
  1042.                 case "仕":
  1043.                     return this.rules_Scholar_r(i, j);
  1044.                 case "士":
  1045.                     return this.rules_Scholar_b(i, j);
  1046.                 case "帅":
  1047.                     return this.rules_Boss_r(i, j);
  1048.                 case "将":
  1049.                     return this.rules_Boss_b(i, j);
  1050.                 case "兵":
  1051.                     return this.rules_Soldier_r(i, j);
  1052.                 case "卒":
  1053.                     return this.rules_Soldier_b(i, j);
  1054.                 case "炮":
  1055.                     if (this.rules_Cannon(i, j) == 1) {
  1056.                         return true;
  1057.                     }
  1058.                     return false;
  1059.             }
  1060.         }
  1061.         /*---------------------------------------------------------------------------------------------------------------------------------*/
  1062.         //各个棋子的规则
  1064.         // 車的规则
  1065.         obj.rules_Car = function (i, j) {
  1066.             if (this.action.x == i || this.action.y == j) {
  1068.                 if (this.action.x == i) {
  1069.                     if (this.action.y < j) {
  1070.                         console.log("车下");
  1071.                         var hasObstacle = false;
  1072.                         for (var p = this.action.y + 1; p < j; p++) {
  1073.                             if (this.inArray(i, p)) {
  1074.                                 hasObstacle = true;
  1075.                                 break;
  1076.                             }
  1077.                         }
  1078.                         if (hasObstacle) {
  1079.                             return false;
  1080.                         }
  1081.                     }
  1082.                     if (this.action.y > j) {
  1083.                         console.log("车上");
  1084.                         var hasObstacle = false;
  1085.                         for (var p = this.action.y - 1; p > j; p--) {
  1086.                             if (this.inArray(i, p)) {
  1087.                                 hasObstacle = true;
  1088.                                 break;
  1089.                             }
  1090.                         }
  1091.                         if (hasObstacle) {
  1092.                             return false;
  1093.                         }
  1094.                     }
  1095.                 }
  1096.                 if (this.action.y == j) {
  1097.                     if (this.action.x < i) {
  1098.                         console.log("车右");
  1099.                         var hasObstacle = false;
  1100.                         for (var p = this.action.x + 1; p < i; p++) {
  1101.                             if (this.inArray(p, j)) {
  1102.                                 hasObstacle = true;
  1103.                                 break;
  1104.                             }
  1105.                         }
  1106.                         if (hasObstacle) {
  1107.                             return false;
  1108.                         }
  1109.                     }
  1110.                     if (this.action.x > i) {
  1111.                         console.log("车左");
  1112.                         var hasObstacle = false;
  1113.                         for (var p = this.action.x - 1; p > i; p--) {
  1114.                             if (this.inArray(p, j)) {
  1115.                                 hasObstacle = true;
  1116.                                 break;
  1117.                             }
  1118.                         }
  1119.                         if (hasObstacle) {
  1120.                             return false;
  1121.                         }
  1122.                     }
  1123.                 }
  1124.                 return true;
  1125.             }
  1126.             return false;
  1127.         }
  1128.         // 馬的规则
  1129.         obj.rules_Horse = function (i, j) {
  1130.             var hasObstacle = false;
  1131.             var that = this;
  1132.             if ((Math.abs(this.action.x - i) == 1 && Math.abs(this.action.y - j) == 2)
  1133.                 || (Math.abs(this.action.x - i) == 2 && Math.abs(this.action.y - j) == 1)) {
  1134.                 if (this.action.x - i == 2) {  // 左
  1135.                     $.each(that.cheer_arr_ALL, function (ii, ee) {
  1136.                         if (ee.x == that.action.x - 1 && ee.y == that.action.y) {
  1137.                             hasObstacle = true;
  1138.                             return false;
  1139.                         }
  1140.                     });
  1141.                     if (hasObstacle) {
  1142.                         return false;
  1143.                     }
  1144.                 } else if (i - that.action.x == 2) {  // 右
  1145.                     $.each(that.cheer_arr_ALL, function (ii, ee) {
  1146.                         if (ee.x == that.action.x + 1 && ee.y == that.action.y) {
  1147.                             hasObstacle = true;
  1148.                             return false;
  1149.                         }
  1150.                     });
  1151.                     if (hasObstacle) {
  1152.                         return false;
  1153.                     }
  1154.                 } else if (that.action.y - j == 2) {  // 上
  1155.                     $.each(that.cheer_arr_ALL, function (ii, ee) {
  1156.                         if (ee.x == that.action.x && ee.y == that.action.y - 1) {
  1157.                             hasObstacle = true;
  1158.                             return false;
  1159.                         }
  1160.                     });
  1161.                     if (hasObstacle) {
  1162.                         return false;
  1163.                     }
  1164.                 } else if (j - that.action.y == 2) {  // 下
  1165.                     $.each(that.cheer_arr_ALL, function (ii, ee) {
  1166.                         if (ee.x == that.action.x && ee.y == that.action.y + 1) {
  1167.                             hasObstacle = true;
  1168.                             return false;
  1169.                         }
  1170.                     });
  1171.                     if (hasObstacle) {
  1172.                         return false;
  1173.                     }
  1174.                 }
  1175.                 return true;
  1176.             }
  1177.             return false;
  1178.         }
  1179.         // 红相的规则
  1180.         obj.rules_Elephant_r = function (i, j) {
  1181.             var hasObstacle = false;
  1182.             var that = this;
  1183.             if ((Math.abs(that.action.x - i) == 2 && Math.abs(that.action.y - j) == 2) && j >= 6) {
  1184.                 var vgaX = (that.action.x + i) / 2;
  1185.                 var vgaY = (that.action.y + j) / 2;
  1186.                 console.log(vgaX);
  1187.                 $.each(that.cheer_arr_ALL, function (ii, ee) {
  1188.                     if (ee.x == vgaX && ee.y == vgaY) {
  1189.                         hasObstacle = true;
  1190.                         return false;
  1191.                     }
  1192.                 });
  1193.                 if (hasObstacle) {
  1194.                     return false;
  1195.                 }
  1196.                 return true;
  1197.             }
  1199.             return false;
  1200.         }
  1202.         // 黑象的规则
  1203.         obj.rules_Elephant_b = function (i, j) {
  1204.             var hasObstacle = false;
  1205.             var that = this;
  1206.             if ((Math.abs(that.action.x - i) == 2 && Math.abs(that.action.y - j) == 2) && j < 6) {
  1207.                 var vgaX = (that.action.x + i) / 2;
  1208.                 var vgaY = (that.action.y + j) / 2;
  1209.                 //                    console.log(vgaX);
  1210.                 $.each(that.cheer_arr_ALL, function (ii, ee) {
  1211.                     if (ee.x == vgaX && ee.y == vgaY) {
  1212.                         hasObstacle = true;
  1213.                         return false;
  1214.                     }
  1215.                 });
  1216.                 if (hasObstacle) {
  1217.                     return false;
  1218.                 }
  1219.                 return true;
  1220.             }
  1221.             return false;
  1222.         }
  1224.         // 红仕的规则
  1225.         obj.rules_Scholar_r = function (i, j) {
  1226.             if (this.action.x == 5 && this.action.y == 9) {
  1227.                 if (Math.abs(this.action.x - i) == 1 && Math.abs(this.action.y - j) == 1) {
  1228.                     return true;
  1229.                 }
  1230.             }
  1231.             else if (i == 5 && j == 9) {
  1232.                 return true;
  1233.             }
  1234.             return false;
  1235.         }
  1237.         // 黑仕的规则
  1238.         obj.rules_Scholar_b = function (i, j) {
  1239.             if (this.action.x == 5 && this.action.y == 2) {
  1240.                 if (Math.abs(this.action.x - i) == 1 && Math.abs(this.action.y - j) == 1) {
  1241.                     return true;
  1242.                 }
  1243.             } else if (i == 5 && j == 2) {
  1244.                 return true;
  1245.             }
  1246.             return false;
  1247.         }
  1249.         // 帅的规则
  1250.         obj.rules_Boss_r = function (i, j) {
  1251.             if ((Math.abs(this.action.x - i) == 1 && this.action.y == j)
  1252.                 || (this.action.x == i && Math.abs(this.action.y - j) == 1)) {
  1253.                 if (i >= 4 && i <= 6 && j >= 8 && j <= 10) {
  1254.                     return true;
  1255.                 } else {
  1256.                     return false;
  1257.                 }
  1259.             }
  1260.             return false;
  1261.         }
  1263.         // 将的规则
  1264.         obj.rules_Boss_b = function (i, j) {
  1265.             if ((Math.abs(this.action.x - i) == 1 && this.action.y == j)
  1266.                 || (this.action.x == i && Math.abs(this.action.y - j) == 1)) {
  1267.                 if (i >= 4 && i <= 6 && j >= 1 && j <= 3) {
  1268.                     return true;
  1269.                 } else {
  1270.                     return false;
  1271.                 }
  1272.             }
  1273.             return false;
  1274.         }
  1276.         // 兵的规则
  1277.         obj.rules_Soldier_r = function (i, j) {
  1278.             if (this.action.y <= 5) {
  1279.                 if ((this.action.x == i && this.action.y - 1 == j) || (this.action.x - 1 == i && this.action.y == j) || (this.action.x + 1 == i && this.action.y == j)) {
  1280.                     return true;
  1281.                 }
  1282.             } else {
  1283.                 if (this.action.x == i && this.action.y - 1 == j) {
  1284.                     return true;
  1285.                 }
  1286.             }
  1288.             return false;
  1289.         }
  1291.         // 卒的规则
  1292.         obj.rules_Soldier_b = function (i, j) {
  1293.             if (this.action.y > 5) {
  1294.                 if ((this.action.x == i && this.action.y + 1 == j) || (this.action.x - 1 == i && this.action.y == j) || (this.action.x + 1 == i && this.action.y == j)) {
  1295.                     return true;
  1296.                 }
  1297.             } else {
  1298.                 if (this.action.x == i && this.action.y + 1 == j) {
  1299.                     return true;
  1300.                 }
  1301.             }
  1303.             return false;
  1304.         }
  1306.         // 炮的规则
  1307.         obj.rules_Cannon = function (i, j) {
  1308.             var that = this;
  1309.             if (this.action.x == i || this.action.y == j) {
  1310.                 var t = 0;
  1311.                 if (this.action.x == i) {
  1312.                     var temp = this.action.y;
  1313.                     if (temp < j) {
  1314.                         while (++temp != j) {
  1315.                             $.each(this.cheer_arr_ALL, function (ii, ee) {
  1316.                                 if (ee.x == that.action.x && ee.y == temp) {
  1317.                                     t++;
  1318.                                     return false;
  1319.                                 }
  1320.                             });
  1321.                         }
  1323.                         return t;
  1324.                     } else {
  1325.                         while (--temp != j) {
  1326.                             $.each(this.cheer_arr_ALL, function (ii, ee) {
  1327.                                 if (ee.x == that.action.x && ee.y == temp) {
  1328.                                     t++;
  1329.                                     return false;
  1330.                                 }
  1331.                             });
  1332.                         }
  1333.                         return t;
  1334.                     }
  1335.                 } else {
  1336.                     var temp = this.action.x;
  1337.                     if (temp < i) {
  1338.                         while (++temp != i) {
  1339.                             $.each(this.cheer_arr_ALL, function (ii, ee) {
  1340.                                 if (ee.x == temp && ee.y == that.action.y) {
  1341.                                     t++;
  1342.                                     return false;
  1343.                                 }
  1344.                             });
  1345.                         }
  1346.                         return t;
  1348.                     } else {
  1349.                         while (--temp != i) {
  1350.                             $.each(this.cheer_arr_ALL, function (ii, ee) {
  1351.                                 if (ee.x == temp && ee.y == that.action.y) {
  1352.                                     t++;
  1353.                                     return false;
  1354.                                 }
  1355.                             });
  1356.                         }
  1357.                         return t;
  1358.                     }
  1359.                 }
  1360.             }
  1361.             return 2;
  1362.         }
  1365.         obj.inArray = function (x, y) {
  1366.             var hasObstacle = false;
  1367.             $.each(this.cheer_arr_ALL, function (ii, ee) {
  1368.                 if (ee.x == x && ee.y == y) {
  1369.                     hasObstacle = true;
  1370.                     return false;
  1371.                 }
  1372.             });
  1373.             return hasObstacle;
  1374.         }
  1375.         obj.init();
  1377.     </script>
  1380. </html>