HTML5 + JS game Implementation of wuzifei (5) mobile chess pieces and html5 wuzifei

HTML5 + JS game Implementation of wuzifei (5) mobile chess pieces and html5 wuzifei

In the previous chapter, we learned how to deal with two important chess moves. To eat each other's pawns, we must first move our pawns. Now let's share with you how to move the pawns.

To move a chess piece, first click the chess piece to be moved on the page, and then click the target position. If it can be moved, move the chess piece to the target position, the original location is to be cleared.

In the above sentence, we need to take two steps: 1. Determine whether the target is movable; 2. Move the pawn when the target is movable.

 

1. Determine whether the target is movable.

First, you can only follow a straight line when moving. Second, there cannot be other pawns between the target position and the original position:

// Whether to move this. canMove = function (pDest, pSrc) {var pi = this. getIndex (pDest, pSrc); if (pi & pi. destIndex! = Pi. srcIndex) {if (this. chesses [pi. destIndex]. player = Player. None & this. chesses [pi. srcIndex]. player! = Player. none) {var i1, i2, j; for (var I = 0; I <this. lines. length; I ++) {i1 = $. inArray (pi. destIndex, this. lines [I]); i2 = $. inArray (pi. srcIndex, this. lines [I]); if (i1! =-1 & i2! =-1) {if (pi. destIndex <pi. srcIndex) {for (var j = Math. min (i1, i2); j <Math. max (i1, i2)-1; j ++) {if (this. chesses [this. lines [I] [j]. player! = Player. none) {return false ;}} else {for (var j = Math. min (i1, i2) + 1; j <= Math. max (i1, i2); j ++) {if (this. chesses [this. lines [I] [j]. player! = Player. None) {return false ;}} return pi ;}}} return false ;};

 

2. Move the pawns:

When it can be moved, it is necessary to determine whether the other party can hold one or pick one. If it is possible, it is necessary to replace the stolen pawns of the other party with their own pawns. Also, according to the functions in the previous chapter, we know that when one or more chunks are clamped, two or more chunks may be eaten at the same time (next time we will elaborate ). :

// Move the pawns this. moveChess = function (pDest, pSrc) {this. chessarray = null; var pi = this. canMove (pDest, pSrc); if (pi) {this. chesses [pi. srcIndex]. moveTo (this. chesses [pi. destIndex]); var chess = this. chesses [pi. destIndex]; var r1 = this. canCarry (chess), r2 = this. canClip (chess); if (r1 | r2) {var rl = (r1? R1.length: 0) + (r2? R2.length: 0); if (rl = 1) {if (r1) {// this. chessreplace. push (r1 [0] [0]); this. chessreplace. push (r1 [0] [1]); // replace this. chesses [r1 [0] [0]. point. index]. player = chess. player; this. chesses [r1 [0] [1]. point. index]. player = chess. player;} else {// this. chessreplace. push (r2 [0] [0]); // replace this. chesses [r2 [0] [0]. point. index]. player = chess. player ;}} else {// If there are multiple routes of chess pieces to eat, first save it and then prompt the user to choose which online this to eat. chessarray = []; if (r1) {for (var I = 0; I <r1.length; I ++) {this. chessarray. push (r1 [I]) ;}}if (r2) {for (var I = 0; I <r2.length; I ++) {this. chessarray. push (r2 [I]) ;}}} return true ;}return false ;};

 

This section is simple for you to digest. In the next section, we will implement operations and prompts for multiple pieces.

 

HTML5 + JS game Implementation of wuzifei (1) Rules

HTML5 + JS game Implementation of wuzifei (2) route analysis and resource preparation

HTML5 + JS game Implementation of wuzifei (3) page and board chess

HTML5 + JS game Implementation of wuzifei (4) one and one matching