半小时移植Flash游戏到Android上 -

tyh2011

浏览: 2188 次

最近访客更多访客>>

Yorudo

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2)

社区版块

存档分类

半小时移植Flash游戏到Android上

Android

继续研究国内的移动Web开发平台Rexsee。。

该平台已经正式开源，rexsee社区可以查看全部的扩展API说明与开发源码。。http://www.rexsee.com/

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

准备键盘图片，这里用到了6个键，左、右、空格（跳跃）、退出、消息和Rexsee市场键，Rexsee提供了几套现成的键可以下载。将键的图片放到asset/keyboard/default/文件夹中，这样用"keyboard/default"来指定theme参数即可，否则要用放图片的文件夹的完整路径（本地SD卡或网络地址均可）来制定theme参数。文件名就是键值，后缀名是.png
将美羊羊卡丁车的swf文件放在asset/文件夹中
将横幅图片（这里是banner.png）和启动按钮图片（这里是startNow.png）放在asset/文件夹中
当然还有图标要放在res中，还要将string.xml中的首页地址设为file:///android_asset/index.html。这是唯一的一个程序文件，100多行。
这是离线版的，所以要下载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>&nbsp;
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>

分享到：