Keep Screens From Moving When Using D-Pad In Game Like Snake!? How?

I was playing the snake game and I am trying to figure out how the screens are locked while using the D-Pad.

In my game if I move with the d-pad it pans the screen and bounces back using the :

<meta name='viewport'content='width=320'content='height=212'/><style>

I'm tried different variations any help would be great, it's the only thing holding me back.

owe credit to http://www.3dscade.com/

i would have figured it out eventually anyway, like i did with the 3ds touch screen to respond in .1 seconds instead of 2 whole seconds, but basically when you press up/down/left/right on a 3ds when multiple input fields are on the screen at one time such as a textarea or even a url, the 3ds will give it focus. but if you press the b button, focus goes away. you can do this forever and the 3ds will never scroll anywhere.

in short, 3dscade covers the entire top and bottom screen with a url, so when you press any direction the 3ds is force to automatically give the url focus becuz its everywhere. but, when the url does get focus, it will take the focus off. this can be done with "onfocus='this.blur()'

doing this prevents the 3ds from scrolling anywhere with the d-pad as long as the focus element (the url in this example) is within range.

if that makes sense. i havent used this technique yet but thats becuz i didnt figure it out until very recently, like a week ago. but using this means you can easily use the top and bottom screens of the 3ds browser for 3ds browser games.

Great! I'm in the middle of working out a 3ds browser game (getting use to the setup first).

The resolutions are pretty confusing considering there are so many options to resize with.

I'm trying to format a good layout for my screens but am having a hard time lining them up.It seems like everyone uses different resolutions.

TMJ tech demo 9 is one screen at
306x214

Maze
300x224

Nekos
300x214 (I'm a fan of 320x212 don't ask why though)

Tumbler(car one)
420x482 @ 2 Screens though

and I believe platypus Platformer was
385x432

So would my "Window" resolution of 400x480

Top 400x220(240?)
Bottem= 320x240

Yeah, gotta love chrome, I've been staring at code for the last three days and have a lot of progress exploring the potential of a HTML5/CSS/JS Game.

I really appreciate the reply, I'm going to pass out let me know if you have any suggestions, this way I'd have a tech template for future games (as far as resolution).

Sorry for the double post but I just wanted to link to some interesting stuff.


Window binding (still moves too much for me which is why I was asking, but doable for a sidescroller perhaps)

http://surii.net/hack/windowtrap.html

http://www.viewlike.us/index.php
Good for testing web page res's.


http://www.3dscade.com/snake/index.html
I tried to base my layout like Snakes but it failed hard lol, well not horrible for 3 days of actually doing anything.

Do you think he's using the absolute to keep it?


#container { position: absolute; background-color: black; top: 0px; left: 0px; width: 400px; height: 480px; }
#topscreen { position: absolute; background-color: white; top: 0px; left: 0px; width: 400px; height: 240px; overflow: hidden; }
#bottomscreen { position: absolute; background: white url(logo.png) no-repeat 20px 50px; top: 240px; left: 40px; width: 320px; height: 240px; overflow: hidden; }

ive doing learning stuff for 2 years now. i really dont need any help for 3ds browser games unless it really really seems good like using the x and y buttons at a fast rate or preventing the L button from going back. but anyway, this url is only temporary and might be removed in a week or less but use this for the background image (and by that i mean dont use the url from my website but copy/paste it to yours):

http://painitegames.com/games/3/castankle/bg.png


thats the 3ds browser screen perfectly. you dont need anything else other than setting that in the background to make positioning this easier, and using this:

<meta name='viewport'content='width=400'/><style>body{width:400px;height:427px;}</style>


and just so you know, if your going to use this above, the bottom screen will start at top:215px;left:40px;

Thanks so much, didn't mean to say you needed help :P

Just figured the link for res's would be good for most mobile gaming development design and layout.

Awesommmmmmmmmme now im going to go play around with it!

let me know if you make any games.

I'm working on one right now, It's holding back my design mainly because I'm doing a top down shooter.

I haven't figured a way to implement the onFocus to success yet.

JS/CSS/Canvas is still new to me, but I'm catching on pretty quick.

Was thinking of doing a top screen for gameplay and for added controls simulate button functions on the touch screen or make that a inventory/options menu at least as in that snake game that is driving me mad. LOL

I just can't get the up and down to register as something other than pan up pan down, so OnFocus will be my saving grace when I work it out. That and I'm playing around with anchors/absolute position variables. (excuse my ignorance of such said things)I'm just happy to have a tech demo down in the last 2 weeks considering my lack of knowledge.

well just so you know if i didnt mention it before, if you want the top and bottom screen with no scrolling like 3dscade, things like a regular a href='' URL will not get focus like it regularly does.

also this by itself will prevent scrolling and fix the screen size:

<meta name='viewport'content='width=400'/> <div style='position:absolute;top:0;left:0;width:400px;height:427px' tabindex='0' onfocus='this.blur()'></div>

also tabindex='0' makes any html tag become focus-able. thats why this works using a div.