×

俄罗斯方块游戏开发(一)–游戏面板布局

发表于3年前(Dec 23, 2014 6:56:10 PM)  阅读 497  评论 0

分类: Flex 俄罗斯方块

标签: tetris 俄罗斯方块 布局 游戏面板

从今天起,我将使用AIR制作一个经典的游戏–俄罗斯方块。这个游戏不仅很多玩家喜欢玩,也有很多程序员都喜欢用这个做学习项目。刚学习AIR的时候,我就想过做这个游戏,基于难易程序,我先写了五子棋跟扫雷,五子棋的话,由于电脑AI算法现在不是我所能研究的,所以只做了玩家对战,玩家对战一般也只能用于局域网对战,实用性不强,所以没放上来。之前扫雷游戏算是完整完成了,虽然写的博客有点虎头蛇尾,实在是写作水平有限,望大家谅解。这次写扫雷程序,我会尽量写详细点,写完一点我会把每节的代码都会单独上传,希望能对大家有用。申明一点,写这个游戏前我初略看了一下传智播客的关于这个游戏的视频教程,那个是基于java GUI的,虽然语言不同,但思路是共通的,我想我很多设计会参考他,大家也可以参看那个视频。

由于最近工作比较忙,不知道下班时间有没有精力写这个,所以更新时间不能固定,有时就多写点,有时可能就写不了,我会尽量完整的结束他,也希望大家支持,多多提意见,大家可以看到我更新还是很频繁的,希望大家有问题随时找我。 

这一节我将会大体画出游戏面板的布局。我们先来看看QQ火拼俄罗斯的游戏界面:

可以看到,qq中的tetris(tetris即俄罗斯方块)每行是有12个方块,一共是大概有20行吧,我就照12*20来了。方块的大小大概是13*13,我们做的是单机,不用那么小气,就定20*20了。qq的tetris不同于别的tetris,他提示了下个方块跟下下个方块,在这里我们姑且也这么设计吧。我画了个设计图如下:

大小大概是这个样子,现在开始编程实现这个布局。

首先我们选择新建一个AIR程序,这里我命名为TETRIS,在主程序页面TETRIS.mxml里加上下面的式样,这样的话整个应用的字体就不会那么丑:

/**
整体字体样式
*/
Application {
font-size:12px;
font-style: normal;
font-weight: normal;
}
/**
控件提示信息字体样式
*/
ToolTip {
font-size:12px;
font-style: normal;
font-weight: normal;
}

然后我们给Application加上初始化方法:creationComplete=”init();”,在这个初始化方法里面,我们暂时只加上菜单栏,这个菜单栏我写成了工具类,写扫雷时已经使用过了,用法可以参考这篇文章AIR游戏扫雷(一):窗口菜单的制作。菜单栏里面的内容暂时不动,先占个座。

现在开始布局,我们先来画菜单栏下面的那个大框框,在这里所有的框框我都使用Canvas。我们来新建一个Canvas,命名为MainPanel.mxml,再新建一个SidePanel.mxml作为侧边栏,GamePanel.mxml作为游戏主区域。我们先把MainPanel加入应用,这里MainPanel是应用里唯一可见的控件,我们给他加上背景色红色,方便查看大小,在TETRIS.mxml加上如下代码:


然后再MainPanel里面加上下面代码:







这样我们面板就都已经加入,这里每个面板的大小可能跟我开始画的草图不相同,因为控件之间的包容关系可能占用一些空间,这无关紧要,我们只需保证GamePanel的大小是240*400就行了,其余的自己做下微调。这时我们运行程序,可能布局很乱,出现了滚动条,原因是我们没给主程序设大小。给主程序设大小可以直接在TETRIS.mxml里面设,也可以在配置文件里面设,在这里我们建议使用配置文件。打开TETRIS-app.xml,找到title标签,我们顺便把title设了,然后找到width跟height分别设为352和480,把maximizable设为false,这样游戏的最大化按钮就禁用了,再把resizable设为false,这样玩家就不可以改变游戏窗口的大小。再次运行程序,布局如下,这就是我们初步的界面效果:

这节源码下载地址:/upload/2014/11/23/TETRIS1.01.zip

发表评论