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";
                                //线.........完整代码请登录后点击上方下载按钮下载查看