HTML5 + JS wuzifei game implementation (6) mouse response and multiple choices, html5 wuzifei

HTML5 + JS wuzifei game implementation (6) mouse response and multiple choices, html5 wuzifei

In the previous chapter, we mentioned that if multiple online chess pieces can be eaten, the game should prompt users to select which online chess pieces to eat. In addition, because it is a web game, you must click the pawns to perform operations.

 

When you move the cursor over the pawns, switch the pointer to the hand shape, remove the pawns, and switch back to the default status:

el.mousemove(function (e) {    var o = el.offset();    var p = { x: e.clientX - o.left, y: e.clientY - o.top };    el.css("cursor", "default");    for (var i = 0; i < t.chesses.length; i++) {        if (Canvas.inRegion([p.x, p.y], t.chesses[i].bounds.toArrayXY())) {            el.css("cursor", "pointer");            break;        }    }});

At the same time, you also need to determine the current chess piece based on the mouse position, whether to select or move the chess piece.

If you only select the pawns, you only need to click the pawns and draw a box outside the pawns to distinguish other pawns, indicating that they are the current pawns:

var b = this.chesses[this.currentIndex].bounds;Canvas.drawRect(this.panel, "rgba(255,0,0,0.4)", 2, b.x - 2, b.y - 2, b.x + b.w + 2, b.y + b.h + 2);

If you want to move a piece, you have to make the difference between simply moving the piece or eating the other piece after moving it. Simply move the pawns, you only need to update the target position to the current pawns.

if (t.currentPlayer == t.chesses[i].player && t.chesses[i].player != Player.None) {    t.currentIndex = i;}

If you can eat the opponent's chess piece, you need to eat the other party's chess piece or there are multiple routes to eat chess, prompting the user to choose which route piece to eat. After eating a chess piece, you have to determine whether the other party can continue playing the game. If you cannot continue playing the game, you need to remind the user that the game is over and we have won.

if (t.currentPlayer == t.chesses[t.currentIndex].player && t.chesses[i].player == Player.None) {    if (t.moveChess(i, t.currentIndex)) {        t.currentIndex = i;        if (!t.chessarray) {            player = t.currentPlayer;            t.currentPlayer = t.getAnotherPlayer(player);            t.changePlayer();            if (t.isGameOver(t.currentPlayer)) { t.winner = player; t.isover = true; }        }    }}

Determine whether the game is over:

// The game ends. this. isGameOver = function (player) {var I, j, k, pos; // check whether there are removable pawns for (I = 0; I <this. chesses. length; I ++) {if (this. chesses [I]. player = player) {for (j = 0; j <this. lines. length; j ++) {pos = $. inArray (this. chesses [I]. point. index, this. lines [j]); if (pos! =-1) {for (k = 0; k <pos-1; k ++) {if (this. canMove (k, pos) return false;} for (k = pos + 1; k <this. lines [j]. length; k ++) {if (this. canMove (k, pos) return false ;}}} return true ;};

When there are multiple routes to choose, we will do this for the time being: Write the numbers 1, 2, 3... on the left of each route ..., indicates the route number. In this way, the user only needs to click the chess piece next to the number to choose which route to eat:

// Select if (this. chessarray) {// specifies the Canvas of the occlusion layer. drawFillRect (this. panel, "#000000", 1, 20, 20, cw-20, cw-20, "rgba (0.4, 0 )"); // multiple pawns for (I = 0; I <this. chessarray. length; I ++) {B = this. chessarray [I] [0]. bounds; Canvas. drawRect (this. panel, "rgba (255,255, 0, 0.4)", 2, B. x-2, B. y-2, B. x + B. w + 2, B. y + B. h + 2 );
// Write the route number Canvas. drawText (this. panel, I + 1, B. x + B. w + 4, B. y + B. h + 2, "# FFFFFF ");}}

Finally, after we complete the chess piece, we need to switch to the other party to play chess:

player = t.currentPlayer;t.currentPlayer = t.getAnotherPlayer(player);t.changePlayer();

 

Now, let's analyze this chapter here.

 

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

HTML5 + JS game Implementation of wuzifei (5) mobile pawns