首页 / H5教程

    canvas实现五子棋游戏的代码示例

    类型:转载      发布者:不言2019-02-13 14:40:10

    本篇文章给大家带来的内容是关于canvas实现五子棋游戏的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    效果

    1756645727-5c61792de7fee_articlex.png

    代码

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>五子棋</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        (function () {    // 画布绘制
            let canvas = document.getElementById("canvas");
            let context = canvas.getContext("2d");
            context.beginPath();
            for (let i = 0; i < 19; i++) {
                // 竖线绘制
                context.moveTo(10 + i * 20, 10);
                context.lineTo(10 + i * 20, 370);
                // 横线绘制
                context.moveTo(10, 10 + i * 20);
                context.lineTo(370, 10 + i * 20);
            }
            context.stroke();
        })();
        // 鼠标单击
        let blorwh = 0;
        // 定义用于判断落子的二维数组
        let matrix = new Array(19);
        // 进行赋值
        for(let i = 0; i < 19; i++){
            matrix[i] = new Array(19);
            for(let j = 0; j < 19; j++){
                matrix[i][j] = 0;
            }
        }
        $("#canvas").click((event) => {
            // 每次落子的时候取反
            blorwh = !blorwh;
            console.log(event.offsetX);
            let canvas = document.getElementById("canvas");
            let context = canvas.getContext("2d");
            // 保存要落子的坐标
            let arcPosX, arcPosY;
            // 保存棋子在数组中的位置
            let mtxPosX, mtxPosY;
            // 和每一条线进行比较,如果相差10个像素以内,即,靠近
            for(let x = 0; x < 19; x++){
                if(Math.abs(event.offsetX - (10 + x * 20)) < 10){
                    // 获得需要骡子的x
                    arcPosX = 10 + x * 20;
                    mtxPosX = x;
                }
                if(Math.abs(event.offsetY - (10 + x * 20)) < 10){
                    // 获得需要的y
                    arcPosY = 10 + x * 20;
                    mtxPosY = x;
                }
            }
            // 画出棋子
            // 落子为空,进行绘制,反之不绘制
            if(matrix[mtxPosX][mtxPosY] == 0) {
                context.beginPath();
                if (blorwh) {
                    context.fillStyle = "white";
                    context.arc(arcPosX, arcPosY, 10, 0, Math.PI * 2, false);
                    context.stroke();
                    // 白子为1
                    matrix[mtxPosX][mtxPosY] = 1;
                } else {
                    context.fillStyle = "black";
                    context.arc(arcPosX, arcPosY, 10, 0, Math.PI * 2, false);
                    // 黑子为2
                    matrix[mtxPosX][mtxPosY] = 2;
                }
                context.fill();
            }
            // 获胜检测
            if(matrix[mtxPosX - 1][mtxPosY] == matrix[mtxPosX][mtxPosY] &&
                matrix[mtxPosX - 2][mtxPosY] == matrix[mtxPosX][mtxPosY]  &&
                    matrix[mtxPosX -3][mtxPosY] == matrix[mtxPosX][mtxPosY]  &&
                        matrix[mtxPosY - 4][mtxPosY] == matrix[mtxPosX][mtxPosY]){
                if(matrix[mtxPosX][mtxPosY] == 1){
                    alert("白方获胜");
                }else{
                    alert("黑方获胜");
                }
            }
        })
    </script>
    </body>
    </html>

    思路

    创建数组用于保存五子棋的位置即可。
    输赢判断使用遍历即可
    重复落棋用判断保存的数组的位置是否已经有棋子即可
    落在交叉线和附近的点判断,如果相差小于一定数值进行落棋。

    以上就是canvas实现五子棋游戏的代码示例的详细内容,更多请关注php中文网其它相关文章!

    本文来源于:https://segmentfault.com/a/1190000018120965,如有侵犯,请联系删除
php中文网第五期线上直播培训班

PHP中文网

未登录