HTML5+JS 《五子飞》游戏实现(二)路线分析和资源准备

上一节 里沃特与我们分享了《五子飞》的下棋规则,可能有些伙伴看得不清楚,像我们码农还是看到代码比较靠谱。下面就把可以走棋的路线跟大家说一下。

 

假设从左上角开始,以0开始编号,往右数(没看第一节棋盘的先去看一下)(因为路线比较简单,就直接写固定的数据了):

1.横着走有5条直线:

1
2
3
4
5
6
7
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条直线:

1
2
3
4
5
6
7
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条斜线可走:

1
2
3
4
5
6
7
8
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]
];

合起来即理论下可以走的路线如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 可走的路线
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 表示对战双方:

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

棋盘我们直接在 canvas 上画,棋子准备两个小图片:

 

为棋子定义一个对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;
    };
}

棋盘上棋子定义(棋子初始化):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
}

 

这样,路线和棋子初始化就已经比较清楚了,下一节我们开始在 canvas 上把棋子画好。

posted @   里沃特  阅读(1347)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示