jquery实现一个五子棋小游戏代码-html代码-BFW代码库

jquery实现一个五子棋小游戏代码
代码语言：html
所属分类：游戏
代码描述：jquery实现一个五子棋小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <style>
        #main{
        width: 100%;
        height: 100%;
    }
    
    .btnWrap{
        width:720px;
        margin: 20px auto;
    }
    
    .btnWrap button{
        display: inline-block;
        height: 30px;
        padding:5px;
        border-radius: 4px;
        color:#fff;
        background: #000033;
        cursor:pointer;
    }
    
    #container{
        width:720px;
        height: 720px;
        margin: 30px auto;
        background-color: antiquewhite;
        position: relative;
    }
    
    #container2{
        width:840px;
        height: 840px;
        margin: 30px auto;
        background-color: antiquewhite;
        position: relative;
    }
    
    #container .cell{
        border-top:solid 1px #000;
        border-left:solid 1px #000;
        text-align: center;
    }
    
    #container .cell:last-child{
        /*border-bottom:solid 1px #000;*/
    }
    
    #win_msg{
        display: none;
        height:60px;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-100px;
        font-size:36px;
        margin-top:-30px;
        line-height:60px;
        z-index:999;
        color:red;
        font-weight:bold;
        
    }
    
    #myCanvas{
        cursor:pointer;
    }
    </style>

</head>

<body>

    <div id="main">
        <div class="btnWrap">
            <button id="reStartBtn">重新开始</button>
            <button id="backBtn">悔一步</button>
        </div>
        <div id="container2" style="box-shadow:#ccc 1px 1px 6px ;">
            <canvas id="myCanvas" width="840" height="840"></canvas>
        </div>
        <div id="win_msg">测试信息</div>
    </div>
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
                                //var canvas = $("#myCanvas");
                                var ctx = canvas.getContext("2d");
                                //线条的颜色
                                ctx.strokeStyle="#000";
                                //线条的宽度像素
                                ctx.lineWidth=1;
                                
                                var space = 60;//棋盘边界与画布边界的间距
                                var cell_num = 18;//一共几个格子
                                var width = $("#container2").width() - space * 2;// 棋盘的宽度
                                var height = $("#container2").height() - space * 2;// 棋盘的高度
                                var cell_width = width / cell_num;// 每个格子的宽度
                                var cell_height = height / cell_num;// 每个格子的宽度
                                var chess_size = cell_width / 2 - 2; //棋子的直径
                                
                                
                                var game_status = 1;
                                var qi = "black";
                                var chess = new Array();
                                var step=0;//存储下棋步骤
                                var has_chess = false;
                                var is_win = false;
                                
                                init();
                                
                                function init(){
                                        draw();
                                }
                                
                                
                                //重新开始
                                function rePlay(){
                                        game_status = 1;
                                        qi = "black";
                                        chess = new Array();//重置棋数组
                                        step=0;//存储下棋步骤
                                        has_chess = false;
                                        is_win = false;
                                        /*canvas.getContext("2d");
                                        ctx.clearRect(0, 0, canvas.width, canvas.height);*/
                                        canvas.setAttribute("height",$("#container2").height());
                                        draw();
                                }
                                
                                /**
                                 * 重新加载画面（刷新画面）
                                 * @param {Object} chess
                                 */
                                function reload(chess){
                                        
                                        //重新绘制棋盘跟棋子.
                                        canvas.setAttribute("height",$("#container2").height());
                                        draw();
                                        qi = qi=="black"?"white":"black";
                                        chess.forEach(item=>{
                                                draw_chess(item.x, item.y, item.color, item.step);
                                        });
                                }
                                
                                /**
                                 * 绘制棋盘
                                 */
                                function draw(){
                                        
                                        //画横线
                                        for(let i=0;i<cell_num+1;i++){
                                                let y=i * cell_width + space;
                                                let endx = width + space;
                                                //console.log(endx);
                                                ctx.beginPath();
                                                ctx.lineTo(space, y);
                                                ctx.lineTo(endx, y);
                                                ctx.stroke();
                                        }
                                        
                                        //画竖线
                                        for(let j=0;j<cell_num+1;j++){
                                                let x = j * cell_width + space;
 .........完整代码请登录后点击上方下载按钮下载查看