定义canvas及黑白棋变量
<font color="#2f4f4f" face="微软雅黑" size="3">var canvas
var context
var isWhite = true//设置是否该轮到白棋
var isWell = false//设置该局棋盘是否赢了，如果赢了就不能再走了
var img_b = new Image()
img_b.src = "images/b.png"//白棋图片
var img_w = new Image()
img_w.src = "images/c.png"//黑棋图片</font>
为棋盘的二维数组用来保存棋盘信息
<font color="#2f4f4f" face="微软雅黑" size="3">var chessData = new Array(15)//初始化0为没有走过的，1为白棋走的，2为黑棋走的
for (var x = 0x <15x++) {
chessData[x] = new Array(15)
for (var y = 0y <15y++) {
chessData[x][y] = 0
}
}</font>
绘制棋盘的线
<font color="#2f4f4f" face="微软雅黑" size="3"> for (var i = 0i <= 640i += 40) {
context.beginPath()
context.moveTo(0, i)
context.lineTo(640, i)
context.closePath()
context.stroke()
context.beginPath()
context.moveTo(i, 0)
context.lineTo(i, 640)
context.closePath()
context.stroke()
}
}</font>
判断该棋局的输赢
<font color="#2f4f4f" face="微软雅黑" size="3">if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
if (chess == 1) {
alert("白棋赢了")
}
else {
alert("黑棋赢了")
}
isWell = true//设置该局棋盘已经赢了，不可以再走了
}</font>
html代码：
<font color="#2f4f4f" face="微软雅黑" size="3"><body onload="drawRect()">
<div>
<canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的浏览器不支持HTML5 canvas ，请使用 google chrome 浏览器 打开.
</canvas>
</div>
</body></font>
棋盘用1个 div 作为容器，用 css 一些内边距{padding: 60px}，里面的网格也是用 div 标签，可以用脚本生成，一共输出20*20=400个格子就可以了，方便多了，格子设置样式为{width: 40pxheight: 40pxfloat: left}你只是要的布局还是整个游戏的例子
代码量太多了，这里面贴不出来，我给你两个地址
围棋例子说明地址
例子源码地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3:画简易围棋：chess</title>
<style>
html {
font-size: 50px
}
.chessboard {
-webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
-.1rem -.1rem .05rem rgba(0,0,0,.5)
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
-.1rem -.1rem .05rem rgba(0,0,0,.5)
height: calc(19rem + 0.04rem)
width: calc(19rem + 0.04rem)
background: #daca39
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.04rem, white), color-stop(0, transparent)), -webkit-gradient(linear, left top, right top, color-stop(0.04rem, white), color-stop(0, transparent))
background-image: -webkit-linear-gradient(white 0.04rem, transparent 0), -webkit-linear-gradient(left, white 0.04rem, transparent 0)
background-image: linear-gradient(white 0.04rem, transparent 0), linear-gradient(90deg, white 0.04rem, transparent 0)
-webkit-background-size: 1rem 1rem
background-size: 1rem 1rem
}
.chess {
position: relative
height: 1rem
width: 1rem
border-radius: 0.5rem
-webkit-box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset
box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset
}
.chess-white {
left:.5rem
top:.5rem
background: #EEE
}
.chess-black {
background: #000
left:10.5rem
top:10.5rem
}
</style>
</head>
<body>
<div>
<div class="chess chess-white"></div>
<div class="chess chess-black"></div>
</div>
</body>
</html>
