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

代码语言：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;
        					let endy = height + space;
        					ctx.beginPath();
        					ctx.lineTo(x, space);
        					ctx.lineTo(x, endy);
        					ctx.stroke();
        				}
        
        				for(let sx=1;sx<=3;sx++){
        					
        					for(let sy=1;sy<=3;sy++){
        						//画星位
        						ctx.beginPath();//重置路径
        						ctx.fillStyle="#000";//设置背景黑色
        						//ctx.arc(cell_width*3, cell_height*3,15, 0, Math.PI*2,true);
        						ctx.arc(cell_width*3*(sx*2-1) + space, cell_height*3*(sy*2-1) + space,5,0,Math.PI*2,true);
        						//ctx.arc(3, 3,18,0,Math.PI*2,true);
        						ctx.closePath();
        						ctx.fill();
        						//console.log(sx, sy);
        					}
        					
        				}
        				
        			}
        			
        			/**
        			 * 落子
        			 */
        			$("#myCanvas").click(function(){
        				var cx = event.pageX -  $(this).offset().left; //获取鼠标点击的x坐标点
        				var cy = event.pageY -  $(this).offset().top; //获取鼠标点击的y坐标点
        				//console.log("event.pageY, canvas.getBoundingClientRect().top", event.pageY, canvas.getBoundingClientRect().top);
        				//console.log(cx, cy);
        				var xi = Math.round((cx - space) / cell_width); //获取所在行
        				var yi = Math.round((cy - space) / cell_height); //获取所在列
        				// 显示步数
        				console.log("xi,yi", xi, yi);
        				if(xi < 0 || xi > cell_num || yi < 0 || yi > cell_num){
        					return;
        				}
        				play(xi, yi);
        				//console.log("-----------------------------------");
        			});
        			
        			/**
        			 * 退一步
        			 */
        			$("#backBtn").click(function(){
        				console.log(is_win);
        				if(is_win){
        					alert("游戏已经结束， 不能悔棋， 请重新开局");
        					return;
        				}
        				step --;//步数-1
        				chess.pop();//移除最后一颗棋子
        				reload(chess);
        			});
        			
        			/**
        			 * 重新开始
        			 */
        			$("#reStartBtn").click(function(){
        				rePlay();
        			});
        			
        			// 开始落子 计算
        			function play(xi, yi){
        				
        				if(game_status != 1){
        					/*ctx.beginPath();
   .........完整代码请登录后点击上方下载按钮下载查看