Flash cs5.5 + as3
定制棋盘大小，绘制外部边框 总体构思：（可参见概述中的最终效果图）桌面背景设为银灰色；棋盘上每个格子都是正方形，边长40；这就决定了棋盘大小为320*360；（这也决定了棋子的直径也是40）棋盘上下各有80的天头地脚，左右有40的旁白；故，设置舞台大小为400*520。import flash.display.Shape;//导入图形类import flash.display.Sprite;//轻量级的容器import flash.display.Bitmap;//位图类import flash.display.BitmapData;//位图数据类 [SWF(width=400,height=520,backgroundColor=0xD6D6D6)]//绘制外边框，双层嵌套，外层线粗为2，内层线粗为1.均黑色//写一个绘制矩形的函数。以供调用，有返回值：图形类//参数：宽、高、粗细function rect(w:uint,h:uint,size:uint=1):Shape {var sp:Shape=new Shape ;sp.graphics.lineStyle(size);sp.graphics.drawRect(0,0,w,h);return sp;} //制作一个容器，用来画线var box:Sprite=new Sprite();box.x=40;//左边旁白box.y=80;//天头this.addChild(box); //绘制棋盘内框线box.addChild(rect(320,360));//再绘制棋盘外框，粗线，与内框间距为5var big:Shape=rect(330,370,2);big.x=big.y=-5;this.box.addChild(big); 效果：
绘制棋盘上半部分的网格因为有边框线了，所棋盘上半部网格左边线、上边线和右边线不用绘制了。function web():Shape {var grid:Shape=new Shape();//横线grid.graphics.lineStyle(1);for (var i :uint =1; i<5; i++) {//与上边框重合的线不用绘制grid.graphics.moveTo(0,i*40);grid.graphics.lineTo(8*40,i*40);}//竖线 for (i=1; i<8; i++) {//与左右两侧边框重合的线不用绘制grid.graphics.moveTo(i*40,0);grid.graphics.lineTo(i*40,4*40);}return grid}box.addChild(web())//调用函数绘制网格
绘制士路，叉型线条首先写一个用于一次绘制两条线段的函数。因为士路、星位都是由两条线段组成的。只是位置不同罢了。 function line(A:Array ,B:Array):Shape {var X:Shape=new Shape();X.graphics.lineStyle(1);//定制画笔，1 像素粗。X.graphics.moveTo(A[0],A[1]);//绘制第一条X.graphics.lineTo(A[2],A[3]);X.graphics.moveTo(B[0],B[1]);//绘制第二条X.graphics.lineTo(B[2],B[3]);return X;}现在我们调用上面的函数绘制士路：叉型box.addChild(line([3*40,0,5*40,2*40],[3*40,2*40,5*40]));效果：
制作绘制星位的组件棋盘上有14个星位，它们的位置是有规律的，而且形态都是由两个或者四个直角组成。一会儿我们要写出一个函数，完成绘制直角的任务。但别忙，我们进一步考察，又可以发现，星的组成可以分解成左右两部分，如图： 于是我们可以这样写函数，绘制直角，一次绘制两个，成上下镜像。function angle():Sprite {var st:Sprite=new Sprite();st.addChild(line([3,-3,3,-10],[3,-3,10,-3]));//调用上面定义过的一次画两条的函数st.addChild(line([3,3,3,10],[3,3,10,3]) );//再调用上面定义过的一次画两条的函数return st;}绘制效果：
绘制棋盘上半部的七个星位下面函数中，前五个是卒位，后两个是炮位function star() {for (var i:uint =0; i<6; i++) {var st:Sprite=star();st.x=i*80;//定位st.y=120;box.addChild(st); var sp:Sprite=star();sp.rotation=180;//旋转180度sp.x=i*80+80;//定位sp.y=120;box.addChild(sp); if (i==4) {//左炮位st.x=sp.x=40;st.y=sp.y=80;}if (i==5) {//右炮位st.x=sp.x=280;st.y=sp.y=80;}}} star();//调用函数绘制星位效果：
复制棋盘上半部，旋转180度，再拼接成完整的棋盘。也要写个函数，目的是要改变思想，不要总是把代码散散地写在时间轴。//复制函数：function copy() {var myBitmapData:BitmapData=new BitmapData(320,161,true,0xd6d6d6);//创建一个位图数据。注意：161的个位数是1，就是要把“下边线”也纳入镜头。myBitmapData.draw(box);//给已绘制好的上半部棋盘照相！var bmp:Bitmap=new Bitmap(myBitmapData);//取得数据后，转化为可视图片bmp.rotation=180;//旋转bmp.x=321;//定位于右下角。为什么？因为注册点在左上角旋转180度后，注册点在右下角。bmp.y=360;//定位box.addChild(bmp);}copy() //调用函数，绘制棋盘下半部。效果： 拼合后的效果：效果：
总结一下： 这个棋盘的绘制思想是：不进行每一个线条的绘制，而是先绘制元件，再复制、旋转、拼接。代码特点是：功能代码集成为块——函数——集中管理，方块查找，还可多次调用。