English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'effet suivant :
Le code suivant :
<!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: #EAC;591;
}
#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.min.js"></1.9.1/<script src="http:/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#63;args.chunk:50;
// this.radius =args&&args.radius#63;args.radius:23;
// this.CandidateCircleR =args&&args.ccr#63;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:"馬"}
,text:"士"}1 = {x:3,y:1,text:"象"}
,text:"将"}1 = {x:4,y:1var Scholar_b
var Boss_b = {x:5,y:1,text:"将"}
,text:"将"}2 = {x:6,y:1var Scholar_b
,text:"士"}2 = {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_b2rayon:
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_r2rayon:
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);
}
// Mettre à jour le jeu d'échecs
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>");
});
}
// dessiner une ligne horizontale
obj.drawRowLine = function(){
for(var i =1;i<=10;i++{
this.drawLine(1,i,9,i);
}
}
// dessiner une ligne verticale
obj.drawColLine = function(){
for(var i =1;i<=9;i++{
this.drawLine(i,1,i,10);
}
}
// dessiner une ligne droite
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();
}
// dessiner #
obj.drawsharpS = function(){
this.round(2rayon:3);
this.round(8rayon:3);
this.round(1rayon:4);
this.round(3rayon:4);
this.round(5rayon:4);
this.round(7rayon:4);
this.round(9rayon:4);
this.round(2rayon:8);
this.round(8rayon:8);
this.round(1rayon:7);
this.round(3rayon:7);
this.round(5rayon:7);
this.round(7rayon:7);
this.round(9rayon:7);
}
// dessiner un #
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){
// en haut à gauche
this.ctx.moveTo(x0-5,y0-10);
this.ctx.lineTo(x0-5,y0-5);
this.ctx.lineTo(x0-10,y0-5);
// en bas à gauche
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{
// en haut à droite
this.ctx.moveTo(x0+5,y0-10);
this.ctx.lineTo(x0+5,y0-5);
this.ctx.lineTo(x0+10,y0-5);
// en bas à droite
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();
}
// dessiner X
obj.drawX = function(){
this.drawLine(4rayon:1rayon:6rayon:3,0.5);
this.drawLine(4rayon:3rayon:6rayon:1,0.5);
this.drawLine(4rayon:8rayon:6rayon:10,0.5);
this.drawLine(4rayon:10rayon:6rayon:8,0.5);
}
// dessiner le fleuve Chu/漢界
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("漢 界", 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)-5rayon: 20);
this.ctx.fillText(this.text_arr[i], this.chunk*(i+1)-5, this.chunk*10+30+10);
}
}
// dessiner la forme des pieces d'échecs
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();
}
// Dessiner le texte du pion
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);
}
// Ajouter un événement de clic
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("Un pion a été sélectionné");
that.drawCandidate();
是否能吃子
if(that.Eat_rule(i,j)){
that.checked = true;
}else if(that.preChess.x == ee.x&&that.preChess.y == ee.y){
// console.log("Le point est sur le pion d'origine");
that.updateChess();
that.checked = false;
that.drawChecked(p);
// that.preChess = ee;
that.updateChess();
that.drawCandidate();
是否能吃子
if(that.Eat_rule(i,j)){
}
// else if(that.preChess.text == "帅"){
}
that.eat(ii,ee,i,j);
对将 // if(eee.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){
;t>j;t
for(var t=that.preChess.y-1else if(that.preChess.text == "将"){--{
if(that.inArray(that.preChess.x,t)){
canEat = false;
break;
}
}
}
canEat = false;
}
return false;
}
});
if(canEat){
that.eat(ii,ee,i,j);
}
}
}
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;
}
}
}
canEat = false;
}
return false;
}
});
if(canEat){
that.eat(ii,ee,i,j);
}
}
}
}
return false;
}
});
if(overChess){
// alert("点在棋子上");
}
// 是否能移动
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;
}
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+"retirer"+num);
step = ee.text+oldP+"retirer"+num;
}
console.log(ee.text+oldP+"retirer"+newP);
step = ee.text+oldP+"retirer"+newP;
}
}
console.log(ee.text+oldP+"égalité"+newP);
step = ee.text+oldP+"égalité"+newP;
}
}
$("#currActive").text("红方");
if(j>ee.y){
if(ee.x == i){
console.log(ee.text+ee.x+"进"+distance);
step = ee.text+ee.x+"进"+distance
}
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+"retirer"+distance);
step = ee.text+ee.x+"retirer"+distance;
}
console.log(ee.text+ee.x+"retirer"+i);
step = ee.text+ee.x+"retirer"+i;
}
}
console.log(ee.text+ee.x+"égalité"+i);
step = ee.text+ee.x+"égalité"+i;
}
}
this.steps.push(step);
}
// est-ce que c'est la fin
obj.isOver = function(ee) {
if(ee.text == "将"){
alert("vous avez gagné");
$("#ul").empty();
return true;
} else if(ee.text == "帅"){
alert("vous avez perdu");
$("#ul").empty();
return true;
}
return false;
}
}
// manger une pièce
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;
};
}
// déplacer
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=="rouge"&63;"noir":"rouge";
return false;
}
});
that.updateChess();
that.checked = false;
}
// dessiner l'état du pion sélectionné
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();
}
// dessiner la position candidate
obj.drawCandidate = function() {
switch(this.preChess.text){
cas "車":
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;
cas "馬":
if (!this.inArray(this.preChess.x-2, this.preChess.y-1)
&&this.preChess.x-2&& this.preChess.x1&& this.preChess.y-1&& this.preChess.x1
&& !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&& this.preChess.x1&& this.preChess.y-2&& this.preChess.x1
&& !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&& this.preChess.x1
&& !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&& this.preChess.x1
&& !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&& this.preChess.x1&& 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&& this.preChess.x1&& 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;
cas "相":
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);
}
}
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;
cas "象":
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);
}
}
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;
cas "仕":
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);
}
}
this.drawCandidateCircle(5rayon:9);
}
break;
cas "士":
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);
}
}
this.drawCandidateCircle(5rayon:2);
}
break;
cas "帅":
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;
cas "将":
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;
cas "兵":
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;
cas "pion":
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;
cas "canon":
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;
}
}
// dessiner la forme candidate
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);//positionnement de la grille de dessin (0,0), c'est-à-dire le point central de rotation
// this.ctx.rotate(1*Math.PI/180);
// this.ctx.fillRect(x*this.chunk-5,y*this.chunk-5rayon:10rayon:10);
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
}
// règle de déplacement des pions
obj.Move_rule = function(i,j){
switch(this.preChess.text){
cas "車":
retourne this.rule_Car(i,j);
cas "馬":
retourne this.rule_Horse(i,j);
cas "相":
retourne this.rule_Elephant_r(i,j);
cas "象":
retourne this.rule_Elephant_b(i,j);
cas "仕":
retourne this.rule_Scholar_r(i,j);
cas "士":
retourne this.rule_Scholar_b(i,j);
cas "帅":
retourne this.rule_Boss_r(i,j);
cas "将":
retourne this.rule_Boss_b(i,j);
cas "兵":
return this.rule_Soldier_r(i, j);
cas "pion":
return this.rule_Soldier_b(i, j);
cas "canon":
si(this.rule_Cannon(i,j)==0){
return true;
}
return false;
}
}
// règle d'absorption des pions
obj.Eat_rule = function(i,j){
switch(this.preChess.text){
cas "車":
retourne this.rule_Car(i,j);
cas "馬":
retourne this.rule_Horse(i,j);
cas "相":
retourne this.rule_Elephant_r(i,j);
cas "象":
retourne this.rule_Elephant_b(i,j);
cas "仕":
retourne this.rule_Scholar_r(i,j);
cas "士":
retourne this.rule_Scholar_b(i,j);
cas "帅":
retourne this.rule_Boss_r(i,j);
cas "将":
retourne this.rule_Boss_b(i,j);
cas "兵":
return this.rule_Soldier_r(i, j);
cas "pion":
return this.rule_Soldier_b(i, j);
cas "canon":
if (this.rule_Cannon(i, j) ==1{
return true;
}
return false;
}
}
// les règles du char
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("en bas");
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("en haut");
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("à droite");
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("à gauche");
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;
}
// les règles du cheval
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{ // à gauche
$.each(that.cheer_arr_ALL, function(ii, ee){
&& ee.y == that.preChess.y) {-1else if (that.preChess.y
hasObstacle = true;
return false;
}
});
if(hasObstacle){
return false;
}
}-that.preChess.x ==2{ // à droite
$.each(that.cheer_arr_ALL, function(ii, ee){
&& ee.y == that.preChess.y) {+1else if (that.preChess.y
hasObstacle = true;
return false;
}
});
if(hasObstacle){
return false;
}
}-j ==2{ // en haut
$.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{ // en bas
$.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;
}
// les règles du pion rouge
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;
}
// les règles de l'éléphant noir
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;
}
// Les règles du fonctionnaire rouge
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;
}
// Les règles du fonctionnaire noir
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;
}
// Les règles du maréchal
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;
}
return false;
}
}
return false;
}
// Les règles du général
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;
}
return false;
}
}
return false;
}
// Les règles des soldats
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;
}
}
if(this.preChess.x == i && this.preChess.y-1==j){
return true;
}
}
return false;
}
// Les règles du pion
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;
}
}
if(this.preChess.x == i && this.preChess.y+1==j){
return true;
}
}
return false;
}
// Les règles de l'artillerie
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){
var temp = this.preChess.x;
t++;
return false;
}
});
}
return t;
}
while(--temp!=j){
$.each(this.cheer_arr_ALL,function(ii,ee){
var temp = this.preChess.x;
t++;
return false;
}
});
}
return t;
}
}
if(temp<i){
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;
}
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:5, // Taille des cases
// 0,23rayon: // ,
// ccr:3 // Rayon des petits cercles candidats
// });
</script>
</body>
</html>
Voici la totalité du contenu de cet article, j'espère que le contenu de cet article pourra apporter un certain aide à votre apprentissage ou à votre travail, et aussi j'espère que vous puissiez soutenir davantage le tutoriel Néanmoins !
Déclaration : Le contenu de cet article est extrait du réseau, la propriété intellectuelle appartient au propriétaire original, le contenu est apporté par les utilisateurs d'Internet et téléchargé spontanément, ce site Web ne possède pas de propriété, n'a pas été traité par l'éditeur humain et ne supporte pas la responsabilité juridique pertinente. Si vous trouvez du contenu susceptible de violer les droits d'auteur, veuillez envoyer un e-mail à : notice#w pour signaler, et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.3Déclaration : Le contenu de cet article est extrait du réseau, la propriété intellectuelle appartient au propriétaire original, le contenu est apporté par les utilisateurs d'Internet et téléchargé spontanément, ce site Web ne possède pas de propriété, n'a pas été traité par l'éditeur humain et ne supporte pas la responsabilité juridique pertinente. Si vous trouvez du contenu susceptible de violer les droits d'auteur, veuillez envoyer un e-mail à : notice#w pour signaler, et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.