那年的屑代码 前端 五子棋

于 2023-10-06 16:42:51 发布
阅读量139 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cozyy/article/details/133613389
版权

五子棋

html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <link rel="stylesheet" href="Gobang.css">
    <script src="scripts/Chessboard.js"></script>
    <script src="scripts/Chess.js"></script>
    <script src="scripts/Control.js"></script>
</head>

<body>
    <!-- 标题 -->
    <div id="header">
        <span>Gobang</span>
        <span class="maker">made by WJX</span>
    </div>
    <!-- 游戏主界面 -->
    <div id="main">
        <!-- 棋盘 -->
        <canvas width="630px" height="630px" id="canvas">你的浏览器不支持HTML5 canvas ，请使用 google chrome 浏览器 打开.
        </canvas>
        <!-- 按钮 -->
        <div class="buttons">
            <div class="marks"></div>
            <button id="newGame">新游戏</button>
            <button id="prev" style="display: none;">上一步</button>
            <button id="next" style="display: none;">下一步</button>
            <button>更改样式</button>
        </div>
    </div>

</body>

</html>

css

#header {
    margin: auto;
    width: 1000px;
    height: 40px;
    background-image: linear-gradient(to right, rgb(6, 165, 255), rgb(215, 2, 251));
    font: italic 700 32px/40px Consolas;
    color: white;
    text-align: center;
}

#header .maker {
    display: block;
    font-size: 14px;
    float: right;
    line-height: 50px;
    position: relative;
    right: 250px;
}

#main {
    width: 1000px;
    height: 720px;
    margin: 0 auto;
    padding: 20px;
}

#canvas {
    display: block;
    float: left;
    background-color: rgb(238, 194, 84);
    margin: 0 20px;
    box-shadow: -2px -2px 2px #FF0000,
        5px 5px 5px rgb(11, 171, 252);
}

#main .buttons {
    width: 250px;
    height: 630px;
    float: left;
    margin: 0 20px;
    background-color: rgb(224, 217, 202);
}

#main .buttons .marks {
    display: block;
    width: 100%;
    height: 150px;
}

#main .buttons button {
    width: 160px;
    height: 50px;
    margin: 20px 30px;
    font: 700 20px/50px '微软雅黑';
    color: white;
    border: none;
    border-radius: 25px;
    background: linear-gradient(to bottom, rgb(255, 13, 39), rgb(252, 141, 3));
}

script文件
棋盘的控制
每一次下棋都要重新更新棋盘

window.onload = function () {
    var chessboard = new Chessboard;
    var canvas = document.getElementById("canvas");
    var newGame = document.getElementById("newGame");
    var isBlack = true;
    var isWin = false;
    var context = canvas.getContext("2d");
    var chess;
    chessboard.initial();
    chessboard.drawChessboard(canvas);
    newGame.onclick = function () {
        context.clearRect(0, 0, 630, 630);
        chessboard.initial();
        isBlack = true;
        isWin = false;
        chessboard.drawChessboard(canvas);
        alert("游戏开始！");
        canvas.onclick = function (e) {
            if (isWin) return;
            var x = Math.round((e.offsetX - chessboard.startX) / 40),
                y = Math.round((e.offsetY - chessboard.startY) / 40);
            console.log(x, y);
            var color;
            if (isBlack) {
                isBlack = false;
                color = 1; //black
            } else {
                isBlack = true;
                color = 2; //white
            }
            chess = new Chess(color, x, y);
            isWin = chessboard.putChess(canvas, chess);
            if (isWin) {
                showWinner(isWin);
            }
        }
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        prev.style.display = "block";
        next.style.display = "block";
        prev.onclick = function () {
            chessboard.prevChess(canvas);
        }
        next.onclick = function () {
            chessboard.nextChess(canvas);
        }

        function showWinner(winner) {
            if (winner == 1) {
                alert("黑棋胜！");
            } else {
                alert("白棋胜！");
            }
        }


    }
}

关于棋盘的绘制 棋子绘制

