首页
所有分类
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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
Javascript倒计时代码
Aug 12 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
纯javascript制作日历控件
Jul 17 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染（SSR）
Apr 05 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
更优雅的微信小程序骨架屏实现详解
Aug 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
慢日志(1) mt-swipe(1) 远程桌面(2) exists(2) cmd(1) Spring JPA(1) REST(1) 相对路径 (1) Switch(1) Mint UI(1)
You might like
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
Python 拷贝对象（深拷贝deepcopy与浅拷贝copy）
2008/09/06 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python挖矿算力测试程序详解
2019/07/03 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
在python shell中运行python文件的实现
2019/12/21 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
美津浓美国官网：Mizuno美国
2018/08/07 全球购物
中国专业的音频分享平台：喜马拉雅
2019/05/24 全球购物
美国医生配方营养补充剂供应商：Healthy Directions
2019/07/10 全球购物
管理失职检讨书
2014/02/12 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
2014年会计工作总结
2014/11/27 职场文书
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS