canvas 实现中国象棋


Posted in Javascript onFebruary 17, 2017

效果如下:

canvas 实现中国象棋

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 #canvasWrap{
  width: 600px;
  height: 550px;
  margin: 50px auto;
 }
 #currActive{
  font-size: 20px;
  font-weight: bold;
  /*text-align: center;*/
  margin-left:230px ;
 }
 #canvas{
  float: left;
  background: #EAC591;
 }
 #panel{
  width: 80px;
  padding: 10px;
  float: right;
 }
 #ul{
  list-style: none;
  margin: 0;
  padding: 0;
 }
 #ul li{
  padding: 2px;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 </head>
 <body>
 <div id="canvasWrap">
  <div id="currActive"></div>
  <canvas id="canvas" width="500" height="550"></canvas>
  <div id="panel">
  <ul id="ul"></ul>
  </div>
 </div>
 <script>
  var obj = {};
  // 初始化
  obj.init = function(args){
  var canvas = document.getElementById("canvas");
  this.ctx = canvas.getContext("2d");
//  this.chunk =args&&args.chunk?args.chunk:50; 
//  this.radius =args&&args.radius?args.radius:23; 
//  this.CandidateCircleR =args&&args.ccr?args.ccr:5;
  this.radius = 23;
  this.chunk =50;
  this.CandidateCircleR = 5;
  $("#currActive").text("红方");
  this.steps = [];      // 记录步骤
  this.currActive = "red";  // 先下
  this.init_back();
  this.init_chess();
  $(canvas).unbind();
  this.addEvent();
  }
  // 棋盘初始化
  obj.init_back = function(){
  this.drawRowLine();
  this.drawColLine();
  this.ctx.clearRect(this.chunk+1, this.chunk*5+1, this.chunk*8-2, this.chunk-2);
  this.drawsharpS();
  this.drawX();
  this.drawText();
  }
  // 棋子初始化
  obj.init_chess = function(){
  var Car_b1 = {x:1,y:1,text:"?"}
  var Horse_b1 = {x:2,y:1,text:"?"}
  var Elephant_b1 = {x:3,y:1,text:"象"}
  var Scholar_b1 = {x:4,y:1,text:"士"}
  var Boss_b = {x:5,y:1,text:"将"} 
  var Scholar_b2 = {x:6,y:1,text:"士"}
  var Elephant_b2 = {x:7,y:1,text:"象"}
  var Horse_b2 = {x:8,y:1,text:"?"}
  var Car_b2 = {x:9,y:1,text:"?"}
  var Cannon_b1 = {x:2,y:3,text:"炮"}
  var Cannon_b2 = {x:8,y:3,text:"炮"}
  var Soldier_b1 = {x:1,y:4,text:"卒"}
  var Soldier_b2 = {x:3,y:4,text:"卒"}
  var Soldier_b3 = {x:5,y:4,text:"卒"}
  var Soldier_b4 = {x:7,y:4,text:"卒"}
  var Soldier_b5 = {x:9,y:4,text:"卒"}
  var Car_r1 = {x:1,y:10,text:"?"}
  var Horse_r1 = {x:2,y:10,text:"?"}
  var Elephant_r1 = {x:3,y:10,text:"相"}
  var Scholar_r1 = {x:4,y:10,text:"仕"}
  var Boss_r = {x:5,y:10,text:"帅"} 
  var Scholar_r2 = {x:6,y:10,text:"仕"}
  var Elephant_r2 = {x:7,y:10,text:"相"}
  var Horse_r2 = {x:8,y:10,text:"?"}
  var Car_r2 = {x:9,y:10,text:"?"}
  var Cannon_r1 = {x:2,y:8,text:"炮"}
  var Cannon_r2 = {x:8,y:8,text:"炮"}
  var Soldier_r1 = {x:1,y:7,text:"兵"}
  var Soldier_r2 = {x:3,y:7,text:"兵"}
  var Soldier_r3 = {x:5,y:7,text:"兵"}
  var Soldier_r4 = {x:7,y:7,text:"兵"}
  var Soldier_r5 = {x:9,y:7,text:"兵"}
  this.cheer_arr_B = [Car_b1,Horse_b1,Elephant_b1,Scholar_b1,Boss_b,Scholar_b2,Elephant_b2,Horse_b2,Car_b2,
Cannon_b1,Cannon_b2,Soldier_b1,Soldier_b2,Soldier_b3,Soldier_b4,Soldier_b5];
  this.cheer_arr_R = [Car_r1,Horse_r1,Elephant_r1,Scholar_r1,Boss_r,Scholar_r2,Elephant_r2,Horse_r2,Car_r2,
Cannon_r1,Cannon_r2,Soldier_r1,Soldier_r2,Soldier_r3,Soldier_r4,Soldier_r5];
  var that = this;
  $.each(this.cheer_arr_B,function(i,e){ 
   e.color = "#000";
   e.bgcolor = "#fff";
   e.bgColor_b = "#000";
   e.type = "black";
   that.drawPiece(e);
   that.drawChessText(e);
  });
  $.each(this.cheer_arr_R,function(i,e){ 
   e.color = "#f00";
   e.bgcolor = "#fff";
   e.bgColor_b = "#f00";
   e.type = "red";
   that.drawPiece(e);
   that.drawChessText(e);
  });
  this.cheer_arr_ALL = this.cheer_arr_B.concat(this.cheer_arr_R); 
  }
  // 更新棋局
  obj.updateChess = function(){
  this.ctx.clearRect(0,0,canvas.width,canvas.height);
  this.init_back();
  var that = this;
  $.each(this.cheer_arr_ALL,function(i,e){   
   that.drawPiece(e);
   that.drawChessText(e);
  });
  $("#ul").empty();
  $.each(this.steps,function(iii,eee){
   $("#ul").append("<li>"+eee+"</li>");
  });
  }
  // 画横线
  obj.drawRowLine = function(){
  for(var i =1;i<=10;i++){
   this.drawLine(1,i,9,i);
  }
  }
  // 画竖线
  obj.drawColLine = function(){
  for(var i =1;i<=9;i++){
   this.drawLine(i,1,i,10);
  }
  }
  // 画直线
  obj.drawLine = function(x0,y0,x1,y1,lw){
  var x0 = x0*this.chunk;
  var y0 = y0*this.chunk;
  var x1 = x1*this.chunk;
  var y1 = y1*this.chunk;
  this.ctx.beginPath();
  this.ctx.strokeStyle = "#000";
  this.ctx.lineWidth =lw?lw:1;
  this.ctx.moveTo(x0,y0);
  this.ctx.lineTo(x1,y1);
  this.ctx.stroke();
  this.ctx.closePath();
  }
  // 画#
  obj.drawsharpS = function(){
  this.round(2,3);
  this.round(8,3);
  this.round(1,4);
  this.round(3,4);
  this.round(5,4);
  this.round(7,4);
  this.round(9,4);
  this.round(2,8);
  this.round(8,8);
  this.round(1,7);
  this.round(3,7);
  this.round(5,7);
  this.round(7,7);
  this.round(9,7);
  }
  // 画单个#
  obj.round = function(x0,y0){
  var x0 = x0*this.chunk;
  var y0 = y0*this.chunk;
  this.ctx.beginPath();
  this.ctx.strokeStyle = "#000";
  this.ctx.lineWidth =1;
  if(x0!=this.chunk){
   // 左上
   this.ctx.moveTo(x0-5,y0-10);
   this.ctx.lineTo(x0-5,y0-5);
   this.ctx.lineTo(x0-10,y0-5);
   // 左下
   this.ctx.moveTo(x0-5,y0+10);
   this.ctx.lineTo(x0-5,y0+5);
   this.ctx.lineTo(x0-10,y0+5);
  }
  if(x0!=this.chunk*9){
   // 右上
   this.ctx.moveTo(x0+5,y0-10);
   this.ctx.lineTo(x0+5,y0-5);
   this.ctx.lineTo(x0+10,y0-5);
   // 右下
   this.ctx.moveTo(x0+5,y0+10);
   this.ctx.lineTo(x0+5,y0+5);
   this.ctx.lineTo(x0+10,y0+5);
  }
  this.ctx.stroke();
  this.ctx.closePath(); 
  }
  // 画X
  obj.drawX = function(){
  this.drawLine(4,1,6,3,0.5);
  this.drawLine(4,3,6,1,0.5);
  this.drawLine(4,8,6,10,0.5);
  this.drawLine(4,10,6,8,0.5);
  }
  // 画楚河/?h界
  obj.drawText = function(){
  this.ctx.font = "bold 30px Courier New";
    this.ctx.fillStyle = "#000";
    this.ctx.fillText("楚 河", this.chunk*2, this.chunk*5+this.chunk/2+10);
    this.ctx.fillText("?h 界", this.chunk*6, this.chunk*5+this.chunk/2+10);
    this.ctx.font = "12px Courier New";
    this.text_arr =["九","八","七","六","五","四","三","二","一"];
    for(var i=0;i<9;i++){
    this.ctx.fillText((i+1).toString(), this.chunk*(i+1)-5, 20);
    this.ctx.fillText(this.text_arr[i], this.chunk*(i+1)-5, this.chunk*10+30+10);
    }
  }
  // 画棋子形状
  obj.drawPiece = function(e){
  this.ctx.beginPath();
  this.ctx.fillStyle =e.bgcolor;
  this.ctx.strokeStyle = e.bgColor_b;
  this.ctx.lineWidth =2;
       this.ctx.arc(e.x*this.chunk, e.y*this.chunk, this.radius, 0, Math.PI * 2, true);
       this.ctx.closePath();
       this.ctx.fill();
       this.ctx.stroke();
  }
  // 画棋子文字
  obj.drawChessText = function(e){
  this.ctx.font = "bold 30px Courier New";
    this.ctx.fillStyle = e.color;
    var offset = this.ctx.measureText(e.text).width/2;
    this.ctx.fillText(e.text, e.x*this.chunk-offset, e.y*this.chunk+10);
  }
  // 增加点击事件
  obj.addEvent = function(){
  var that = this;
  this.checked = false;
  $(canvas).on("mousedown",function(ev){
   for(var j=1;j<=10;j++){
   for(var i=1;i<=9;i++){
    var temp_i = i*that.chunk;
    var temp_j = j*that.chunk;
    var distanct = Math.sqrt(Math.pow(temp_i-ev.offsetX,2)+Math.pow(temp_j-ev.offsetY,2));
    if(distanct<=that.radius){
    var overChess = false;
    $.each(that.cheer_arr_ALL,function(ii,ee){
     if(ee.x ==i&&ee.y==j){
     overChess = true;
     var p ={x:ee.x,y:ee.y};
//     console.log(that.checked); 
     if(that.currActive != ee.type&&!that.checked){
      return false;
     }
     if(!that.checked){
//      console.log("选中一个棋子");
      that.drawChecked(p);
      that.preChess = ee;
      that.drawCandidate();
      that.checked = true;
     }else if(that.preChess.x == ee.x&&that.preChess.y == ee.y){
//      console.log("点在原棋子上");
      that.updateChess();
      that.checked = false;
     }else if(that.preChess.type == ee.type){
//      console.log("切换棋子");
      that.updateChess();
      that.drawChecked(p);
      that.preChess = ee;
      that.drawCandidate();
     }else{
      // 是否能吃子
      if(that.Eat_rule(i,j)){
      that.eat(ii,ee,i,j);
      }else if(that.preChess.text == "帅"){ // 对将
      if(that.preChess.x == i){
       var canEat =true;
       $.each(that.cheer_arr_ALL,function(iii,eee){
       if(eee.x ==that.preChess.x&&eee.y==j){
        if(eee.text == "将"){
        for(var t=that.preChess.y-1;t>j;t--){
         if(that.inArray(that.preChess.x,t)){
         canEat = false;
         break;
         }
        }
        }else{
        canEat = false;
        }
        return false;
       }
       });
       if(canEat){
       that.eat(ii,ee,i,j);
       }
      }
      }else if(that.preChess.text == "将"){
      if(that.preChess.x == i){
       var canEat =true;
       $.each(that.cheer_arr_ALL,function(iii,eee){
       if(eee.x ==that.preChess.x&&eee.y==j){
        if(eee.text == "帅"){
        for(var t=that.preChess.y+1;t<j;t++){
         if(that.inArray(that.preChess.x,t)){
         canEat = false;
         break;
         }
        }
        }else{
        canEat = false;
        }
        return false;
       }
       });
       if(canEat){
       that.eat(ii,ee,i,j);
       }
      }
      }
     } 
     return false;
     }
    });
    if(overChess){
//     alert("点在棋子上");
    }else{
     // 是否能移动
     if(that.checked&&that.Move_rule(i,j)){
//     console.log("移动棋子");
     that.move(i,j);
     }
    }
    }
   }
   }
  });
  }
  // 记谱
  obj.note = function(ee,i,j){
  var distance = Math.abs(ee.y-j);
  var step;
  if(ee.type=="red"){
   $("#currActive").text("黑方");
   var oldP = this.text_arr[ee.x-1];
   var newP = this.text_arr[i-1];
   var num = this.text_arr[9-distance];
   if(j<ee.y){
   if(ee.x == i){
    console.log(ee.text+oldP+"进"+num);
    step = ee.text+oldP+"进"+num;
   }else{
    console.log(ee.text+oldP+"进"+newP);
    step = ee.text+oldP+"进"+newP;
   }
   }else if(j>ee.y){
   if(ee.x == i){
    console.log(ee.text+oldP+"退"+num);
    step = ee.text+oldP+"退"+num;
   }else{
    console.log(ee.text+oldP+"退"+newP);
    step = ee.text+oldP+"退"+newP;
   }
   }else{
   console.log(ee.text+oldP+"平"+newP);
   step = ee.text+oldP+"平"+newP;
   }
  }else{
   $("#currActive").text("红方");
   if(j>ee.y){
   if(ee.x == i){
    console.log(ee.text+ee.x+"进"+distance);
    step = ee.text+ee.x+"进"+distance
   }else{
    console.log(ee.text+ee.x+"进"+i);
    step = ee.text+ee.x+"进"+i;
   }
   }else if(j<ee.y){
   if(ee.x == i){
    console.log(ee.text+ee.x+"退"+distance);
    step = ee.text+ee.x+"退"+distance;
   }else{
    console.log(ee.text+ee.x+"退"+i);
    step = ee.text+ee.x+"退"+i;
   }
   }else{
   console.log(ee.text+ee.x+"平"+i);
   step = ee.text+ee.x+"平"+i;
   } 
  }
  this.steps.push(step); 
  }
  // 是否结束
  obj.isOver = function(ee){
  if(ee.text == "将"){
   alert("you win");
   $("#ul").empty();
   return true;
  }else if(ee.text == "帅"){
   alert("you lose");
   $("#ul").empty();
   return true;
  }else{
   return false;
  }
  }
  // 吃子
  obj.eat = function(ii,ee,i,j){
  this.cheer_arr_ALL.splice(ii,1);
  this.move(i,j);
  if(this.isOver(ee)){
   this.ctx.clearRect(0,0,canvas.width,canvas.height);
   this.init();
   return false;
  };
  }
  // 移动
  obj.move = function(i,j){
  var that = this;
  $.each(that.cheer_arr_ALL,function(iii,eee){
   if(eee.x ==that.preChess.x&&eee.y==that.preChess.y){
   that.note(eee,i,j);
   eee.x= i;
   eee.y = j;
   that.currActive = eee.type=="red"?"black":"red";
   return false;
   }
  });
  that.updateChess();
  that.checked = false;
  }
  // 画选中棋子状态
  obj.drawChecked = function(p){
  var temp_x = p.x*this.chunk;
  var temp_y = p.y*this.chunk;
  this.ctx.beginPath();
  this.ctx.strokeStyle = "#00f";
  this.ctx.lineWidth =1;
  this.ctx.moveTo(temp_x-this.radius,temp_y-this.radius+10);
  this.ctx.lineTo(temp_x-this.radius,temp_y-this.radius);
  this.ctx.lineTo(temp_x-this.radius+10,temp_y-this.radius);
  this.ctx.moveTo(temp_x-this.radius,temp_y+this.radius-10);
  this.ctx.lineTo(temp_x-this.radius,temp_y+this.radius);
  this.ctx.lineTo(temp_x-this.radius+10,temp_y+this.radius);
  this.ctx.moveTo(temp_x+this.radius,temp_y-this.radius+10);
  this.ctx.lineTo(temp_x+this.radius,temp_y-this.radius);
  this.ctx.lineTo(temp_x+this.radius-10,temp_y-this.radius);
  this.ctx.moveTo(temp_x+this.radius,temp_y+this.radius-10);
  this.ctx.lineTo(temp_x+this.radius,temp_y+this.radius);
  this.ctx.lineTo(temp_x+this.radius-10,temp_y+this.radius);
  this.ctx.stroke();
  this.ctx.closePath(); 
  }
  // 画候选位置
  obj.drawCandidate = function(){
  switch(this.preChess.text){
   case "?":
   var temp_y = this.preChess.y;
   while(!this.inArray(this.preChess.x,++temp_y)&&temp_y<=10){
    this.drawCandidateCircle(this.preChess.x,temp_y);
   }
   var temp_y = this.preChess.y;
   while(!this.inArray(this.preChess.x,--temp_y)&&temp_y>0){
    this.drawCandidateCircle(this.preChess.x,temp_y);
   }
   var temp_x = this.preChess.x;
   while(!this.inArray(++temp_x,this.preChess.y)&&temp_x<10){
    this.drawCandidateCircle(temp_x,this.preChess.y);
   }
   var temp_x = this.preChess.x;
   while(!this.inArray(--temp_x,this.preChess.y)&&temp_x>0){
    this.drawCandidateCircle(temp_x,this.preChess.y);
   }
   break;
   case "?":
   if(!this.inArray(this.preChess.x-2,this.preChess.y-1)
   &&this.preChess.x-2>=1&&this.preChess.y-1>=1
   &&!this.inArray(this.preChess.x-1,this.preChess.y)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y-1);
   }
   if(!this.inArray(this.preChess.x-1,this.preChess.y-2)
   &&this.preChess.x-1>=1&&this.preChess.y-2>=1
   &&!this.inArray(this.preChess.x,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y-2);
   }
   if(!this.inArray(this.preChess.x+1,this.preChess.y-2)
   &&this.preChess.x+1<=9&&this.preChess.y-2>=1
   &&!this.inArray(this.preChess.x,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y-2);
   }
   if(!this.inArray(this.preChess.x+2,this.preChess.y-1)
   &&this.preChess.x+2<=9&&this.preChess.y-1>=1
   &&!this.inArray(this.preChess.x+1,this.preChess.y)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y-1);
   }
   if(!this.inArray(this.preChess.x+2,this.preChess.y+1)
   &&this.preChess.x+2<=9&&this.preChess.y+1<=10
   &&!this.inArray(this.preChess.x+1,this.preChess.y)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y+1);
   }
   if(!this.inArray(this.preChess.x+1,this.preChess.y+2)
   &&this.preChess.x+1<=9&&this.preChess.y+2<=10
   &&!this.inArray(this.preChess.x,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y+2);
   }
   if(!this.inArray(this.preChess.x-1,this.preChess.y+2)
   &&this.preChess.x-1>=1&&this.preChess.y+2<=10
   &&!this.inArray(this.preChess.x,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y+2);
   }
   if(!this.inArray(this.preChess.x-2,this.preChess.y+1)
   &&this.preChess.x-2>=1&&this.preChess.y+1<=10
   &&!this.inArray(this.preChess.x-1,this.preChess.y)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y+1);
   }
   break;
   case "相":
   if(this.preChess.y==10){
    if(!this.inArray(this.preChess.x-2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x+2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y-2);
    }
   }else if(this.preChess.y==6){
    if(!this.inArray(this.preChess.x-2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y+2);
    }
    if(!this.inArray(this.preChess.x+2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y+2);
    }
   }else if(this.preChess.x==1){
    if(!this.inArray(this.preChess.x+2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x+2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y+2);
    }
   }else if(this.preChess.x==9){
    if(!this.inArray(this.preChess.x-2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x-2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y+2);
    }
   }else{
    if(!this.inArray(this.preChess.x+2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x+2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y+2);
    }
    if(!this.inArray(this.preChess.x-2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x-2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y+2);
    }
   }
   break;
   case "象":
   if(this.preChess.y==1){
    if(!this.inArray(this.preChess.x-2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y+2);
    }
    if(!this.inArray(this.preChess.x+2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y+2);
    }
   }else if(this.preChess.y==5){
    if(!this.inArray(this.preChess.x-2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x+2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y-2);
    }
   }else if(this.preChess.x==1){
    if(!this.inArray(this.preChess.x+2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x+2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y+2);
    }
   }else if(this.preChess.x==9){
    if(!this.inArray(this.preChess.x-2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x-2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y+2);
    }
   }else{
    if(!this.inArray(this.preChess.x+2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x+2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x+1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+2,this.preChess.y+2);
    }
    if(!this.inArray(this.preChess.x-2,this.preChess.y-2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y-2);
    }
    if(!this.inArray(this.preChess.x-2,this.preChess.y+2)
    &&!this.inArray(this.preChess.x-1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-2,this.preChess.y+2);
    }
   }
   break;
   case "仕":
   if(this.preChess.x==5&&this.preChess.y==9){
    if(!this.inArray(this.preChess.x-1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y-1);
    }
    if(!this.inArray(this.preChess.x-1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y+1);
    }
    if(!this.inArray(this.preChess.x+1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y-1);
    }
    if(!this.inArray(this.preChess.x+1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y+1);
    }
   }else{
    this.drawCandidateCircle(5,9);
   }
   break;
   case "士":
   if(this.preChess.x==5&&this.preChess.y==2){
    if(!this.inArray(this.preChess.x-1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y-1);
    }
    if(!this.inArray(this.preChess.x-1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y+1);
    }
    if(!this.inArray(this.preChess.x+1,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y-1);
    }
    if(!this.inArray(this.preChess.x+1,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y+1);
    }
   }else{
    this.drawCandidateCircle(5,2);
   }
   break;
   case "帅":
   if(!this.inArray(this.preChess.x,this.preChess.y-1)&&this.preChess.y>8){
    this.drawCandidateCircle(this.preChess.x,this.preChess.y-1);
   }
   if(!this.inArray(this.preChess.x,this.preChess.y+1)&&this.preChess.y<10){
    this.drawCandidateCircle(this.preChess.x,this.preChess.y+1);
   }
   if(!this.inArray(this.preChess.x-1,this.preChess.y)&&this.preChess.x>4){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y);
   }
   if(!this.inArray(this.preChess.x+1,this.preChess.y)&&this.preChess.x<6){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y);
   }
   break;
   case "将":
   if(!this.inArray(this.preChess.x,this.preChess.y-1)&&this.preChess.y>1){
    this.drawCandidateCircle(this.preChess.x,this.preChess.y-1);
   }
   if(!this.inArray(this.preChess.x,this.preChess.y+1)&&this.preChess.y<3){
    this.drawCandidateCircle(this.preChess.x,this.preChess.y+1);
   }
   if(!this.inArray(this.preChess.x-1,this.preChess.y)&&this.preChess.x>4){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y);
   }
   if(!this.inArray(this.preChess.x+1,this.preChess.y)&&this.preChess.x<6){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y);
   }
   break;
   case "兵":
   if(this.preChess.y>5&&!this.inArray(this.preChess.x,this.preChess.y-1)){
    this.drawCandidateCircle(this.preChess.x,this.preChess.y-1);
   }else if(this.preChess.y<=5){
    if(!this.inArray(this.preChess.x,this.preChess.y-1)&&this.preChess.y>1){
    this.drawCandidateCircle(this.preChess.x,this.preChess.y-1);
    }
    if(!this.inArray(this.preChess.x-1,this.preChess.y)&&this.preChess.x>1){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y);
    }
    if(!this.inArray(this.preChess.x+1,this.preChess.y)&&this.preChess.x<9){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y);
    }
   }
   break;
   case "卒":
   if(this.preChess.y<=5&&!this.inArray(this.preChess.x,this.preChess.y+1)){
    this.drawCandidateCircle(this.preChess.x,this.preChess.y+1);
   }else if(this.preChess.y>5){
    if(!this.inArray(this.preChess.x,this.preChess.y+1)&&this.preChess.y<10){
    this.drawCandidateCircle(this.preChess.x,this.preChess.y+1);
    }
    if(!this.inArray(this.preChess.x-1,this.preChess.y)&&this.preChess.x>1){
    this.drawCandidateCircle(this.preChess.x-1,this.preChess.y);
    }
    if(!this.inArray(this.preChess.x+1,this.preChess.y)&&this.preChess.x<9){
    this.drawCandidateCircle(this.preChess.x+1,this.preChess.y);
    }
   }
   break;
   case "炮":
   var temp_y = this.preChess.y;
   while(!this.inArray(this.preChess.x,++temp_y)&&temp_y<=10){
    this.drawCandidateCircle(this.preChess.x,temp_y);
   }
   var temp_y = this.preChess.y;
   while(!this.inArray(this.preChess.x,--temp_y)&&temp_y>0){
    this.drawCandidateCircle(this.preChess.x,temp_y);
   }
   var temp_x = this.preChess.x;
   while(!this.inArray(++temp_x,this.preChess.y)&&temp_x<10){
    this.drawCandidateCircle(temp_x,this.preChess.y);
   }
   var temp_x = this.preChess.x;
   while(!this.inArray(--temp_x,this.preChess.y)&&temp_x>0){
    this.drawCandidateCircle(temp_x,this.preChess.y);
   }
   break;
  }
  }
  // 画候选形状
  obj.drawCandidateCircle = function(x,y){
  this.ctx.beginPath();
  this.ctx.fillStyle ="#eee";
  this.ctx.strokeStyle = "#000";
  this.ctx.lineWidth =2;
       this.ctx.arc(x*this.chunk, y*this.chunk, this.CandidateCircleR, 0, Math.PI * 2, true);

//  this.ctx.translate(x*this.chunk,y*this.chunk);
//  this.ctx.rotate(45*Math.PI/180);
//  this.ctx.translate(1*this.chunk,1*this.chunk);//设置画布上的(0,0)位置,也就是旋转的中心点
//   this.ctx.rotate(1*Math.PI/180);
//       this.ctx.fillRect(x*this.chunk-5,y*this.chunk-5,10,10);

       this.ctx.closePath();
       this.ctx.fill();
       this.ctx.stroke();
  }
  // 棋子移动规则
  obj.Move_rule = function(i,j){
  switch(this.preChess.text){
   case "?":
   return this.rule_Car(i,j);
   case "?":
   return this.rule_Horse(i,j); 
   case "相":
   return this.rule_Elephant_r(i,j);
   case "象":
   return this.rule_Elephant_b(i,j);
   case "仕":
   return this.rule_Scholar_r(i,j);
   case "士":
   return this.rule_Scholar_b(i,j);
   case "帅":
   return this.rule_Boss_r(i,j);
   case "将":
   return this.rule_Boss_b(i,j);
   case "兵":
   return this.rule_Soldier_r(i,j);
   case "卒":
   return this.rule_Soldier_b(i,j);
   case "炮":
   if(this.rule_Cannon(i,j)==0){
    return true;
   }
   return false;
  }
  }
  // 棋子吃子规则
  obj.Eat_rule = function(i,j){
  switch(this.preChess.text){
   case "?":
   return this.rule_Car(i,j);
   case "?":
   return this.rule_Horse(i,j); 
   case "相":
   return this.rule_Elephant_r(i,j);
   case "象":
   return this.rule_Elephant_b(i,j);
   case "仕":
   return this.rule_Scholar_r(i,j);
   case "士":
   return this.rule_Scholar_b(i,j);
   case "帅":
   return this.rule_Boss_r(i,j);
   case "将":
   return this.rule_Boss_b(i,j);
   case "兵":
   return this.rule_Soldier_r(i,j);
   case "卒":
   return this.rule_Soldier_b(i,j);
   case "炮":
   if(this.rule_Cannon(i,j)==1){
    return true;
   }
   return false;
  }
  }
  // ?的规则
  obj.rule_Car = function(i,j){
  if(this.preChess.x ==i||this.preChess.y==j){
   if(this.preChess.x ==i){
   if(this.preChess.y<j){
//    console.log("下");
    var hasObstacle = false;
    for(var p = this.preChess.y+1;p<j;p++){
    if(this.inArray(i,p)){
     hasObstacle = true;
     break;
    }
    }
    if(hasObstacle){
    return false;
    }
   }
   if(this.preChess.y>j){
//    console.log("上");
    var hasObstacle = false;
    for(var p = this.preChess.y-1;p>j;p--){
    if(this.inArray(i,p)){
     hasObstacle = true;
     break;
    }
    }
    if(hasObstacle){
    return false;
    }
   }
   }
   if(this.preChess.y ==j){
   if(this.preChess.x <i){
//    console.log("右");
    var hasObstacle = false;
    for(var p = this.preChess.x+1;p<i;p++){
    if(this.inArray(p,j)){
     hasObstacle = true;
     break;
    }
    }
    if(hasObstacle){
    return false;
    }
   }
   if(this.preChess.x >i){
//    console.log("左");
    var hasObstacle = false;
    for(var p = this.preChess.x-1;p>i;p--){
    if(this.inArray(p,j)){
     hasObstacle = true;
     break;
    }
    }
    if(hasObstacle){
    return false;
    }
   }
   }
   return true;
  }
  return false;
  }
  // ?的规则
  obj.rule_Horse = function(i,j){
  var hasObstacle = false;
  var that = this;
  if((Math.abs(this.preChess.x-i)==1&&Math.abs(this.preChess.y-j)==2)
  ||(Math.abs(this.preChess.x-i)==2&&Math.abs(this.preChess.y-j)==1)){
   if(this.preChess.x-i==2){ // 左
   $.each(that.cheer_arr_ALL,function(ii,ee){
    if(ee.x ==that.preChess.x-1&&ee.y==that.preChess.y){
    hasObstacle =true;
    return false;
    }
   });
   if(hasObstacle){
    return false;
   }
   }else if(i-that.preChess.x==2){ // 右
   $.each(that.cheer_arr_ALL,function(ii,ee){
    if(ee.x ==that.preChess.x+1&&ee.y==that.preChess.y){
    hasObstacle =true;
    return false;
    }
   });
   if(hasObstacle){
    return false;
   }
   }else if(that.preChess.y-j==2){ // 上
   $.each(that.cheer_arr_ALL,function(ii,ee){
    if(ee.x ==that.preChess.x&&ee.y==that.preChess.y-1){
    hasObstacle =true;
    return false;
    }
   });
   if(hasObstacle){
    return false;
   }
   }else if(j-that.preChess.y==2){ // 下
   $.each(that.cheer_arr_ALL,function(ii,ee){
    if(ee.x ==that.preChess.x&&ee.y==that.preChess.y+1){
    hasObstacle =true;
    return false;
    }
   });
   if(hasObstacle){
    return false;
   }
   }
   return true;
  }
  return false;
  }
  // 红相的规则
  obj.rule_Elephant_r = function(i,j){
  var hasObstacle = false;
  var that = this;
  if((Math.abs(that.preChess.x-i)==2&&Math.abs(that.preChess.y-j)==2)&&j>=6){
   var vgaX = (that.preChess.x+i)/2;
   var vgaY = (that.preChess.y+j)/2;
   console.log(vgaX);
   $.each(that.cheer_arr_ALL,function(ii,ee){
   if(ee.x ==vgaX&&ee.y==vgaY){
    hasObstacle =true;
    return false;
   }
   });
   if(hasObstacle){
   return false;
   }
   return true;
  }
  return false;
  }
  // 黑象的规则
  obj.rule_Elephant_b = function(i,j){
  var hasObstacle = false;
  var that = this;
  if((Math.abs(that.preChess.x-i)==2&&Math.abs(that.preChess.y-j)==2)&&j<6){
   var vgaX = (that.preChess.x+i)/2;
   var vgaY = (that.preChess.y+j)/2;
//   console.log(vgaX);
   $.each(that.cheer_arr_ALL,function(ii,ee){
   if(ee.x ==vgaX&&ee.y==vgaY){
    hasObstacle =true;
    return false;
   }
   });
   if(hasObstacle){
   return false;
   }
   return true;
  }
  return false;
  }
  // 红仕的规则
  obj.rule_Scholar_r = function(i,j){
  if(this.preChess.x==5&&this.preChess.y==9){
   if(Math.abs(this.preChess.x-i)==1&&Math.abs(this.preChess.y-j)==1){
   return true;
   }
  }else if(i==5&&j==9){
   return true;
  }
  return false;
  }
  // 黑仕的规则
  obj.rule_Scholar_b = function(i,j){
  if(this.preChess.x==5&&this.preChess.y==2){
   if(Math.abs(this.preChess.x-i)==1&&Math.abs(this.preChess.y-j)==1){
   return true;
   }
  }else if(i==5&&j==2){
   return true;
  }
  return false;
  }
  // 帅的规则
  obj.rule_Boss_r = function(i,j){
  if((Math.abs(this.preChess.x-i)==1&&this.preChess.y==j)
  ||(this.preChess.x==i&&Math.abs(this.preChess.y-j)==1)){
   if(i>=4&&i<=6&&j>=8&&j<=10){
   return true;
   }else{
   return false;
   }
  }
  return false;
  }
  // 将的规则
  obj.rule_Boss_b = function(i,j){
  if((Math.abs(this.preChess.x-i)==1&&this.preChess.y==j)
  ||(this.preChess.x==i&&Math.abs(this.preChess.y-j)==1)){
   if(i>=4&&i<=6&&j>=1&&j<=3){
   return true;
   }else{
   return false;
   }
  }
  return false;
  }
  // 兵的规则
  obj.rule_Soldier_r = function(i,j){
  if(this.preChess.y<=5){
   if((this.preChess.x ==i&&this.preChess.y-1==j)||(this.preChess.x-1 ==i&&this.preChess.y==j)||(this.preChess.x+1 ==i&&this.preChess.y==j)){
   return true;
   }
  }else{
   if(this.preChess.x ==i&&this.preChess.y-1==j){
   return true;
   }
  }
  return false;
  }
  // 卒的规则
  obj.rule_Soldier_b = function(i,j){
  if(this.preChess.y>5){
   if((this.preChess.x ==i&&this.preChess.y+1==j)||(this.preChess.x-1 ==i&&this.preChess.y==j)||(this.preChess.x+1 ==i&&this.preChess.y==j)){
   return true;
   }
  }else{
   if(this.preChess.x ==i&&this.preChess.y+1==j){
   return true;
   }
  }
  return false;
  }
  // 炮的规则
  obj.rule_Cannon = function(i,j){
  var that = this;
  if(this.preChess.x ==i||this.preChess.y==j){
   var t =0;
   if(this.preChess.x ==i){
   var temp = this.preChess.y;
   if(temp<j){
    while(++temp!=j){
    $.each(this.cheer_arr_ALL,function(ii,ee){
     if(ee.x ==that.preChess.x&&ee.y==temp){
     t++;
     return false;
     }
    });
    }
    return t;
   }else{
    while(--temp!=j){
    $.each(this.cheer_arr_ALL,function(ii,ee){
     if(ee.x ==that.preChess.x&&ee.y==temp){
     t++;
     return false;
     }
    });
    }
    return t;
   }
   }else{
   var temp = this.preChess.x;
   if(temp<i){
    while(++temp!=i){
    $.each(this.cheer_arr_ALL,function(ii,ee){
     if(ee.x ==temp&&ee.y==that.preChess.y){
     t++;
     return false;
     }
    });
    }
    return t;
   }else{
    while(--temp!=i){
    $.each(this.cheer_arr_ALL,function(ii,ee){
     if(ee.x ==temp&&ee.y==that.preChess.y){
     t++;
     return false;
     }
    });
    }
    return t;
   }
   }
  }
  return 2;
  }
  obj.inArray = function(x,y){
  var hasObstacle = false;
  $.each(this.cheer_arr_ALL,function(ii,ee){
   if(ee.x ==x&&ee.y==y){
   hasObstacle = true;
   return false;
   }
  });
  return hasObstacle;
  }
  obj.init();
//  obj.init({
//  chunk:50, // 格子大小
//  radius:23, // 棋子半径
//  ccr:3   // 候选小圆半径
//  });
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
实例讲解React 组件
Jul 07 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 #Javascript
js实现横向拖拽导航条功能
Feb 17 #Javascript
js转换对象为xml
Feb 17 #Javascript
EsLint入门学习教程
Feb 17 #Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 #Javascript
AngularJS执行流程详解
Feb 17 #Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 #Javascript
You might like
深入php中var_dump方法的使用详解
2013/06/24 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
php实现可运算的验证码
2015/11/10 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
js 深拷贝函数
2008/12/04 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
pandas对指定列进行填充的方法
2018/04/11 Python
python树莓派红外反射传感器
2019/01/21 Python
Django中的cookie和session
2019/08/27 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
如何用python写个模板引擎
2021/01/14 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
大学生社团活动总结
2014/04/26 职场文书
多媒体教室标语
2014/06/26 职场文书
党委班子剖析材料
2014/08/21 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
小学毕业感言100字
2015/07/30 职场文书
Python基础之元类详解
2021/04/29 Python
详解JS ES6编码规范
2021/05/07 Javascript