function Chessboard() {
    this.startX = 40;
    this.startY = 30;
    this.sideLength = 40;
    this.blockNumber = 14;
    this.existingChesses = [];
    this.chessNumber = 0;
    this.nowChess = null;
    this.initial = function () {
        this.chessNumber = 0;
        for (var i = 1; i <= this.blockNumber + 1; i++) {
            this.existingChesses[i] = [];
            for (var j = 1; j <= this.blockNumber + 1; j++) {
                this.existingChesses[i][j] = 0;
            }
        }
    }
    this.drawChessboard = function (canvas) {
        var ctx = canvas.getContext("2d");
        //col
        for (var i = 0; i <= this.blockNumber; i++) {
            ctx.beginPath();
            ctx.moveTo(this.startX + i * 40, this.startY);
            ctx.lineTo(this.startX + i * 40, this.startY + this.blockNumber * 40);
            ctx.stroke();
        }
        //row
        for (var i = 0; i <= this.blockNumber; i++) {
            ctx.beginPath();
            ctx.moveTo(this.startX, this.startY + i * 40);
            ctx.lineTo(this.startX + this.blockNumber * 40, this.startY + i * 40);
            ctx.stroke();
        }
        //number on the left
        //letter on the bottom
        var str = "ABCDEFGHIJKLMNO"
        ctx.font = "20px 微软雅黑";
        ctx.fillStyle = 'black';
        for (var i = 0; i <= this.blockNumber; i++) {
            ctx.fillText(i, 3, this.startY + (this.blockNumber - i) * 40)
            ctx.fillText(str[i], this.startX + i * 40, this.startY + 14 * 40 + 20);
        }
    }
    this.putChess = function (canvas, chess) {
        var x = chess.x,
            y = chess.y;
        if (!this.existingChesses[x][y]) {
            if (this.nowChess) {
                this.nowChess.next = chess;
                chess.prev = this.nowChess;
                chess.next = null;
                this.nowChess = chess;
            } else {
                this.nowChess = chess;
                chess.next = null;
                chess.prev = null;
            }
            this.drawChess(canvas, chess);
            return this.result(chess);
        }
    }
    this.drawChess = function (canvas, chess) {
        var realX = this.startX + chess.x * 40,
            realY = this.startY + chess.y * 40;
        var ctx2 = canvas.getContext("2d");
        ctx2.beginPath();
        ctx2.arc(realX, realY, 15, 0, Math.PI * 2);
        if (chess.color == 1) {
            ctx2.fillStyle = 'black';
        } else {
            ctx2.fillStyle = 'white';
        }
        ctx2.fill();
        this.chessNumber++;
        this.existingChesses[chess.x][chess.y] = chess.color;
    }
    this.result = function (chess) {
        var x = chess.x,
            y = chess.y,
            color = chess.color;
        var count = 0;
        //横
        var i = x,
            j = x + 1;
        while (true) {
            if (this.existingChesses[i][y] == color) {
                i--;
                count++;
                if (count == 5) return color;
            } else if (this.existingChesses[j][y] == color) {
                j++;
                count++;
                if (count == 5) return color;
            } else break;
        }

        //纵
        count = 0;
        i = y, j = y + 1;
        while (true) {
            if (this.existingChesses[x][i] == color) {
                i--;
                count++;
                if (count == 5) return color;
            } else if (this.existingChesses[x][j] == color) {
                j++;
                count++;
                if (count == 5) return color;
            } else break;
        }
        //左上到右下
        count = 0;
        i = x, j = y;
        while (true) {
            if (this.existingChesses[i][j] == color) {
                i--;
                j--;
                count++;
                if (count == 5) return color;
            } else break;
        }
        i = x + 1, j = y + 1;
        while (true) {
            if (this.existingChesses[i][j] == color) {
                i++;
                j++;
                count++;
                if (count == 5) return color;
            } else break;
        }

        //左下到右上
        count = 0;
        i = x, j = y;
        while (true) {
            if (this.existingChesses[i][j] == color) {
                i--;
                j++;
                count++;
                if (count == 5) return color;
            } else break;
        }
        i = x + 1, j = y - 1;
        while (true) {
            if (this.existingChesses[i][j] == color) {
                i++;
                j--;
                count++;
                if (count == 5) return color;
            } else break;
        }
        return false;
    }
    this.clearChess = function (canvas, chess) {
        var ctx = canvas.getContext("2d");
        var realX = this.startX + chess.x * 40,
            realY = this.startY + chess.y * 40;
        var x = realX - 20,
            y = realY - 20;
        ctx.clearRect(x, y, 40, 40);
        ctx.beginPath();
        ctx.moveTo(x, realY);
        ctx.lineTo(x + 40, realY);
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.moveTo(realX, y);
        ctx.lineTo(realX, y + 40);
        ctx.stroke();
        ctx.closePath();
        this.existingChesses[chess.x][chess.y] = 0;
        this.chessNumber--;
    }
    this.prevChess = function (canvas) {
        this.clearChess(canvas, this.nowChess);
        console.log(this.nowChess);
        if (this.nowChess.prev) {
            this.nowChess = this.nowChess.prev;
        } else {
            alert("已经是最后一颗棋子啦，不可以再悔棋咯！");
        }
    }
    this.nextChess = function (canvas) {
        if (this.nowChess.next) {
            if (this.chessNumber != 0) {
                this.nowChess = this.nowChess.next;
            }
            this.drawChess(canvas, this.nowChess);
        } else {
            alert("没有下一步了哦！");
        }
    }
}

当然不要忘记棋子

function Chess(Color, X, Y) {
    this.color = Color; //1 black ,2 white
    this.x = X;
    this.y = Y;
    this.prev;
    this.next;
}
_wow_
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_wow_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值