Joomla!和flex开宝箱

 

 

Flex的小游戏开发现在是如火如荼，偶有心得，不敢独享。特借助《草根》杂志宝贵版面和兄弟姐妹们分享。

游戏简介

本游戏为joomla!系统的用户提供的一个小娱乐游戏，类似于qq的开宝箱游戏。

游戏分为开始，游戏，结束三个场景。

玩家进入游戏后，按开始，画面随机出现五个宝箱，用户可以用鼠标点击宝箱，如果运气好的话，箱子打开，并出现各种奖品。否则，画面提示用户手气不佳。用户点击退出，则提示游戏结束。

架构简单介绍

本文采用服务器端为基于php的joomla!系统，客户端为flex。总体架构如下:

Flex部署在客户端，通过json协议和joomla!进行数据交换，Joomla!系统则负责处理和数据库服务器进行数据查询存储。

技术上，有这么几个要点。首先flex和joomla!系统通讯，按常用的应该是采用AMFPHP或web service xml用于 flex和php进行通讯，基于 简便和性能方面的考虑，本文采用了最简单的json协议用于双方通讯。其次由于Joomla!本身已经有一套行之有效的程序架构，所以不用多说服务端程序整体架构。这里只强调基于用户认证的用于flex和Joomla!一套简单通讯机制架构（：-），很小的一套，权且叫架构）。第三点，要做好flex游戏，需要在一套逻辑和表现分离的flex 游戏引擎上来开发。有兴趣的同学请看国外的开源游戏框架pushbutton.。这里由于只抛砖引玉，不搞那么复杂呢，就直接采用最初级的flex自身机制和可视组件来做。

必杀技一   json通讯

这个是最重要的技术环节，有了它，flex才能和joomla!系统进行数据交互。首先在flex

的mx里放置入以下代码。

<mx:HTTPService id="jsonservice" url="http://localhost/index.php?option=com_ajax " resultFormat="text" result="onJSONResult(event)" />

然后，需要在flex项目里引入支持json的包。该任务分两步完成。

1.首先在action script里引入

import com.adobe.serialization.json.JSON;             import com.adobe.serialization.json.JSONParseError;

2.在flex 项目里加载上corelib.swc(在http://www.4fbbs.cn/bbs/thread-104598-1-1.html下载。)

必要工作准备好后，就可以用flex里调用HTTPSERVICE和joomla以json格式进行通讯。

Flex以GET调用joomla!系统功能。以下语句调用Joomla!系统里宝箱的个数。

var params:Object = {};          params["action"] = "getBoxCount";//GET请求action= getBoxCount                  jsonservice.send(params); //发出请求

Flex收发http请求和javascript类似，都是异步的，所以要在不同方法里实现。以下接受joomla!系统返回结果。

private function onJSONResult( event:ResultEvent ) : void {               var data:String = event.result.toString();               data = data.replace( //s/g, '' );//去除’’                             var msg:String =" ";               var jd:Object = new Object;               var parseError:JSONParseError = null;               try               {               jd = JSON.decode(data);//将data从json转换到object                             }               catch ( e:JSONParseError )//转换失败则到错误提示界面              {                currentState = "Warn";//见必杀技三   flex 的state                return ;               }              finally              {                }             switch(jd["action"])//按action进行逻辑处理，简化逻辑处理            {              …………………………..              }    }

 

必杀技二   joomla!服务器端程序架构

为程序文件结构如下，

/component/com_ajax/ajax.php

Ajax.php程序如下

<?php defined('_JEXEC') or die(); $session =& JFactory::getSession(); $instance=$session->get('user'); $uid=$instance->id; if(!$uid) {   $json["auth_msg"]="2";//"先登陆再操作";   } else { if($_GET['action'])//得到需要调用的功能 {             $json=call_user_func($_GET['action'],$_GET);//调用功能             $json["action"]=$_GET['action']; } else {              $json["auth_msg"]="1";//未指定操作类型!"; } } function getBoxCount() { return array("box"=>2); } echo json_encode($json); exit;

上面程序根据get传来的action参数来调用相应功能函数。执行后，将返值用json进行encode返回给flex程序。另外说一句，为了最大兼容性，最好将程序状态以代码方式返回。如$json["auth_msg"]就赋予数字代码。

必杀技三   flex 的state

Flex游戏里有很多不同的场景更换，结果flex很体贴的提供了state方式来解决。就好像前面提到的“游戏分为开始，游戏，结束三个场景”，在flex里就可以设置，start,game,end三个state。另外可以给警告提示信息单独一个state,叫Warn。

如果要切换到某个状态，只要在as里写上

currentState = "xxx";//start,game,end,Warn都可以

Flex就自动切到那个场景去了。比如上面进行json解码时，错误处理就是一发现解码异常，就切到Warn。

catch ( e:JSONParseError )//转换失败则到错误提示界面              {                currentState = "Warn";//见必杀技三   flex 的state                return ;               }

 

必杀技四   flex初级动态效果

游戏里宝箱有两个状态，一个是宝箱没有击中前的状态，一个是中奖后的金光四射的状态。本游戏采用mx button组件来做为箱子。Mx代码如下：

<mx:Button id="btn0"   styleName="myCloseBox" x="185" y="271"/>

myCustomButton对箱体被鼠标点开前的样式定义，比如鼠标移动到箱体上，箱子还可以变得好像被打开一条缝的样子。其他的效果不多讲，同学们可以自由发挥下 ，比如鼠标点下瞬间，箱子会变成什么样。

<mx:Style>                                    overSkin:Embed(source="../assets/over.png");                        upSkin:Embed(source="../assets/up.png");                        downSkin:Embed(source="../assets/down.png");                 } </mx:Style>

聪明的同学，肯定会想到中奖后，箱子的状态再定义一种样式就可以了，绝对正确。

这种样式定义为 myAwardBox。

在中奖的事件中，只要进行以下操作就能将箱子变为中奖状态。

btn0.styleName="myAwardBox";

Todo

以上介绍的都是以最基础的可视化组件方式来制作flex小游戏。由于游戏本身是单位的项目，完整代码不能提供，本文对其中重要之处都作了介绍，其余的同学们应该稍微研究下就能搞定。望见谅。

其实无论是何种界面程序编制到后来，都会走上MVC架构的道路。建议有心深造的同学们对pureMVC多研究下，毕竟基于flex组件界面代码混杂as逻辑代码的程序在修改和扩展上都有问题。

当然，作复杂点的游戏应该在游戏引擎上来开展，引擎能提供更多的功能支持。如稍微有点人工智能的事情用if来做迟早是会把人给绕死的，还有图形管理，物理效果计算支持，用引擎能减少很多负担的。至于在服务端，采用http也只是一种权且之计，毕竟用socket比用http要轻得多，服务端最后也要走上用c++或java编制的socket服务端之路。