Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the example analysis of HTML5 developing Android localization App. Many people may not understand it very well. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

First of all, let's develop a game similar to right-to-touch. The game interface is as follows.

Game controls: move the screen up and down, left and right, to operate the gems moving in different directions.

Rules of the game: when there are three identical gems adjacent to each other, the gems that have been eliminated once will become translucent, and when all gems are eliminated once, they will move on to the next level.

Game test connection: http://lufylegend.com/demo/GemGem

Production begins

One, prepare.

First, you need to download the lufylegend.js engine at http://lufylegend.com/lufylegend

Second, game development

The LLoadManage static class is extended in the engine lufylegend1.7.0, which can read pictures, js files and text files. This game developer will try this new feature. First, take a look at the following array:

Var loadData = [{path: ".. / jquery.js", type: "js"}, {path: ". / js/share.js", type: "js"}, {path: ". / js/Social.js", type: "js"}, {path: ". / js/GameRanking.js", type: "js"}, {path: ". / js/GameLogo.js", type: "js"}, {path: ". / js/GameClear.js" Type: "js"}, {path: ". / js/Gem.js", type: "js"}, {path: ". / js/Stage.js", type: "js"}, {path: ". / js/Clock.js", type: "js"}, {path: ". / js/Point.js", type: "js"}, {path: ". / js/GetPoint.js", type: "js"}, {path: ". / js/Bullet.js" Type: "js"}, {path: ". / js/Event.js", type: "js"}, {path: ". / js/function.js", type: "js"}, {path: ". / js/GameBody.js", type: "js"}, {name: "num.+", path: ". / images/plus.png"}, {name: "num.0", path: ". / images/0.png"}, {name: "num.1" Path: ". / images/1.png"}, {name: "num.2", path: ". / images/2.png"}, {name: "num.3", path: ". / images/3.png"}, {name: "num.4", path: ". / images/4.png"}, {name: "num.5", path: ". / images/5.png"}, {name: "num.6" Path: ". / images/6.png"}, {name: "num.7", path: ". / images/7.png"}, {name: "num.8", path: ". / images/8.png"}, {name: "num.9", path: ". / images/9.png"}, {name: "back", path: ". / images/back.png"}, {name: "line", path: ". / images/line.png"} {name: "clear", path: ". / images/clear.png"}, {name: "gem01", path: ". / images/gem01.png"}, {name: "gem02", path: ". / images/gem02.png"}, {name: "gem03", path: ". / images/gem03.png"}, {name: "gem04", path: ". / images/gem04.png"}, {name: "gem05", path: ". / images/gem05.png"} {name: "gem06", path: ". / images/gem06.png"}, {name: "gem07", path: ". / images/gem07.png"}, {name: "gem08", path: ". / images/gem08.png"}, {name: "gem09", path: ". / images/gem09.png"}, {name: "ico_sina", path: ". / images/ico_sina.gif"}, {name: "ico_qq" Path: ". / images/ico_qq.gif"}, {name: "ico_facebook", path: ". / images/ico_facebook.png"}, {name: "ico_twitter", path: ". / images/ico_twitter.png"}]

Add the required js files and picture files to the array. If you need to load a js file, you need to specify type as js. If the loaded file is a picture, type can not be set.

The reading process is exactly the same as before:

Function main () {loadingLayer = new LoadingSample3 (); addChild (loadingLayer); LLoadManage.load (loadData, function (progress) {loadingLayer.setProgress (progress);}, function (result) {LGlobal.setDebug (true); datalist = result; removeChild (loadingLayer); loadingLayer = null GameInit ();})

Let's add 8 rows and 8 columns of 64 gems to the game, as follows:

Function addGem () {stage.setStage (stage.num + 1); gemLayer.removeAllChild (); list = []; / / add gems for (iDeposit I > 0) + 1; g = new Gem (num); g.x = jargon 60; g.y = iPrefect120; gemLayer.addChild (g) List [I] .push (g);}} / / the gem can be eliminated by do {clearList = checkClear (); if (clearList.length > 0) {for (iS0 > 0) + 1; g.change (num) } while (clearList.length > 0);}

The Gem object in the above code is a gem class. The complete code is as follows:

Function Gem (num) {var self = this; base (self,LSprite, []); self.num = num; self.bitmap = new LBitmap (new LBitmapData (datalist ["gem0" + num])); self.bitmap.x=self.bitmap.y=10; self.addChild (self.bitmap);} Gem.prototype.change = function (num) {var self = this; self.num = num Self.bitmap.bitmapData = new LBitmapData (datalist ["gem0" + num]);}

