HTML5+JS 《五子飞》游戏实现(三)页面和棋盘棋子

前面两节,我们已经对《五子飞》有个初步的认识,对走棋路线也有了基本的了解,现在里沃特继续跟大家分享HTML页面,另外把棋盘棋子也画出来。

演示地址:http://www.lyout.com/projects/fiveflychess/FiveflyChess3.htm

HTML页面非常简单:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>五子飞</title>
    <style type="text/css">
    .fiveflychess {
        margin-left: auto;
        margin-right: auto;
    }
    </style>
    <script language="javascript" type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="canvas.js"></script>
    <script language="javascript" type="text/javascript" src="FiveflyChess.js"></script>
</head>
<body style="text-align: center;">
    <canvas id="fiveflychess" class="fiveflychess" width="800" height="600">
        Your brower is not support canvas!
    </canvas>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            var chesspanel = $("#fiveflychess");

            var ffc = new GameChess();
            ffc.start(chesspanel);
        });
    </script>
</body>
</html>

其中,jquery.js 被调用的函数不多,完全可以自行实现,但为了省时间,就用它处理了。canvas.js 是一个简单的在 html5 Canvas 上画图的类,实现了画圆、线、文字、圆角矩形、填充矩形、空心矩形、球等一些比较基础的函数。有时候没必要做一个小游戏还加载一些大型的框架:

var Canvas = {
    // 画圆弧路径
    drawArc: function (c, x, y, r, a1, a2, anticlockwise) {
        c.arc(x, y, r, a1 * Math.PI / 180, a2 * Math.PI / 180, anticlockwise);
    },
    // 画两条射线相切的的圆弧
    drawArcTo: function (c, x1, y1, x2, y2, o1, o2, r) {
        c.moveTo(x1, y1);
        c.arcTo(o1, o2, x2, y2, r);
    },
    // 画线
    drawLine: function (c, strokestyle, lw, x1, y1, x2, y2) {
        c.strokeStyle = strokestyle;
        c.lineWidth = lw;
        c.beginPath();
        c.moveTo(x1, y1);
        c.lineTo(x2, y2);
        c.closePath();
        c.stroke();
    },
    // 画文字
    drawText: function (c, text, x, y, fillstyle) {
        c.fillStyle = fillstyle;
        c.fillText(text, x, y);
    },
    // 画个圆角矩形
    drawRoundRect: function (c, strokestyle, x1, y1, x2, y2, r, fillstyle) {
        c.strokeStyle = strokestyle;
        c.fillStyle = fillstyle;
        c.beginPath();
        c.moveTo(x1 + r, y1);
        c.lineTo(x2 - r, y1);
        c.quadraticCurveTo(x2, y1, x2, y1 + r);
        c.lineTo(x2, y2 - r);
        c.quadraticCurveTo(x2, y2, x2 - r, y2);
        c.lineTo(x1 + r, y2);
        c.quadraticCurveTo(x1, y2, x1, y2 - r);
        c.lineTo(x1, y1 + r);
        c.quadraticCurveTo(x1, y1, x1 + r, y1);
        c.fill();
        c.stroke();
    },
    // 画填充矩形
    drawFillRect: function (c, strokestyle, lw, x1, y1, x2, y2, fillstyle) {
        c.fillStyle = fillstyle;
        c.fillRect(x1, y1, x2 - x1, y2 - y1);
        if (lw > 0) this.drawRect(c, strokestyle, lw, x1, y1, x2, y2);
    },
    // 画空心矩形
    drawRect: function (c, strokestyle, lw, x1, y1, x2, y2) {
        c.strokeStyle = strokestyle;
        c.lineWidth = lw;
        c.beginPath();
        c.moveTo(x1 - lw / 2, y1);
        c.lineTo(x2, y1);
        c.lineTo(x2, y2);
        c.lineTo(x1, y2);
        c.lineTo(x1, y1 - lw / 2);
        c.stroke();
    },
    // 画线
    drawLine: function (c, strokestyle, lw, x1, y1, x2, y2) {
        c.strokeStyle = strokestyle;
        c.lineWidth = lw;
        c.beginPath();
        c.moveTo(x1, y1);
        c.lineTo(x2, y2);
        c.closePath();
        c.stroke();
    },
    // 画只有边的球
    drawCircleStroke: function (c, strokestyle, lw, x, y, r) {
        c.strokeStyle = strokestyle;
        c.lineWidth = lw;
        c.beginPath();
        this.drawArc(c, x, y, r, 0, 360, true);
        c.closePath();
        c.stroke();
    },
    // 画填充有边的球
    drawCircleFill: function (c, strokestyle, lw, x, y, r, fillstyle) {
        c.strokeStyle = strokestyle;
        c.lineWidth = lw;
        c.fillStyle = fillstyle;
        c.beginPath();
        this.drawArc(c, x, y, r, 0, 360, true);
        c.closePath();
        c.fill();
        c.stroke();
    },
    // 画球
    drawBall: function (c, x, y, r, fillstyle) {
        c.fillStyle = fillstyle;
        c.beginPath();
        this.drawArc(c, x, y, r, 0, 360, true);
        c.closePath();
        c.fill();
    },
    // 判断点是否在某个区块内
    inRegion: function (p, r) {
        if (p[0] > r[0] && p[0] < r[2] && p[1] > r[1] && p[1] < r[3]) {
            return true;
        } else {
            return false;
        }
    },
    //判断两个矩形对象是否重合
    coincide: function (a, b) {
        if (this.inRegion([a[0], a[1]], b)) return true;
        if (this.inRegion([a[0], a[3]], b)) return true;
        if (this.inRegion([a[2], a[1]], b)) return true;
        if (this.inRegion([a[2], a[3]], b)) return true;

        if (this.inRegion([b[0], b[1]], a)) return true;
        if (this.inRegion([b[0], b[3]], a)) return true;
        if (this.inRegion([b[2], b[1]], a)) return true;
        if (this.inRegion([b[2], b[3]], a)) return true;
        return false;
    },
    getContext: function (el) {
        if (!(el && el.length && el.length > 0)) { return null; }

        return (function () {
            if (el[0].getContext) { var c = el[0].getContext("2d"); if (c) { return c; } }
            return null;
        })();
    }
};
 

