HTML5+JS 《五子飛》游戲?qū)崿F(xiàn)（二）路線(xiàn)分析和資源準(zhǔn)備
上一節(jié) 里沃特與我們分享了《五子飛》的下棋規(guī)則，可能有些伙伴看得不清楚，像我們碼農(nóng)還是看到代碼比較靠譜。下面就把可以走棋的路線(xiàn)跟大家說(shuō)一下。
假設(shè)從左上角開(kāi)始，以0開(kāi)始編號(hào)，往右數(shù)（沒(méi)看第一節(jié)棋盤(pán)的先去看一下）（因?yàn)槁肪€(xiàn)比較簡(jiǎn)單，就直接寫(xiě)固定的數(shù)據(jù)了）：
1.橫著走有5條直線(xiàn)：
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.豎著走也有5條直線(xiàn)：
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.另外還有6條斜線(xiàn)可走：
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]
];
合起來(lái)即理論下可以走的路線(xiàn)如下：
// 可走的路線(xiàn)
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]
];
分別用 A,B 表示對(duì)戰(zhàn)雙方：
var Player = { A: 0, B: 1, None: -1 };
棋盤(pán)我們直接在 canvas 上畫(huà)，棋子準(zhǔn)備兩個(gè)小圖片：
為棋子定義一個(gè)對(duì)象：
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];
};
}
// 棋子
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;
};
}
棋盤(pán)上棋子定義（棋子初始化）：
var i;
var cpc = 5;
var ctc = Math.pow(cpc, 2);
var chesses = [];
// 分配棋子
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);
}
這樣，路線(xiàn)和棋子初始化就已經(jīng)比較清楚了，下一節(jié)我們開(kāi)始在 canvas 上把棋子畫(huà)好。
浙公網(wǎng)安備 33010602011771號(hào)