html5五子棋游戏的棋盘怎么画

棋盘用1个 div 作为容器，用 css 一些内边距{padding: 60px}，里面的网格也是用 div 标签，可以用脚本生成，一共输出20*20=400个格子就可以了，方便多了，格子设置样式为{width: 40pxheight: 40pxfloat: left}

用Fireworks CS5软件能够制作出漂亮的五子棋黑白棋盘，五子棋黑白棋盘的制作，主要通过网格和克隆效果以及组合路径中接合的使用来进行的。下面就以一个实例来进行说明。

工具/原料

Fireworks CS5

方法/步骤

1/12 分步阅读

新建一文档，大小设定为“240*240”像素，背景色为“白色”；

2/12

选择菜单【视图】|【网格】，打开“显示网格”和“对齐网格”功能；

3/12

选择菜单【视图】|【网格】|【编辑网格】将网格的大小设定位“30*30”；

4/12

在工具箱中选择“矩形”工具，将填充色设置为“无”，边框色设置为“黑色”，描边种类“铅笔”设置为“1像素柔化”

5/12

绘制一个“宽为1格、高为8格”的矩形；

6/12

选择【编辑】|【克隆】，在工具中选择“缩放”工具，将克隆的矩形宽度加大一格；

7/12

重复此 *** 作，直到网格全部被覆盖；

8/12

按快捷键“Ctrl+A”，全选中所有矩形并对其进行克隆；

9/12

选择菜单【修改】|【变形】|【顺时针旋转90°】，将克隆的矩形顺时针旋转90度；

10/12

选择菜单【视图】|【网格】-选择【显示网格】，去掉显示的网格；

11/12

选中所有矩形，选择【修改】|【组合路径】|【接合】；

12/12

将内部填充色填充为“黑色”，五子棋黑白棋盘效果制作完毕。

五子棋

---