现在我们看看怎么把棋盘和棋子画出来:

/// <reference path="../common/jquery.js" />
/// <reference path="../common/canvas.js" />

var Player = { A: 0, B: 1, None: -1 };
function Size(w, h) {
    this.w = w;
    this.h = h;
}
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;
    };
}
function GameChess() {
    // 可走的路线
    this.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]
    ];              
    this.cpc = 0;                       // 单方初始棋子数
    this.ctc = 0;                       // 棋子可走的点数
    this.chesses = [];                  // 棋子(包含空棋子)
    this.chessarray = null;             // 多选棋子
    this.chessreplace = [];             // 被替换的棋子
    this.chesssize = new Size(32, 32);  // 棋子大小
    this.panel = null;                  // 作画的画板
    this.width = 0;                     // 画板宽度
    this.height = 0;                    // 画板高度
    this.chessblack = new Image();      // 黑棋子图片
    this.chesswhite = new Image();      // 白棋子图片
    this.imagestate = 0;                // 棋子图片加载状态
    this.imagetimer = null;             // 判断棋子图片加载的时钟
    this.currentIndex = -1;             // 当前棋子
    this.currentPlayer = Player.B;      // 当前玩家是哪一方
    this.computerPlayer = Player.A;     // 电脑是哪一方
    this.computerUsed = true;           // 是否与电脑对弈
    this.player = Player.B;             // 轮到谁玩了
    this.timetimer = null;              // 倒计时
    this.timecount = 30;                // 每步30秒
    this.winner = Player.None;          // 谁赢了
    this.isover = false;                // 是否结束了

    // 初始配置
    this.init = function () {
        this.chesses = [];
        this.cpc = 5;
        this.ctc = Math.pow(this.cpc, 2);

        var i;
        // 分配棋子
        for (i = 0; i < this.cpc; i++) {
            this.chesses.push(new Chess(Player.A));
        }
        for (i = this.cpc; i < this.ctc - this.cpc; i++) {
            this.chesses.push(new Chess(Player.None));
        }
        for (i = this.ctc - this.cpc; i < this.ctc; i++) {
            this.chesses.push(new Chess(Player.B));
        }
        for (i = 0; i < this.ctc; i++) {
            this.chesses[i].point = new Point(i % this.cpc, parseInt(i / this.cpc, 10), i);
        }
    };
    this.play = function () {
        this.replay();
    };
    // 重玩,重置所有棋子
    this.replay = function () {
        this.isover = false;
        this.changePlayer();

        var i;
        // 分配棋子
        for (i = 0; i < this.cpc; i++) {
            this.chesses[i].player = Player.A;
        }
        for (i = this.cpc; i < this.ctc - this.cpc; i++) {
            this.chesses[i].player = Player.None;
        }
        for (i = this.ctc - this.cpc; i < this.ctc; i++) {
            this.chesses[i].player = Player.B;
        }
        for (i = 0; i < this.ctc; i++) {
            this.chesses[i].point = new Point(i % this.cpc, parseInt(i / this.cpc, 10), i);
        }
    };
    this.changePlayer = function () {
        this.timecount = 30;
    };
    // 获取索引号
    this.getIndex = function (pDest, pSrc) {
        var t1 = typeof (pDest), t2 = typeof (pSrc);
        var i1 = -1, i2 = -1;
        if ((t1 == "number") && (t2 == "number")) {
            i1 = pDest; i2 = pSrc;
        } else if ((t1 == "object") && (t2 == "object")) {
            i1 = pDest.index || -1; i2 = pSrc.index || -1;
        }
        if (i1 >= 0 && i1 < this.ctc) {
            return { destIndex: i1, srcIndex: i2 };
        }
        return false;
    };
    // 得到对方是哪个玩家
    this.getAnotherPlayer = function (player) {
        return player == Player.A ? Player.B : Player.A;
    };
    this.paint = function () {
        var i;
        var cw = this.width > this.height ? this.height : this.width;

        // 画棋盘
        Canvas.drawRoundRect(this.panel, "#225C21", 0, 0, this.width, this.height, 5, "#225C21");
        Canvas.drawFillRect(this.panel, "#000000", 1, 20, 20, cw - 20, cw - 20, "#E8BC7D");
        Canvas.drawRect(this.panel, "#000000", 5, 50, 50, cw - 50, cw - 50);

        var startp = 58;
        var w = cw - startp * 2;
        var h = cw - startp * 2;
        for (i = 0; i < this.cpc; i++) {
            Canvas.drawLine(this.panel, "#000000", 1, startp + i * w / (this.cpc - 1), startp, startp + i * w / (this.cpc - 1), cw - startp);
        }
        for (i = 0; i < this.cpc; i++) {
            Canvas.drawLine(this.panel, "#000000", 1, startp, startp + i * h / (this.cpc - 1), cw - startp, startp + i * h / (this.cpc - 1));
        }
        // 长对角线
        Canvas.drawLine(this.panel, "#000000", 1, startp, startp, cw - startp, cw - startp);
        Canvas.drawLine(this.panel, "#000000", 1, startp, cw - startp, cw - startp, startp);
        // 短对角线
        Canvas.drawLine(this.panel, "#000000", 1, startp, startp + (this.cpc - 1) / 2 * h / (this.cpc - 1), startp + (this.cpc - 1) / 2 * w / (this.cpc - 1), startp);
        Canvas.drawLine(this.panel, "#000000", 1, startp, startp + (this.cpc - 1) / 2 * h / (this.cpc - 1), startp + (this.cpc - 1) / 2 * w / (this.cpc - 1), cw - startp);
        Canvas.drawLine(this.panel, "#000000", 1, startp + (this.cpc - 1) / 2 * w / (this.cpc - 1), cw - startp, cw - startp, startp + (this.cpc - 1) / 2 * h / (this.cpc - 1));
        Canvas.drawLine(this.panel, "#000000", 1, startp + (this.cpc - 1) / 2 * w / (this.cpc - 1), startp, cw - startp, startp + (this.cpc - 1) / 2 * h / (this.cpc - 1));

        Canvas.drawRect(this.panel, "#000000", 2, startp, startp, cw - startp, cw - startp);

        if (this.imagestate == 2) {
            if (this.imagetimer) {
                clearInterval(this.imagetimer);
                this.imagetimer = null;
            }

            var b;
            // 画棋子
            for (i = 0; i < this.chesses.length; i++) {
                this.chesses[i].bounds = new Bounds(startp + this.chesses[i].point.x * w / (this.cpc - 1) - this.chesssize.w / 2, startp + this.chesses[i].point.y * h / (this.cpc - 1) - this.chesssize.h / 2, this.chesssize.w, this.chesssize.h);
                switch (this.chesses[i].player) {
                    case Player.A:
                        this.panel.drawImage(this.chessblack, this.chesses[i].bounds.x, this.chesses[i].bounds.y, 32, 32);
                        break;
                    case Player.B:
                        this.panel.drawImage(this.chesswhite, this.chesses[i].bounds.x, this.chesses[i].bounds.y, 32, 32);
                        break;
                    default:
                        break;
                }
            }
        }

        // 画棋子
    };
    this.repaint = function () {
        this.panel.clearRect(0, 0, this.width, this.height);
        this.paint();
    };
    this.start = function (el) {
        this.init();
        this.width = el.width();
        this.height = el.height()
        this.panel = Canvas.getContext(el);
        if (this.panel != null) {
            var t = this;
            // 加载棋子图片
            $(this.chessblack).load(function () {
                t.imagestate++;
            });
            $(this.chesswhite).load(function () {
                t.imagestate++;
            });
            this.chessblack.src = "chessblack.png";
            this.chesswhite.src = "chesswhite.png";
            if (this.imagestate < 2) {
                this.paint();
            }
            this.imagetimer = setInterval(function () {
                if (t.imagestate == 2) {
                    t.repaint();
                    t.play();
                }
            }, 100);
            return true;
        }

        return false;
    };
}

怎么样?熟悉javascript的伙伴应该看起来没什么难度吧:)

这节我们就讲到这里,下次里沃特再跟大家分享怎么分析和处理“移动棋子”、“夹一个”和“挑一对”,敬请期待。

 

HTML5+JS 《五子飞》游戏实现(一)规则

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

HTML5+JS 《五子飞》游戏实现(四)夹一个和挑一对

HTML5+JS 《五子飞》游戏实现(五)移动棋子

HTML5+JS 《五子飞》游戏实现(六)鼠标响应与多重选择

你可能感兴趣的:(HTML5+JS 《五子飞》游戏实现(三)页面和棋盘棋子)