Html5+js "Five sub-flying" game realization (vi) mouse response and multiple selection

In the previous chapter we mentioned that if there are more than one piece of the line can be eaten, then the game needs to prompt the user, let the user choose which line to eat. In addition, because it is a web game, so be sure to implement the mouse click pieces can be manipulated.

When the mouse moves the chess piece above, toggles the mouse pointer to be the hand shape, moves away the pawn and then switches back to the default state:

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, according to the mouse position to determine which piece is currently, is the selected pieces or moving pieces.

If you just select a pawn, just after clicking on a piece, draw a box outside the pawn to distinguish the other pieces, which means the current piece:

var this. chesses[.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 it is to move the pieces, but also to distinguish between simply moving the pieces or the move can eat each other's pieces. Simple moving pieces will only need to update the target location for the current piece on the line.

if (T.currentplayer = = T.chesses[i].player && t.chesses[i].player! = Player.none    ) {= i;}

If you can eat each other's pieces, you need to eat each other's pieces or a number of routes can eat chess prompts the user to choose which route to eat pieces. After eating the pieces also to judge the other side can continue to moves, if not continue to moves, then also need to prompt the end of the user game, we won.

if (T.currentplayer = = T.chesses[t.currentindex].player && T.chesses[i].player = = Player.none    ) { if (T.movechess (i, T.currentindex)) {        = i;         if (! t.chessarray) {            = t.currentplayer;             = T.getanotherplayer (player);            T.changeplayer ();             if true ; }        }    }}

Determine if the game is over:

//Game Over This. Isgameover =function(player) {varI, J, K, POS; //Check to see if there are movable pieces.     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 many routes to choose from, we do this for the time being: on the left side of each route, write the numbers on the left side of the piece ..., indicating the route number so that the user can choose which route to take by clicking on the piece with the number next to it:

//Multiple Optionsif( This. Chessarray) {    //occlusion LayerCanvas.drawfillrect ( This. Panel, "#000000", 1, cw-20, cw-20, "Rgba (0,0,0,0.4)"); //Multiple pieces     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, each time we finish the pieces, we also need to switch to the other side to play chess:

Player == t.getanotherplayer (player); T.changeplayer ();

Well, this chapter is going to be analyzed here.

Html5+js "Five sub-flying" game implementation (a) Rules

Html5+js "Five sub-flying" Game Realization (ii) route analysis and resource preparation

Html5+js "Five sub-flying" game implementation (iii) pages and chess pieces

Html5+js "Five sub-flying" game realization (four) clip one and pick a pair

Html5+js "Five sub-flying" game implementation (v) Moving pieces

Html5+js "Five sub-flying" game realization (vi) mouse response and multiple selection