HTML5+JS 《五子飛》游戲實現（三）頁面和棋盤棋子

分享HTML頁面，另外把棋盤棋子也畫出來。canvas.js 是一個簡單的在 html5 Canvas 上畫圖的類，實現了畫圓、線、文字、圓角矩形、填充矩形、空心矩形、球等一些比較基礎的函數

前面兩節(jié)，我們已經對《五子飛》有個初步的認識，對走棋路線也有了基本的了解，現在里沃特繼續(xù)跟大家分享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();
    },
    // 判斷點是否在某個區(qū)塊內
    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;                // 棋子圖片加載狀態(tài)
    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的伙伴應該看起來沒什么難度吧：）

這節(jié)我們就講到這里，下次里沃特再跟大家分享怎么分析和處理“移動棋子”、“夾一個”和“挑一對”，敬請期待。

HTML5+JS 《五子飛》游戲實現（一）規(guī)則

HTML5+JS 《五子飛》游戲實現（二）路線分析和資源準備

HTML5+JS 《五子飛》游戲實現（四）夾一個和挑一對

HTML5+JS 《五子飛》游戲實現（五）移動棋子

HTML5+JS 《五子飛》游戲實現（六）鼠標響應與多重選擇

posted @ 2015-01-09 08:05 里沃特閱讀(3390) 評論(0) 收藏舉報

刷新頁面返回頂部

里沃特-技術博客

Nothing is impossible for a willing heart.

HTML5+JS 《五子飛》游戲實現（三）頁面和棋盤棋子

公告