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