flex 联机游戏开发 - 四国军棋游戏:(二)棋盘棋子

玩了太多年的四国游戏,现在,我打算做个四国游戏的flex版,下面的文章与代码是边做边写的,所以,当我贴出来的时候,说不定我已经将代码进行重构了,但是,如果你也是一名开发者,我想,设计思路总是对你有好处费参考意义的。

想知道我爱四国的多深,看看引子里的那个文章就知道了。你也可以点击这儿查看这些文章的全部。中途岛之战

深圳mm.活着viva&&冷血雅雅 。
老规矩,先画棋盘,一般的军棋游戏棋盘都利用的图片做背景,然后判断鼠标的点击来定位棋子,现在,我决定不用图片,直接用flex绘制棋盘,源于两个方面的原因,一是adobe是做美术出身的,所以,用flex绘制的棋盘基本上在ui上比java,c#绘制的要好看得多,同时,你可以很方便地对棋盘,棋子使用各种滤镜效果。二是绘制出来的棋盘,本身会减小相当多的开发工作,因为你点击的如果是棋子,他本身就可以实现事件触发。将细节处理放到了元部件中。



一,单人棋盘 Layout

public function createBoard():void
{

for (var row:int = 0; row <=xsize; row++) {
var tempArray:Array=new Array(ysize);
gameControl.boardArray[row] =tempArray;
}
//y 轴的线条
for (var i:int=0;i<=ysize;i++)
{
var line:Line=new Line();
line.xFrom=0+padding;
line.xTo=board.width-padding;
line.y=i*(board.height-2*padding)/ysize+padding;
line.stroke=DEFAULT_STROKE;
board.addElement(line);
}
//x 轴的线条
for (var j:int=0;j<=xsize;j++)
{
var line2:Line=new Line();
line2.yFrom=0+padding;
line2.yTo=board.height-padding;
line2.x=j*(board.width-2*padding)/xsize+padding;
line2.stroke=DEFAULT_STROKE;
board.addElement(line2);
}
//营里的线条
for (var x1:int=0;x1<=xsize;x1++)
{
for (var y1:int=0;y1<=ysize;y1++)
{
if ((x1==1&&y1==1)||(x1==3&&y1==3)||(x1==2&&y1==2)||(x1==1&&y1==3)||(x1==3&&y1==1))
{
//画四个方向的线
board.addElement(drawLine(x1*(board.width-2*padding)/xsize+padding,(x1+1)*(board.width-2*padding)/xsize+padding,y1*(board.height-2*padding)/ysize+padding,(y1+1)*(board.height-2*padding)/ysize+padding));
board.addElement(drawLine(x1*(board.width-2*padding)/xsize+padding,(x1+1)*(board.width-2*padding)/xsize+padding,y1*(board.height-2*padding)/ysize+padding,(y1-1)*(board.height-2*padding)/ysize+padding));
board.addElement(drawLine(x1*(board.width-2*padding)/xsize+padding,(x1-1)*(board.width-2*padding)/xsize+padding,y1*(board.height-2*padding)/ysize+padding,(y1+1)*(board.height-2*padding)/ysize+padding));
board.addElement(drawLine(x1*(board.width-2*padding)/xsize+padding,(x1-1)*(board.width-2*padding)/xsize+padding,y1*(board.height-2*padding)/ysize+padding,(y1-1)*(board.height-2*padding)/ysize+padding));
}
}
}
//默认的棋盘填充,
for (var x:int=0;x<=xsize;x++)
{
for (var y:int=0;y<=ysize;y++)
{
if ((x==1&&y==5)||(x==3&&y==5))
//画大本营
board.addElement(drawDaBenYing(x,y));
else if ((x==1&&y==1)||(x==3&&y==3)||(x==2&&y==2)||(x==1&&y==3)||(x==3&&y==1))
//画营
board.addElement(drawYing(x,y));
else
//其它
board.addElement(drawQizhi(x,y));
}
}

}

[img]http://www.rainfu.net/sites/files/net_rainfu/sg2.jpg[/img]

现在我对决定在每个地方加一个默认的棋子,默认是不可见的,但在棋盘的实际情况应该是这样的。在测试的时候加入一种颜色,实际情况中应该是选择alpha为0,这样,棋子是不可见的,同样,这个函数也需要传入用户的位置,这样,每个玩家就可以选择不同颜色的棋子。




