基于开源的移动web开发平台，半小时移植Flash游戏到Android上

feng_root 2011-10-31 02:44:25

国内的移动Web开发平台Rexsee开源了，使用Web开发模式就可以实现Android移动应用。社区可以查看全部的扩展API说明与开发源码。http://www.rexsee.com

学习了一篇入门教程，介绍如何将Flash游戏移植到Android手机上，并可以通过虚拟键盘或者方向传感器解决操控问题。所有代码是用HTML和JS写的，包括全部HTML，总共只有100多行。步骤如下：

1. 准备键盘图片，这里用到了6个键，左、右、空格（跳跃）、退出、消息和Rexsee市场键，Rexsee提供了几套现成的键可以下载。将键的图片放到asset/keyboard/default/文件夹中，这样用"keyboard/default"来指定theme参数即可，否则要用放图片的文件夹的完整路径（本地SD卡或网络地址均可）来制定theme参数。文件名就是键值，后缀名是.png
2. 将美羊羊卡丁车的swf文件放在asset/文件夹中
3. 将横幅图片（这里是banner.png）和启动按钮图片（这里是startNow.png）放在asset/文件夹中
4. 当然还有图标要放在res中，还要将string.xml中的首页地址设为file:///android_asset/index.html。这是唯一的一个程序文件，100多行。
5. 这是离线版的，所以要下载Rexsee的JAR包，自己用Eclipse编译，如果嫌麻烦，可以在线编译一个首页地址指向服务器某个网页地址，然后将下面的index.html的代码放在这个文件中（有些路径要改，比如图片什么的），如果也想离线玩，可以在首次载入后将swf文件和图片自己或者用rexseeClient下载到本地。当然也可以不下载，就在线玩。

先看一下res/values/string.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="app_name">美羊羊卡丁车</string>

<string name="app_home">file:///android_asset/index.html</string>

<string name="rexsee_home">http://www.rexsee.com/flash/index.php</string>

</resources>

在看一下AndroidManifest.xml



<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="MeiYangYangKaDingChe.rexsee" android:versionCode="1" android:versionName="1.0">

<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:anyDensity="true" />

<application android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar">

<activity android:name="rexsee.activity.RexseeActivity" android:configChanges="orientation|keyboardHidden" android:launchMode="singleTop">

<intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter>



</activity>

</application>

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

</manifest>

最后是asset/index.html源的代码



1:	<HTML>

2:	<HEAD>

3:	 <TITLE>美羊羊卡丁车</TITLE>

4:	 <META http-equiv=Content-Type content=text/html charset=GB2312> 

5:	 <META http-equiv=Expires content=0>

6:	 <META http-equiv=Cache-Control content=no-cache>

7:	 <META http-equiv=Pragma content=no-cache>

8:	 <SCRIPT type=text/javascript>

9:	

10:	 function startFlashGame(para){

11:	 //开始Flash游戏

12:	 rexseeScreen.setScreenOrientation(para.orientation); //将屏幕方向设为水平

13:	 if ( para.sensor ) {

14:	 rexseeOrientation.setRate('fastest'); //将传感器敏感程度设为最高

15:	 rexseeOrientation.start(); //启动传感器

16:	 } else {

17:	 rexseeOrientation.setRate('normal'); //将传感器敏感程度设为正常

18:	 rexseeOrientation.stop(); //停止传感器

19:	 }

20:	 rexseeFlash.clearKeyboard(); //清空键盘

21:	 if ( para.leftKeyboard ) rexseeFlash.setLeftKeyboard(para.leftKeys,para.leftKeyTheme,para.leftKeyboardStyle,para.leftKeyRowStyle,para.leftKeyStyle,para.leftKeyPressedStyle); //设置左键盘

22:	 if ( para.rightKeyboard ) rexseeFlash.setRightKeyboard(para.rightKeys,para.rightKeyTheme,para.rightKeyboardStyle,para.rightKeyRowStyle,para.rightKeyStyle,para.rightKeyPressedStyle); //设置右键盘

23:	 rexseeFlash.setSwfStyle(para.swfStyle); //设置Flash游戏区域的样式

24:	 rexseeFlash.show(para.swf,para.dialogStyle); //设置对话框样式并启动对话框

25:	 }

