網上有很多現成的Flash遊戲,一直想在手機上玩,雖說Android2.2支持Flash,但是大多數遊戲需要鍵盤控制,最多的就是方向鍵,而手機大多數沒有鍵盤(有鍵盤的好像也不行),所以實際上就沒辦法玩了。
現在Rexsee提供了一個很簡單的解決方案,可以迅速將Flash遊戲移植到Android手機上(2.2以上)。(目前Rexsee已經開源,在社區可以查看全部的開發手冊、API說明與源碼, www.rexsee.com )
下面是一個例子,把經典的美羊羊卡丁車移植到了手機上,而且有兩個版本,一個用虛擬鍵盤,一個用方向傳感器。
下面是一個例子,把經典的美羊羊卡丁車移植到了手機上,而且有兩個版本,一個用虛擬鍵盤,一個用方向傳感器。
所有代碼是用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>
- 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" οnclick="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" οnclick="version='sensor';startFlashGame(paraSensorVersion);" class=imageButton></td>
- 181: </tr></table>
- 182: </div>
- 183: </BODY>
- 184: </HTML>
轉:http://www.oschina.net/code/snippet_194999_6812