//默认的棋盘填充,
for (var x:int=0;x<=xsize;x++)
{
for (var y:int=0;y<=ysize;y++)
{
if ((x==1&&y==5)||(x==3&&y==5))
//画大本营
board.addElement(drawDaBenYing(x,y));
else if ((x==1&&y==1)||(x==3&&y==3)||(x==2&&y==2)||(x==1&&y==3)||(x==3&&y==1))
//画营
board.addElement(drawYing(x,y));
else
//其它
board.addElement(drawRect(x,y));

//放一个默认的棋子
board.addElement(drawQizhi(x,y));
}
}

//默认的棋盘填充,
for (var x:int=0;x<=xsize;x++)
{
for (var y:int=0;y<=ysize;y++)
{
if ((x==1&&y==5)||(x==3&&y==5))
//画大本营
board.addElement(drawDaBenYing(x,y));
else if ((x==1&&y==1)||(x==3&&y==3)||(x==2&&y==2)||(x==1&&y==3)||(x==3&&y==1))
//画营
board.addElement(drawYing(x,y));
else
//其它
board.addElement(drawRect(x,y));

//放一个默认的棋子
board.addElement(drawQizhi(x,y));
}
}

对不同颜色的棋子,我们再加入一个默认的数组来填充不同用户的颜色,同样,我们可以设置这个数组是可变的,当你的上家说,要吃红子时,实际上红子对不同位置的玩家是完全不一样的,有一定的迷惑作用,当然,他可以说,人吃上家或下家,总归是道高一,魔高一章啊。

//玩家填充
private const TURNARRAY:Array=[new SolidColor(0xff0000,1),new SolidColor(0x00ff00,1),new SolidColor(0x0000ff,1),new SolidColor(0xffcc00,1),new SolidColor(0xffffff,0)];



哦,差点忘了,在游戏中还有另外一种状态,那就是棋子是覆盖着的,不可见的。我们也得把这个加上。



二 四人棋盘 Board

现在,每个人的棋盘已经画好,我们现在需要四个棋盘+一个中间部分来完成整个棋盘的初始化工作,flex对效果的支持现在开始发威,我们只要把这个棋盘放上四份,一份为原始,一份旋转90,一份旋转-90,一份旋转180度,就可以完成4个棋盘的工作,

<s:Group width="660" height="660" left="20" top="20">
<ns1:Layout x="425" y="220" rotation="180">
</ns1:Layout>
<ns1:Layout x="220" y="235" rotation="90">
</ns1:Layout>
<ns1:Layout x="235" y="440">
</ns1:Layout>
<ns1:Layout x="440" y="425" rotation="-90">
</ns1:Layout>
<ns1:CenterGroup x="220" y="220">
</ns1:CenterGroup>
</s:Group>

下面的工作就是画中间那个部分了。

protected function init(event:FlexEvent):void
{
// TODO Auto-generated method stub
// TODO Auto-generated method stub
//y 轴的线条

BOARD_IMG.source=BoardChess;
BOARD_IMG.fillMode = BitmapFillMode.REPEAT;

for (var i:int=0;i<=2;i++)
{
var line:Line=new Line();
line.xFrom=0;
line.xTo=center.width;
line.y=i*(center.height-2*padding)/2+padding;
line.stroke=DEFAULT_TEDAO_STROKE;
center.addElement(line);
}
//x 轴的线条
for (var j:int=0;j<=2;j++)
{
var line2:Line=new Line();
line2.yFrom=0;
line2.yTo=center.height;
line2.x=j*(center.width-2*padding)/2+padding;
line2.stroke=DEFAULT_TEDAO_STROKE;
center.addElement(line2);

}

//边角的弧
center.addElement(drawArc(-padding,-padding));
center.addElement(drawArc(-padding,2*(center.height-2*padding)/2+padding));
center.addElement(drawArc(2*(center.height-2*padding)/2+padding,-padding));
center.addElement(drawArc(2*(center.height-2*padding)/2+padding,2*(center.height-2*padding)/2+padding));

//填充,
for (var x:int=0;x<=2;x++)
{
for (var y:int=0;y<=2;y++)
{

var rect:Rect=new Rect();
rect.width=15;
rect.height=15;
rect.x=x*(center.width-2*padding)/2-15/2+padding;
rect.y=y*(center.height-2*padding)/2-15/2+padding;
rect.radiusX=3;
rect.radiusY=3;
rect.stroke=DEFAULT_STROKE;
rect.fill=BOARD_IMG;
center.addElement(rect);
}
}
}

