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