Apps What might b the problem for slowdown of the game developed using html5 and javascript

[uvamsi]

Hello everyone,
I have developed an Arkanoid game in html5, javascript and using phonegap i have converted it into .apk and run that in my AVD(android virtual device) the performance of the game is very very poor. The movements of objects is very bad and also the complete canvas tag is being selecting if we touch the screen to give inputs.

What might b the reason for this prob?
What might b the solution for this prob?
How to fix this?
Are html5 games work properly in Android?

Thanks in Advance
Vamsi.

 

[hansschmucker]

First things first: Does it behave differently inside your APK than it does inside the browser? Are you sure you're doing evt.preventDefault on all, meaning touch and click, events?

About the performance..... there's simply no way to diagnose your problem without seeing your game, sorry.

 

[uvamsi]

It works very well in system browser.. where as in android phones it's performance has become poor.

Here is the link to my game.

Http://www.suryacolorlab.com/Games/Arkanoid_3D.html

just rightclick on it and u can view source.

if u need i vil send my .apk file also...

 

[hansschmucker]

I meant the Android browser: does it run differently in the Android browser than it does if hosted by your own APK?

Uhm... do you still have the JS with useful indention? It is very hard to read this way.

Aside from that there's the standard stuff:
1. You're using mouse, instead of touch events
2. Your events keep bubbling because you don't call stopPropagation & preventDefault
3. You're using setInterval.... always a bad idea, try a pseudo-recursive setTimeout
4. You're drawing everything on every frame update... try to use buffers and draw only rects that have actually changed.

 

[alostpacket]

Moved to app development forum

 

[hansschmucker]

This (the attached document: don't open it in notepad... it contains unix linebreaks) might help you... it doesn't really implement anything, but it might give you a rough idea how the skeleton, formatting and documentation of JS code should look like (of course, everybody has a different opinion on the details, but we actually agree on a lot of stuff... like indenting function bodies ) and how timeouts and events interact.

It's actually playable, but the physics are really just stubs and the graphics consist solely of differently colored rectangles.

However the buffering path (there are two additional Canvas elements) would be the same for more fancy graphics, so it's about what you can expect performance-wise. It could be made even faster since, while the structure is OK, a lot of the code isn't actually very efficient: If you've got the time try to buffer more values & minimize usage of non-field variables (so that you don't trigger the GC).

Edit: A link might be slightly more pleasant than an attachment:
Breakout

 

[uvamsi]

This (the attached document: don't open it in notepad... it contains unix linebreaks) might help you... it doesn't really implement anything, but it might give you a rough idea how the skeleton, formatting and documentation of JS code should look like (of course, everybody has a different opinion on the details, but we actually agree on a lot of stuff... like indenting function bodies ) and how timeouts and events interact.

It's actually playable, but the physics are really just stubs and the graphics consist solely of differently colored rectangles.

However the buffering path (there are two additional Canvas elements) would be the same for more fancy graphics, so it's about what you can expect performance-wise. It could be made even faster since, while the structure is OK, a lot of the code isn't actually very efficient: If you've got the time try to buffer more values & minimize usage of non-field variables (so that you don't trigger the GC).

Edit: A link might be slightly more pleasant than an attachment:
Breakout

thanks alot hansschmucker...

is there any tutorials available to achieve this...

 

[hansschmucker]

Achieve what, specifically? The source is pretty well documented, just take a look and you should be able to figure out what it's doing pretty easily (well, except the utils at the top).