半个小时移植Flash游戏到Android平台

网上有很多现成的Flash游戏，一直想在手机上玩，虽说Android2.2支持Flash，但是大多数游戏需要键盘控制，最多的就是方向键，而手机大多数没有键盘（有键盘的好像也不行），所以实际上就没办法玩了。

现在Rexsee提供了一个很简单的解决方案，可以迅速将Flash游戏移植到Android手机上（2.2以上）。（目前Rexsee已经开源，在社区可以查看全部的开发手册、API说明与源码，  www.rexsee.com ） 

下面是一个例子，把经典的美羊羊卡丁车移植到了手机上，而且有两个版本，一个用虚拟键盘，一个用方向传感器。

所有代码是用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

 "1.0" encoding="utf-8"?>

 "app_name">美羊羊卡丁车
 "app_home">file:///android_asset/index.html
 "rexsee_home">http://www.rexsee.com/flash/index.php

 

再看一下AndroidManifest.xml

 "1.0" encoding="utf-8"?>
 "http://schemas.android.com/apk/res/android" package="MeiYangYangKaDingChe.rexsee" android:versionCode="1" android:versionName="1.0">
 "true" android:normalScreens="true" android:smallScreens="true" android:anyDensity="true" />
 "@drawable/icon" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar">
 "rexsee.activity.RexseeActivity" android:configChanges="orientation|keyboardHidden" android:launchMode="singleTop">
 "android.intent.action.MAIN" />"android.intent.category.LAUNCHER" />



 "android.permission.INTERNET"/>
 "android.permission.ACCESS_NETWORK_STATE"/>

 

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

 1:
 2:
 3:      美羊羊卡丁车
 4:
 5:      0>
 6:
 7:
 8:
 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:
 143:          </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">144</span><span style="color:#000000;">:            body { margin:0px; background-color:#eeeeee;}  </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">145</span><span style="color:#000000;">:            .imageButton { width:100px;height:100px; border:none; margin: </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">10</span><span style="color:#000000;">; }  </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">146</span><span style="color:#000000;">:            .section {border:1px solid;border-color:#f7f7f7 #7f9db5 #7f9db5 #f7f7f7;background-color:#ffffff;padding:15px;}  </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">147</span><span style="color:#000000;">:            .gameTitle { font-size:24px;font-weight:bold; color:#F01D17;margin:</span><span class="number" style="color:rgb(192,0,0);">15</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">15</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;">;}  </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">148</span><span style="color:#000000;">:            .gameIntro {}  </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">149</span><span style="color:#000000;">:            .gameVersion { font-size:20px;font-weight:bold; color:#F01D17;margin:</span><span class="number" style="color:rgb(192,0,0);">10</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">15</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;">;}  </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">150</span><span style="color:#000000;">:            .gameGuide { margin: </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">10</span><span style="color:#000000;"> </span><span class="number" style="color:rgb(192,0,0);">0</span><span style="color:#000000;">; }  </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">151</span><span style="color:#000000;">:            #copyright {background-color:#</span><span class="number" style="color:rgb(192,0,0);">444444</span><span style="color:#000000;">;padding:5px;color:white;font-size:10px;}  </span></span></li> 
     <li style="font-size:1em;margin-left:38px;border-left-width:1px;border-left-style:solid;border-left-color:rgb(209,215,220);line-height:18px;"> <span style="color:#000000;"><span class="number" style="color:rgb(192,0,0);">152</span><span style="color:#000000;">:
 153:
 154:
 155:    "http://www.rexsee.com/flash/index.php">'banner.png' width=100% border=0>
 156:
 157:    class=section>
 158:        class=gameTitle>美羊羊卡丁车

  

159:        class=gameIntro>  

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

161:            

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

162:            
   

163:        

  

164:    

  

165:    class=section>  

166:        100%>  

167:              

168:                class=gameVersion>虚拟键盘版

  

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

  

170:              

171:            "startNow.png" οnclick="version='keyboard';startFlashGame(paraKeyboardVersion);" class=imageButton>  

172:          

173:    

  

174:    class=section>  

175:        100%>  

176:              

177:                class=gameVersion>重力感应版