canvas实现双人对战五子棋代码-html代码-BFW代码库

canvas实现双人对战五子棋代码

代码语言：html

所属分类：游戏

代码描述：canvas实现双人对战五子棋代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
 
    <style type="text/css">
        *{
        			margin:0;
        			padding:0;
        		}
        		.gobang{
        			margin:10px auto;
        			width:642px;
        			height: 642px;
        			/*border:1px solid;*/
        			background: url(//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png);
        			overflow: hidden;
        		}
        		.text{
        			margin:0 auto;
        			width:100px;
        			height:40px;
        			text-align: center;
        			color:#f00;
        			border:1px solid red;
        			line-height: 40px;
        			display: block;
        		}
        		#can{
        			margin:0px auto;
        			border:1px solid green;
        			display: block;
        		}
    </style>
</head>

<body>
    <canvas class="text">PK</canvas>
    <div class="gobang">

        <canvas id="can" width="640" height="640">
		您的浏览器不支持canvas
	</canvas>
    </div>
    <script>
        var text = document.getElementsByClassName('text');	
        
        
        	
        	//定义二维数组作为棋盘
        	var maps = new Array(16);
        	var len = maps.length;
        	// alert(len)
        	var url="";  
        	for(var i=0;i<len;i++){
        		maps[i] = new Array();
        		for(var j = 0;j<len;j++){
        			maps[i][j] = 0;
        			// console.log(maps[i][j]);
        		}
        	}
        
        	//初始化棋子
        	var black = new Image();
        	var white = new Image();
        	var clientWidth = document.documentElement.clientWidth;
        	black.src = "//repo.bfw.wiki/bfwrepo/icon/67ad84aeb217a.png";
        	white.src = "//repo.bfw.wiki/bfwrepo/icon/67ad84a111e25.png";
        	//棋盘初始化
        	var can = document.getElementById('can');
        	var ctx = can.getContext("2d");  //获取该canvas的2D绘图环境对象
        	ctx.strokeStyle = "#333";
        	for(var m=0;m<len-1;m++){
        		for(var n=0;n<len-1;n++){
        			ctx.strokeRect(m*40+20,n*40+20,40,40);  //绘制40的小正方形
        		}
        	}
        	//绘制文字
        	var can1 = document.getElementsByClassName('text');
        	var ctx1 = can1[0.........完整代码请登录后点击上方下载按钮下载查看