首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

canvas 实现中国象棋

- Author -

backsword

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
详解JavaScript对数组操作（添加/删除/截取/排序/倒序）
Apr 28 Javascript
Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
Jun 24 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
TaiShan(1) 控制流(1) Simhash(1) 内存池(1) 字段分割(1) 九宫格(5) RecyclerView(1) JDK(1) Hadoop(1) queue(1)
You might like
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
史上最全JavaScript数组去重的十种方法（推荐）
2017/08/17 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python常见数字运算操作实例小结
2019/03/22 Python
django 类视图的使用方法详解
2019/07/24 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
英国二手iPhone、音乐、电影和游戏商店：musicMagpie
2018/10/26 全球购物
游戏商店：Eneba
2020/04/25 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
制定岗位职责的原则
2013/11/08 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
英语故事演讲稿
2014/04/29 职场文书
入团介绍人意见范文
2015/06/04 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
python脚本框架webpy模板赋值实现
2021/11/20 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript