HTML5 + JS "wuzifei" game Implementation (2) route analysis and resource preparation, html5 "wuzifei"

HTML5 + JS "wuzifei" game Implementation (2) route analysis and resource preparation, html5 "wuzifei"

In the previous section, Walter shared with us the rules for playing chess in wuzifei. Some of our partners may not be clear about it. For example, we can still see that the code is reliable. The following describes the routes that can be used to play games.

 

Assume that the number starts from the upper left corner, starts with 0, and goes to the right (first look at the first board without looking at it) (because the route is relatively simple, you can directly write fixed data ):

1. There are five straight lines walking horizontally:

var lines_h = [        [ 0,  1,  2,  3,  4],        [ 5,  6,  7,  8,  9],        [10, 11, 12, 13, 14],        [15, 16, 17, 18, 19],        [20, 21, 22, 23, 24]];

2. There are also five straight lines along the way:

var lines_v = [        [ 0,  5, 10, 15, 20],        [ 1,  6, 11, 16, 21],        [ 2,  7, 12, 17, 22],        [ 3,  8, 13, 18, 23],        [ 4,  9, 14, 19, 24]];

3. There are also 6 diagonal lines to go:

var lines_o = [        [ 0,  6, 12, 18, 24],        [ 4,  8, 12, 16, 20],        [ 2,  6, 10],        [ 2,  8, 14],        [10, 16, 22],        [14, 18, 22]];

In theory, we can take the following steps:

// Optional route var lines = [0, 1, 2, 3, 4], [5, 6, 7, 8, 9], [10, 11, 12, 13, 14], [15, 16, 17, 18, 19], [20, 21, 22, 23, 24], [0, 5, 10, 15, 20], [1, 6, 11, 16, 21], [2, 7, 12, 17, 22], [3, 8, 13, 18, 23], [4, 9, 14, 19, 24], [0, 6, 12, 18, 24], [4, 8, 12, 16, 20], [2, 6, 10], [2, 8, 14], [10, 16, 22], [14, 18, 22];

Use A and B to represent both sides:

var Player = { A: 0, B: 1, None: -1 };

We draw the board directly on the canvas, and prepare two small pictures for the chess piece:

 

Define an object for a chess piece:

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] ;};}// Chess piece 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 pieces on the board definition (chess piece initialization ):

Var I; var cpc = 5; var ctc = Math. pow (cpc, 2); var chesses = []; // assign a 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, 10), I );}

 

In this way, it is clear that the routes and pawns are initialized. In the next section, we will draw the pawns on the canvas.