半小時移植Flash遊戲到Android上 – Android移動開發技術文章_手機開發 Android移動開發教學課程

繼續研究國內的移動Web開發平臺Rexsee。。

該平臺已經正式開源，rexsee社區可以查看全部的擴展API說明與開發源碼。。https://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

Html代碼

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

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

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

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

</resources>

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

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

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

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

</resources>

在看一下AndroidManifest.xml

Xml代碼

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

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

<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>

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

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

<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源的代碼

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>

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，其餘按鍵請參考https://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('https://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="https://www.rexsee.com/flash/index.php"><img src='banner.png' width=100% border=0></a>

156:

157: <p class=section>

158: <p class=gameTitle>美羊羊卡丁車</p>

159: <p class=gameIntro>

160: 可愛的美羊羊是賽車高手哦，來體驗下美羊羊馬路殺手的感覺吧，美羊羊開車的速度可是會越來越快哦，小心呀！

161: <br><br>遊戲目標：幫助美羊羊躲避路障，安全抵達終點。

162: <br> 

163: </p>

164: </p>

165: <p class=section>

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

167: <td valign=top>

168: <p class=gameVersion>虛擬鍵盤版</p>

169: <p class=gameGuide>左右鍵向左或向右，空格鍵跳躍。</p>

170: </td>

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

172: </tr></table>

173: </p>

174: <p class=section>

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

176: <td valign=top>

177: <p class=gameVersion>重力感應版</p>

178: <p class=gameGuide>左右傾斜手機向左或向右，虛擬鍵盤的空格鍵跳躍。</p>

179: </td>

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

181: </tr></table>

182: </p>

183: </BODY>

184: </HTML>

摘自 tyh2011

發佈留言取消回覆

Related News

You may have missed

發佈留言 取消回覆

Related News

You may have missed

發佈留言取消回覆