26:	 var paraKeyboardVersion = {

27:	 orientation: "landscape", //屏幕方向

28:	 sensor: false, //是否启用方向传感器

29:	 //设置左边键盘

30:	 leftKeyboard: false, //是否启用左键盘

31:	 leftKeys: "", //左键盘的按键，数字序列，同一行按键使用逗号分隔，不同行使用分号分隔，Rexsee自定义按键包括-2,-3,-4,-5，其余按键请参考http://developer.android.com/reference/android/view/KeyEvent.html

32:	 leftKeyTheme: "", //左键盘的样式，字符串，应在asset目录下创建以该字符串命名的文件夹，然后将按键图片（键值.png）放在该文件夹

33:	 leftKeyboardStyle: "", //左键盘的样式

34:	 leftKeyRowStyle: "", //左键盘中每一行的样式

35:	 leftKeyStyle: "", //左键盘中每个按键的样式

36:	 leftKeyPressedStyle: "", //左键盘中每个按键被按下时的样式

37:	 //设置右边键盘，参看上面左键盘说明

38:	 rightKeyboard: true,

39:	 rightKeys: "-1,-5;-2,62;21,22",

40:	 rightKeyTheme: "keyboard/default",

41:	 rightKeyboardStyle: "border-left-width:5px;border-left-color:#aaaaaa+#000000/2;background-color:#000000;",

42:	 rightKeyRowStyle: "",

43:	 rightKeyStyle: "",

44:	 rightKeyPressedStyle: "",

45:	 //设置Flash区域的样式

46:	 swfStyle: "",

47:	 //设置对话框的样式

48:	 dialogStyle: "",

49:	 //设置Flash游戏的地址

50:	 swf: "game.swf"

51:	 };

52:	 var paraSensorVersion = {

53:	 orientation: "landscape",

54:	 sensor: true,

55:	 leftKeyboard: false,

56:	 leftKeys: "",

57:	 leftKeyTheme: "",

58:	 leftKeyboardStyle: "",

59:	 leftKeyRowStyle: "",

60:	 leftKeyStyle: "",

61:	 leftKeyPressedStyle: "",

62:	 rightKeyboard: true,

63:	 rightKeys: "-1;-5;-2;62",

64:	 rightKeyTheme: "keyboard/default",

65:	 rightKeyboardStyle: "border-left-width:5px;border-left-color:#aaaaaa+#000000/2;background-color:#000000;",

66:	 rightKeyRowStyle: "",

67:	 rightKeyStyle: "",

68:	 rightKeyPressedStyle: "",

69:	 swfStyle: "",

70:	 dialogStyle: "",

71:	 swf: "game.swf"

72:	 };

73:	

74:	 window.onRexseeReady = function(){

75:	 //在页面装载完毕时运行

76:	 if ( rexseeBuild.getSdk()<8) {

77:	 alert("对不起，您的手机软件版本太低，不能运行该游戏，请使用Android2.2以上版本运行该游。");

78:	 rexseeApplication.quit();

79:	 }

80:	 if (!rexseeFlash.isReady()){

81:	 rexseeDialog.confirm("Adobe Flash Player", "Adobe Flash Player没有安装，无法运行该游戏。是否现在安装？","现在安装","退出程序","javascript:rexseeBrowser.open('http://www.rexsee.com/flash/flashplayer/download.php');rexseeApplication.exit();","javascript:rexseeApplication.exit();");

82:	 }

83:	 rexseeScreen.setScreenAlwaysOn(true); //总是点亮屏幕

84:	 rexseeScreen.setScreenOrientation('portrait'); //将将屏幕方向设为垂直

85:	 rexseeStatusBar.setStyle("visibility:hidden;"); //隐藏状态栏

86:	 }

87:	 window.onAjaxReturned = function(ajaxUrl,response){

88:	 response = unescape(response);

89:	 if ( ajaxUrl == headerUrl) document.getElementById("header").innerHTML = response;

90:	 else if ( ajaxUrl == footerUrl) document.getElementById("footer").innerHTML = response;

91:	 else if ( ajaxUrl == jsUrl) eval(response);

92:	 }

93:	 window.onFlashDialogDismissed = function(){

94:	 //在退出Flash游戏返页面时运行

95:	 rexseeScreen.setScreenOrientation('portrait'); //将屏幕方向设为垂直

96:	 }