这样,所有的部分已经完成,我们现在稍微改变一下逻辑,将底纹填充放到主类,在layout类不进行填充。生成的棋局应该就是这样子的。

[img] http://www.rainfu.net/sites/files/net_rainfu/sg3_0.jpg[/img]

三,最终布局

最后,我们将用户的信息传入棋盘,并加入一些控制键,最终形成的棋盘应该如下

<s:BorderContainer id="board" width="880" height="670" top="20" left="150" horizontalCenter="0">
<ns1:CenterGroup x="320" y="198">
</ns1:CenterGroup>
<ns1:Layout x="530" y="219" rotation="180">
</ns1:Layout>
<ns1:Layout x="341" y="218" rotation="90">
</ns1:Layout>
<ns1:Layout x="340" y="407">
</ns1:Layout>
<ns1:Layout x="529" y="408" rotation="-90">
</ns1:Layout>
<ns1:UserInfo x="221" y="17">
</ns1:UserInfo>
<ns1:UserInfo x="550" y="433">
</ns1:UserInfo>
<ns1:UserInfo x="10" y="228">
</ns1:UserInfo>
<mx:Button id="btnlose" label="投降" enabled="false" x="669" y="465" width="70" height="21"/>
<mx:Button id="btnstart" label="开始" enabled="true" x="669" y="435" width="70" height="21"/>
<mx:Button id="btnsave" label="调入布局" enabled="true" x="669" y="525" width="70" height="21"/>
<mx:Button id="btnopen" label="保存布局" enabled="true" x="669" y="495" width="70" height="21"/>
<ns1:UserInfo x="763" y="228">
</ns1:UserInfo>

</s:BorderContainer>


[img]http://www.rainfu.net/sites/files/net_rainfu/sg5_0.JPG[/img]
已标记关键词 清除标记
相关推荐
<p> <strong><span style="background-color:#FFFFFF;color:#E53333;font-size:24px;">本页面购买不发书!!!仅为视频课购买!!!</span></strong> </p> <p> <strong><span style="color:#E53333;font-size:18px;">请务必到</span></strong><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><strong><span style="color:#E53333;font-size:18px;">https://edu.csdn.net/bundled/detail/49</span></strong></a><strong><span style="color:#E53333;font-size:18px;">下单购买课+书。</span></strong> </p> <p> <span style="font-size:14px;">本页面,仅为观看视频页面,如需一并购买图书,请</span><span style="font-size:14px;">务必到</span><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><span style="font-size:14px;">https://edu.csdn.net/bundled/detail/49</span></a><span style="font-size:14px;">下单购买课程+图书!!!</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">疯狂Python精讲课程覆盖《疯狂Python讲义》全书的主体内容。</span> </p> <span style="font-size:14px;">内容包括Python基本数据类型、Python列表、元组和字典、流程控制、函数式编程、面向对象编程、文件读写、异常控制、数据库编程、并发编程与网络编程、数据可视化分析、Python爬虫等。</span><br /> <span style="font-size:14px;"> 全套课程从Python基础开始介绍,逐步步入当前就业热点。将会带着大家从Python基础语法开始学习,为每个知识点都提供对应的代码实操、代码练习,逐步过渡到文件IO、数据库编程、并发编程、网络编程、数据分 析和网络爬虫等内容,本课程会从小案例起,至爬虫、数据分析案例终、以Python知识体系作为内在逻辑,以Python案例作为学习方式,最终达到“知行合一”。</span><br />
<p> <strong><span style="font-size:20px;color:#FF0000;">本课程主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者</span></strong> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">1. 包含:<span style="color:#FFFF00;background-color:#FF0000;">项目源码、</span><span style="color:#FFFF00;background-color:#FF0000;">项目文档、数据库脚本、软件工具</span>等所有资料</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">2. 手把手的带你从零开始部署运行本套系统</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">3. 该项目附带的源码资料可作为毕设使用</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">4. 提供技术答疑和远程协助指导</span></strong></span><strong><span style="font-size:18px;"></span></strong> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>项目运行截图:</strong></span> </p> <p> <strong><span style="font-size:18px;">1)系统登陆界面</span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241015433522.png" alt="" /><br /> </span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">2)学生模块</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241015575966.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">3)教师模块</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016127898.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">4)系统管理员</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016281177.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016369884.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><br /> </span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">更多Java毕设项目请关注我的毕设系列课程 <a href="https://edu.csdn.net/lecturer/2104">https://edu.csdn.net/lecturer/2104</a></span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><br /> </span></strong> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页