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

In the previous section, Walt shared with us the rules of chess in the "Five sons Fly", and some of the partners may not be able to see it clearly, like our yards or the code is more reliable. The following will be able to moves the route to tell you about.

Suppose starting at the top left, numbering starting at 0, and going to the right (without looking at the first section of the chessboard) (because the route is relatively straightforward, write fixed data directly):

1. There are 5 straight lines across the road:

var lines_h = [        [0,  1,  2,  3,  4],        [5,  6,  7,  8,  9],        [10, 11, 12, 13, 14],< C11/>[15, (+),        [20, 21, 22, 23, 24]];

2. The vertical walk also has 5 lines:

var lines_v = [        [0,  5, ten, +],        [1, 6, one, ten, +  ],        [2,  7, A, +,],        [3,
   8,        [4,  9, 14, 19, 24]];

3. There are also 6 diagonal lines to go:

var lines_o = [        [0,  6, 2, +],        [4,  8,, +, +],        [6, 2,  Ten],        [8, 14,  ] ,        [        14, 18, 22]];

The following are the routes that the theory can walk together:

Walking routes var lines = [        [0,  1,  2,  3,  4],        [5,  6,  7,  8,  9],        [10, 11, 12, 13, [[0], [        1,  6, +, +, +], [5], [+], [+], [+], [+] 17/>[2, 7, (+), [3],  8, [4], [9, 0,, 6, 12, 18  ], and        [4,  8, (+), +],        [2,  6,],        [2,  8,    +], [ten,, +], [+];              

The opposing parties are represented by a, B respectively:

var Player = {a:0, b:1, None:-1};

The chessboard we draw directly on the canvas, the pieces prepare two small pictures:

Define an object for a pawn:

function point (x, y, index) {    this.x = x;    This.y = y;    This.index = index;} function Bounds (x, Y, W, h) {    this.x = x;    This.y = y;    THIS.W = W;    This.h = h;    This.toarray = function () {        return [this.x, This.y, THIS.W, this.h];    };    This.toarrayxy = function () {        return [this.x, This.y, This.x + THIS.W, This.y + this.h];}    ;} Pawn function Chess (player) {    this.player = player;    This.point = new Point ( -1,-1,-1);    This.bounds = new Bounds ( -1,-1,-1,-1);    This.moveto = function (chess) {        chess.player = This.player;        This.player = Player.none;}    ;}

Chess piece definition (pawn initialization) on board:

var i;var CPC = 5;var CTC = Math.pow (CPC, 2), var chesses = [];//Assign pawn for (i = 0; i < CPC; i++) {    Chesses[i].player = PLAYER.A;} for (i = CPC; i < CTC-CPC; i++) {    chesses[i].player = Player.none;} for (i = CTC-CPC; i < CTC; i++) {    chesses[i].player = player.b;} for (i = 0; i < CTC; i++) {    chesses[i].point = new Point (i% CPC, parseint (I/CPC, ten), I);}

In this way, the route and pawn initialization is more clear, and the next section we start to draw the pieces on the canvas.

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