Gaming 3DS web browser tricks

[ryanttb]

input

With the help of a hidden, focused input (see sounds) we can get various levels of input based on the type of game screen you create. Here are the terms I've been using:

tiny
Only the bottom screen. Full D-Pad support as well as B and A buttons and single-tap on the touch screen.

skinny
Both screens, top screen is not in wide mode. D-Pad Left, Right and Down are fine. B & A and single-tap are as well. D-Pad Up bounces the screen.

tbone
Both screens, top screen is wide. D-Pad Down is ok. B & A and single-tap are as well. D-Pad Left, Right and Up bounce the screen. Left & Right are hard to recover from.

sounds

done
Make the download complete sound at any time. I'm calling it the "done" sound. It involves creating and then destroying an empty iframe. Here's the (updated) code (using jQuery, but could be done without it):

CODEÂÂ
ÂÂÂÂ$(function () {
ÂÂÂÂÂÂ$(document).keydown(function (e) {
ÂÂÂÂÂÂÂÂif (e.which == 13) {
ÂÂÂÂÂÂÂÂÂÂ$('').appendTo("body").remove();
ÂÂÂÂÂÂÂÂ}
ÂÂÂÂÂÂ});
ÂÂÂÂ});
ÂÂ

cancel & ok
If you drop some HTML like the following:

CODE

and give the input focus you get both B and A button sounds when the player presses the buttons (though after each B button sound you have to reset the focus). I can't get these sounds to happen without player interaction.

move
If you keep focus on an input type=number surrounded on all sides by other inputs via either list items or a table, the D-Pad will make a new sound that I'm calling "move". Again, I can't make this sound without player interaction.

more

Get more info on my test site (new link as of 2011-09-28) http://surii.net/hack/

-ryanttb

 

[Slyakin]

Wow, your site is really interesting! Thanks for programming all of this!

By the way, what is a "Touch Trap"?

 

[ryanttb]

If you touch and hold your stylus to the touch screen, the browser pops up a horrible "To select text," popup. The popup is not part of the DOM and takes up 90% of the top screen. It doesn't go away until you let go of the touch screen. While it's up, I get mouse events but can't see the top screen. I can't get rid of it. Might be ok for games using my "tiny" css class because those games won't use the top screen at all.