97:	 window.onbeforeunload = function(){

98:	 //在退出页面时运行

99:	 rexseeScreen.setScreenOrientation('auto'); //将屏幕方向设为自动

100:	 rexseeOrientation.stop(); //停止方向传感器

101:	 }

102:	

103:	 var version = "";

104:	 //Rexsee新增按键的回调函数

105:	 window.onKeyboardHelpPressed = function(){

106:	 //对应键值：-2

107:	 if ( version == "keyboard" ) alert("左右键向左或向右，空格键跳跃。");

108:	 else if ( version == "sensor" ) alert("左右倾斜手机向左或向右，虚拟键盘的空格键跳跃。");

109:	 }

110:	 window.onKeyboardQaPressed = function(){

111:	 //对应键值：-3

112:	 alert("QA pressed.");

113:	 }

114:	 window.onKeyboardHomePressed = function(){

115:	 //对应键值：-4

116:	 if ( window.confirm("要退出游戏吗？") ) {

117:	 rexseeFlash.hide();

118:	 rexseeApplication.quit();

119:	 }

120:	 }

121:	 window.onKeyboardCancelPressed = function(){

122:	 //对应键值：-5

123:	 if ( window.confirm("要退出游戏吗？") ) {

124:	 rexseeFlash.hide();

125:	 }

126:	 }

127:	

128:	 window.onOrientationChanged = function(){

129:	 //如果启用方向传感器，在回调函数中向Flash游戏发送键值

130:	 var x = Math.round(rexseeOrientation.getLastKnownX());

131:	 var y = Math.round(rexseeOrientation.getLastKnownY());

132:	 var z = Math.round(rexseeOrientation.getLastKnownZ());

133:	 if ( y > 10 ) {

134:	 rexseeFlash.keyDown(21);

135:	 } else if ( y<-10){

136:	 rexseeFlash.keyDown(22);

137:	 } else {

138:	 rexseeFlash.keyUp(21);

139:	 rexseeFlash.keyUp(22);

140:	 }

141:	 }

142:	 </SCRIPT>

143:	 <STYLE>

144:	 body { margin:0px; background-color:#eeeeee;}

145:	 .imageButton { width:100px;height:100px; border:none; margin: 0 0 0 10; }

146:	 .section {border:1px solid;border-color:#f7f7f7 #7f9db5 #7f9db5 #f7f7f7;background-color:#ffffff;padding:15px;}

147:	 .gameTitle { font-size:24px;font-weight:bold; color:#F01D17;margin:15 0 15 0;}

148:	 .gameIntro {}

149:	 .gameVersion { font-size:20px;font-weight:bold; color:#F01D17;margin:10 0 15 0;}

150:	 .gameGuide { margin: 0 0 10 0; }

151:	 #copyright {background-color:#444444;padding:5px;color:white;font-size:10px;}

152:	 </STYLE>

153:	</HEAD>

154:	<BODY>

155:	<a href="http://www.rexsee.com/flash/index.php"><img src='banner.png' width=100% border=0></a>

156:	

157:	<div class=section>

158:	 <div class=gameTitle>美羊羊卡丁车</div>

159:	 <div class=gameIntro>

160:	 可爱的美羊羊是赛车高手哦，来体验下美羊羊马路杀手的感觉吧，美羊羊开车的速度可是会越来越快哦，小心呀！

161:	 <br><br>游戏目标：帮助美羊羊躲避路障，安全抵达终点。

162:	 <br> 

163:	 </div>

164:	</div>

165:	<div class=section>

166:	 <table width=100%><tr>

167:	 <td valign=top>

168:	 <div class=gameVersion>虚拟键盘版</div>

169:	 <div class=gameGuide>左右键向左或向右，空格键跳跃。</div>

170:	 </td>

171:	 <td><img src="startNow.png" onclick="version='keyboard';startFlashGame(paraKeyboardVersion);" class=imageButton></td>

172:	 </tr></table>

173:	</div>

174:	<div class=section>

175:	 <table width=100%><tr>

176:	 <td valign=top>

177:	 <div class=gameVersion>重力感应版</div>

178:	 <div class=gameGuide>左右倾斜手机向左或向右，虚拟键盘的空格键跳跃。</div>

179:	 </td>

180:	 <td><img src="startNow.png" onclick="version='sensor';startFlashGame(paraSensorVersion);" class=imageButton></td>

181:	 </tr></table>

182:	</div>

183:	</BODY>

184:	</HTML>