这一章将会讲一下开发一个基于web的hangman game(猜词游戏)。这里面会用到一些prado的组件。这个游戏说明了显示状态使prado页面具有很强的交互性。
这个游戏只包括了一个页面来实现以下的功能:当用户第一次访问的时候,允许用户选择三种不同难度来开始这个游戏,不同的难度对应着不同的可以猜错的次数。游戏开始后,页面的上半部分会显示要猜得单词,没有猜中的字母用下划线显示。页面的下半部分列出了26个字母,用户可以点击对应字母来选择要猜的字母。如果用户放弃游戏或者错误次数超过了难度限制,会显示失败信息;如果猜对了,会显示成功信息。任何时候用户都可以重新开始游戏。
范例中会使用的 prado 组件包括:
这些定义好的组件通过属性和事件已经封装好了很多功能。比如,可以设置tpanel 的visible
属性来控制整个<div>元素是不是可见。可以给tbutton 组件的onclick 事件指定一个响应函数,这样当用户点击按钮的时候就会自动调用响应函数。请参考prado api文档中关于这些组件更详细的信息。
游戏中的一些数据在游戏过程中需要一值保持着的。因为这里只用了一个页面,所以可以使用显示状态而不需要使用session来保存这些数据。下面这些数据需要保存在显示状态中:
他们都被定义在页面的属性中(当然也可以不这么做)。
我们需要创建6个文件。假定这个应用放在web服务器的根目录下,这些文件是:
下面主要讲一下homepage 类的三个文件,其他文件和"hello,world!"例子是类似的。
3.1 homepage.tpl
首先来说一些页面模板文件。这个过程也是prado应用开发的过程。首先在页面模板中组合prado组件,然后就可以测试一下这个页面的显示样子,最后编写页面类文件中需要的代码。这是一个典型的rad(快速应用开发)的开发过程。
这个模板文件的位置是 examples/hangman/homepage.tpl .
可以看到这个模板被分成4个组件startpanel, guesspanel, winpanel, 和losepanel ;他们将根据游戏的状态来决定是否可视。
在 startpanel中,使用了三个 tradiobutton 组件让用户可以选择游戏的难度。tbutton 的onclick 事件指定了一个响应函数onselectlevel ,当用户选择难度后点击了按钮就会被触发。如果用户没有选择难度,tlabel 组件会显示一个错误提示信息。
在 guesspanel中,三个表达式标签用于显示页面的 guessword, misses,和 level 属性。 同时还有一系列的tlinkbutton 组件来显示字母a到z,它们用于让用户点击选择猜哪一个字母。不管是猜对了还是猜错了,以后这个字母就不允许再被点击了。注意,所有的这些tlinkbutton 组件都有同样的一个事件onclick 的响应函数onguessword 。
winpanel 和 losepanel 会显示成功和错误的信息。如果用户点击了面板上的tlinkbutton ,onclick 事件的响应函数onstartagain 会被触发。
3.2 homepage.spec
这个页面规格文件在 examples/hangman/homepage.spec。它很简单,就是定义了4个页面的属性: misses, level, guessword 和 word .
3.3 homepage.php
这个页面类文件在 examples/hangman/homepage.php .
页面类 homepage 继承了框架提供的 tpage 类。
getter和setter函数用来定义页面属性。注意: getviewstate() 和 setviewstate() 函数被调用了,用来返回和保持属性的数据。这两个函数在tpage 的父类tcomponent 中实现。它们是显示状态机制的主要代码。保存在显示状态中的数据在页面的postback中是一直保存着的。
接下来实现了4个事件响应函数: onselectlevel(), onguessword(), ongiveup() 和
onstartagain()。它们对应着在页面模板中指定的onclick 事件响应函数。四个函数的具体内容就不再解释了,一看就明白。
现在你可以试试这个游戏,访问 url:http://<web-server-address>/examples/hangman.php。
新闻热点
疑难解答