The Gem class inherits from LSprite and contains a LBitmap object inside to display the gem image.

The checkClear function is called in listing 3 to check for removable gems by doing a horizontal search followed by a vertical search.

ClearList = []; / / horizontal search for; mouse_down_obj.isMouseDown = true; list [mouse _ down_obj.cy] [mouse_down_obj.cx] .graphics.drawRect (1, "black", [0,0,60,60], true, "# 000000");}

Click position is obtained by e.offsetX and e.offsetY, and click time is obtained by getTime ().

Let's take a look at the onUp function.

Function onUp (e) {list [mouse _ down_obj.cy] [mouse_down_obj.cx] .graphics.clear (); if (new Date (). GetTime ()-mouse_down_obj.time > 500) {mouse_down_obj.isMouseDown = false; return;} var mx = e.offsetX-mouse_down_obj.x; var my = e.offsetY-mouse_down_obj.y If (Math.abs (mx) > Math.abs (my)) {if (mx > 50) {move ("right"); return;} else if (mx)

< -50){ move("left"); return; } }else{ if(my >

50) {move ("down"); return;} else if (my

< -50){ move("up"); return; } } mouse_down_obj.isMouseDown = false; } 函数中通过同样的方法得到点击结束时的位置和时间，然后与点击时刻做比较，最后计算划动的方向，然后根据划动的方向来调用move函数，让宝石移动。 move函数如下： function move(dir){ direction = dir; var m = moveGem(dir,8); var mx = m[0],my = m[1]; var obj,fun; for(var i=0;i>

0); if (maxTime

< time)maxTime = time; fun = null; if(gem.x >

) {fun = function (gem) {if (gem.x 0); if (maxTime)

< time)maxTime = time; fun = null; if(gem.x < 0){ fun = function(gem){ if(gem.x >

= 0) gem.visible = true }} LTweenLite.to (gem,time, {x:mx, onUpdate:fun, onComplete:fun) Ease:Strong.easeOut}) } break; case "up": for (iSuppli > > 0); if (maxTime)

< time)maxTime = time; fun = null; if(gem.y >

) {fun = function (gem) {if (gem.y 0); if (maxTime)

< time)maxTime = time; fun = null; if(gem.y < 120){ fun = function(gem){ if(gem.y >

) gem.visible = true }} LTweenLite.to (gem,time, {y:my, onUpdate:fun, onComplete:fun) Ease:Strong.easeOut}) Break;} LTweenLite.to ({}, maxTime*1.5, {onComplete:checkStageClear, ease:Strong.easeOut});}

Of course, there is a time limit to the game, see the following Clock class:

Function Clock () {var self = this; base (self,LSprite, []); self.timer = 0; self.addTimer = 0.05; self.graphics.drawArc (5, "# 333333", [0meme 70pi]);} Clock.prototype.onframe = function () {var self = this; self.timer + = self.addTimer; self.graphics.clear () Self.graphics.drawArc (10, "# 333333", [0pje 0pje 70je 0pl 2mpl. Pi]); self.graphics.drawArc (5, "# ffffff"); [0pje 0pr 70pr Math.pique 0.5];

First of all, load Clock into the game, and then use the ENTER_FRAME timeline event to call Clock's onframe to draw arcs constantly. When the value of timer is greater than or equal to 360, it means that the entire arc has been drawn, then the game is over.

After introducing the main principles of the game, let's take a look at how to turn the game into a local App.

Third, release localized App

First, create a new Android Project with Eclipse

Note: how to build the Android environment, I will not say, there are many online tutorials, just Baidu.

Then, fill in the project name and select the corresponding sdk version. Here I chose 2.2.

The next step is to fill in the corresponding data, which is fine with your own mood.

Then, the key point is that under the assets folder under the project, create a www folder for your resume (name yourself at will), and then copy the game you just developed to this folder, and of course, the lufylegend engine must also copy it.

Then modify the res/layout/main.xml file and add webView, as follows:

Finally, modify the Main.java file to display the html web page using webView, as follows:

Public class Main extends Activity {/ * * Called when the activity is first created. * / @ Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.main); WebView webview = (WebView) findViewById (R.id.webView1); webview.getSettings () .setJavaScriptEnabled (true); webview.setVerticalScrollbarOverlay (true); webview.loadUrl ("file:///android_asset/www/index.html");}})

All right, let's run the program. The picture is as follows:

Finally, if you want to publish the game as an .apk file, build will be fine.

It's over, isn't it?

After reading the above, do you have any further understanding of the example analysis of HTML5 developing Android localization App? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.