(I can actually make it go away by firing an alert() but then I don't get any more mouse events and the top popup is replaced by a popup on the bottom)

 

[ryanttb]

I just changed my "done" sound example to use the following embed instead:

CODE$('').appendTo("body").remove();

My thought was that the data URI wouldn't cause the browser to attempt a new request to the web server. Chrome's dev tools claim this works the exact same way as before network-wise but I feel better about it like this.

 

[ryanttb]

I missed the closing body tag. However, a completely empty iframe appears to have the same effect, so for completeness:

CODEÂÂ
ÂÂÂÂ$(function () {
ÂÂÂÂÂÂ$(document).keydown(function (e) {
ÂÂÂÂÂÂÂÂif (e.which == 13) {
ÂÂÂÂÂÂÂÂÂÂ$('').appendTo("body").remove();
ÂÂÂÂÂÂÂÂ}
ÂÂÂÂÂÂ});
ÂÂÂÂ});
ÂÂ

 

[KingVamp]

Well interesting and cool. I'm going to follow this thread.

Name change?

 

[ryanttb]

Well interesting and cool. I'm going to follow this thread.

Name change?

I would like to. It says click and hold to edit the title but I've tried that in three browsers to no avail. Maybe a mod can change the topic title to "3DS browser tricks" or something for me?

 

[Zorua]

Well interesting and cool. I'm going to follow this thread.

Name change?

I would like to. It says click and hold to edit the title but I've tried that in three browsers to no avail. Maybe a mod can change the topic title to "3DS browser tricks" or something for me?

Normal members can't change titles.
PM a mod or report the OP.

 

[ryanttb]

Figured out how to make the D-Pad make some noise.

 

[RedJiggly]

This truly is getting more and more amazing.

After my last project, wich I cannot post on here because of Copyright Infrigement, I'll try and make a simple RPG...

Should become interesting, when we can have sounds now.

 

[Pong20302000]

any one fancy coding a 3DS section for a website?

my friend has a site and a 3DS section would be nice
it can contain whatever section the coders want

maybe squeeze in some 3DS if you can

games welcome also

 

[ryanttb]

If anyone's interested, I moved my hacks & tests page to:

http://surii.net/hack/

I've been bogged down with another, unrelated, project but hope to get back to this in October.

 

[thealeks]

sounds

done
Make the download complete sound at any time. I'm calling it the "done" sound. It involves creating and then destroying an empty iframe. Here's the (updated) code (using jQuery, but could be done without it):


CODE


$(function () {
$(document).keydown(function (e) {
if (e.which == 13) {
$('').appendTo("body").remove();
}
});
});

would you be willing to write it without jquery? i've been trying to use it but it doesnt seem compatible with my javascript code.

 

[jrk190]

I'm learning java, could I be of any use? I'm learning C next year, then html

 

[Rydian]

Java and javascript are different languages, but programming basics still apply.

 

[The Milkman]

Has this gone anywhere? It seems pretty neat and could lead to some pretty cool apps and games like with the DSi (except, you know, GOOD.)

 

[McHaggis]

I missed the closing body tag. However, a completely empty iframe appears to have the same effect, so for completeness:

$(function () {
$(document).keydown(function (e) {
if (e.which == 13) {
$('').appendTo("body").remove();
}
});
});

You can actually just shorten it to

$('').appendTo("body").remove();

JavaScript and rendering occur on the same thread, so anything you add to the document will not appear until the JavaScript finishes executing. Since you add and then immediately remove it, it's never actually drawn on the screen.

would you be willing to write it without jquery? i've been trying to use it but it doesnt seem compatible with my javascript code.

It's not too difficult to convert the code to a pure JS/DOM solution:

document.onkeydown = function (evt) {
if (evt.which === 13) {
var ifr = document.body.appendChild(document.createElement("iframe"));
document.body.removeChild(ifr);
}
}

---

 

[thealeks]

It's not too difficult to convert the code to a pure JS/DOM solution:

Awesome. Thanks i really appreciate it.

 

[The Milkman]

would you be willing to write it without jquery? i've been trying to use it but it doesnt seem compatible with my javascript code.

It
I had a look into the 3DS's browser myself, it was one of the first things I did. However, I think the setup and the lack of a lot of functionality makes it inappropriate for web-based games. Fully utilizing both screens is awkward because you can't manipulate the scroll position of the document manually, you have to rely on the location hash. IIRC, you also can't lock the scrolling so creating a robust, dual-screen website is unlikely, even with CSS media queries.

What about media that's just formated to spand to both screen and uses Javascript elements to become interactive?

 

[RedJiggly]

would you be willing to write it without jquery? i've been trying to use it but it doesnt seem compatible with my javascript code.

It
I had a look into the 3DS's browser myself, it was one of the first things I did. However, I think the setup and the lack of a lot of functionality makes it inappropriate for web-based games. Fully utilizing both screens is awkward because you can't manipulate the scroll position of the document manually, you have to rely on the location hash. IIRC, you also can't lock the scrolling so creating a robust, dual-screen website is unlikely, even with CSS media queries.

What about media that's just formated to spand to both screen and uses Javascript elements to become interactive?

Yes. Javascript and possibly HTML5, altough some DOM-based games may be faster. The main problem is that the screen-refresh rate of the 3DS is very low, so even if you run a game with 30 frames per second, the 3DS may still only show you three.

But it is possible, and especially some puzzle games or simple RPGs are able to work on the 3DS, even including Stylus control to drag stuff.