Hello there, people of GBATemp. This is my first post here. I've been gaming for quite some time, and I bought the 3DS as soon as I had the money for it. One of the features that made the 3DS very interesting to me was the Internet Browser.
Now, finally, two(or three?) days ago nintendo released the update with the eShop and the Internet Browser in there. I started playing around with the Browser. At first I was sad that 'nintendo did such a bad job' with the browser. Since there is no sound support, no flash support, no html5 support and no java support.
but more and more I realized that this wasn't true. Nintendo's goal was to create a browser wich can be opened even while another application is opened. That is quite amazing.
Another thing I missed at first was that the browser DOES have (some) support for the Canvas element. When I realized that the browser could load Canvases, I started experimenting.
And now, I've got a list with a few games and demos wich work on Javascript and Canvas.
Even tough there is no sound, it's nice to know that you can play Space Invaders on there for free, right? <img src="style_emoticons/<#EMO_DIR#>/biggrin.gif" style="vertical-align:middle" emoid="
" border="0" alt="biggrin.gif" />
Allright, there we go. I hope I've posted this in the correct section, and that you enjoy.
~RedJiggly
<!--quoteo--><div class='quotetop'>QUOTE</div><div class='quotemain'><!--quotec--><!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Wait WHY?<!--sizec--></span><!--/sizec-->
Before we start, for everybody claiming: "Why would you want to do something like this?"
Well... let's just say that it's interesting because of the clear limitations of the browser. And also I've got too much free time on my hands.
<i><b>~RedJiggly</b></i>
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Compatibility of the 3DS Browser:</b><!--sizec--></span><!--/sizec-->
<b>Specifications:
</b>
<i>Note: These are also listed in the manual of the 3DS browser, page 12.</i>
<b>Browser Engine:
</b><ul><li>NetFront® Browser. (NX v1.0)</li></ul>
<b>Protocols:
</b><ul><li>HTTP 1.0
</li><li>HTTP 1.1
</li><li>SSLv3
</li><li>TLS 1.0</li></ul>
<b>Web Standards:
</b>
<ul><li>HTML4.01
</li><li>XHTML 1.1
</li><li>CSS1
</li><li>CSS2.1
</li><li>CSS3 (some)
</li><li>DOM levels 1-3
</li><li>ECMAScript (this is Javascript and other dialects)
</li><li>XMLHttpRequest
</li><li>the Canvas Element(To a certain extent. Is slow)</li></ul>
<b>Picture Support:
</b><ul><li>-MPO
</li><li>-GIF
</li><li>-JPEG
</li><li>-PNG
</li><li>-BMP
</li><li>-ICO</li></ul>
(tough, Some files cannot be displayed)
<b>Also interesting is that the 3DS Browser can be launched without needing to close another application.
</b>
<b>On the other hand however, there is:
</b><ul><li>-No Audio Support
</li><li>-No HTML5 Support
</li><li>-No Flash
</li><li>-No Java
</li><li>-No Other Plugin-based stuff on webpages.</li></ul>
<hr/>
Even tough the browser lacks Flash, Java and Sound, we have some Canvas and JavaScript capabilities.
This still means that we can do some interesting stuff. (Or at least, that we aren't totally crippled on the 3DS Browser)
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>3DS Browser: Buttons.
</b><!--sizec--></span><!--/sizec-->
Sadly enough, the 3DS doesn't have a keyboard. That also means: no 'onkeypress' handlers in JavaScript. However, when tapping with the stylus we can simulate a click at the point on the page you tapped on.
Also, when you hold the stylus long enough, you'll enter 'Text Copy mode'. In this mode Javascript thinks that you have the cursor down. This can also be used.
So, if you want to play some JavaScript games wich use the keyboard, you have to creat buttons or anchors on the page, and use them as input instead.
With this, I managed to create the following working games and demo's on the 3DS.
EDIT: Later, I found out that the browser DOES pass the 'keydown' events of the D-pad to the page as the arrow buttons. I didn't notice this before. It is a bit strange to play since you are moving the screen around as well while moving something in the game, but it works.
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>3DS-compatibel demo's/Games</b><!--sizec--></span><!--/sizec-->
<i>(Note: I do not own nor created these games.
The only addition I made to some was implementing on-page links so you could use the needed 'buttons' with the 3DS Stylus.)
</i>
<b>Solitaire</b> (<a href="http://digitalinsane.com/games/yetris/" target="_blank">http://digitalinsane.com/games/solitaire/</a>)
<blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesn't rely on a Canvas object, making it fast.(this game runs about full speed. only dragging cards lags a little)
This game is completely playable. I did not need to create extra links since the game doesn't need a keyboard.
</blockquote>
<b>Yetris. A Tetris Clone</b>(<a href="http://digitalinsane.com/games/yetris/" target="_blank">http://digitalinsane.com/games/yetris/</a>)
<blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesn't rely on a Canvas object, making it fast.(this game runs about full speed.)
I did not need to implement extra links for controls, since I found out that you can use the D-pad als Arrow Buttons in the browser.
</blockquote>
<b>Puzzle with Flickr Photos</b>(<a href="http://digitalinsane.com/games/puzzle/" target="_blank">http://digitalinsane.com/games/puzzle/</a>)
<blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesn't rely on a Canvas object, making it fast.(this game runs at full speed.)
I did not need to implement extra links for controls, since I found out that you can use the D-pad als Arrow Buttons in the browser.
This game lets you search trough photos on Flickr, and then lets you solve a puzzle made from one of those photos.
</blockquote>
<b>Space Invaders Clone</b> (Edited Version:<a href="http://www.whirlislands.nl/3dstests/spaceinvaders.html" target="_blank">http://www.whirlislands.nl/3dstests/spaceinvaders.html</a>). (Original Version:<a href="http://digitalinsane.com/games/space-invaders/" target="_blank">http://digitalinsane.com/games/space-invaders/</a>)
<blockquote>---This Space Invaders Clone was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesnt rely on a Canvas object, making it fairly fast(around 80% speed?). This game is quite well playable.
I put down extra links on the page to be able to control the game with the 3DS Stylus.
</blockquote>
<b>Pacman Clone </b>(Edited Version:<a href="http://www.whirlislands.nl/3dstests/pacman.html" target="_blank">http://www.whirlislands.nl/3dstests/pacman.html</a>). (Original Version:<a href="http://digitalinsane.com/games/pacman/" target="_blank">http://digitalinsane.com/games/pacman/</a>)
<blockquote>---This PacMan Clone was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesnt rely on a Canvas object, making it fairly fast(around 80% speed?). This game is quite well playable. (Actually it is too fast on a modern computer <img src="style_emoticons/<#EMO_DIR#>/tongue.gif" style="vertical-align:middle" emoid="" border="0" alt="tongue.gif" />)
I put down extra links on the page to be able to control the game with the 3DS Stylus.
EDIT: However, you can control Pacman with the D-pad as well. The enter button you'll have to press with the stylus tough.
</blockquote>
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Other Projects:
</b><!--sizec--></span><!--/sizec-->
<b>JavaScript8080 Arcade Game Emulator</b> (<a href="http://www.whirlislands.nl/3dstests/js8080.html" target="_blank">http://www.whirlislands.nl/3dstests/js8080.html</a>)
<blockquote>---This Application is able to emulate the original Space Invaders, Lunar Rescue and Balloon Bomber.
Sadly enough, it is extremely slow. Playing it is not really fun, it runs about 1 frame per second.
HOWEVER, it works. This is great to know, don't you think?
I created extra buttons on the page to be able to control the emulator with the 3DS Stylus.
When trying this out, HAVE PATIENCE <img src="style_emoticons/<#EMO_DIR#>/tongue.gif" style="vertical-align:middle" emoid="" border="0" alt="tongue.gif" />. It really is slow.
</blockquote>
<b>wsIRC Client </b>(<a href="http://www.wsirc.com" target="_blank">www.wsirc.com</a>)
<blockquote>---One of the first things I wanted on the 3DS was a IRC Client.
Since java-based clients don't work at all, and Mibbit does not have a 'send' button,(you cannot press enter like you would do on a normal keyboard)
I started searching for an alternative. I found an Javascript-based IRC Client called wsIRC Client.
This client is quite small, and has a send button. It works great. One bad point is however that whenever you lose your connection, you have to retype the whole server adress, channel and username again.
</blockquote>
<b>Hello World Canvas</b> (<a href="http://www.whirlislands.nl/3dstests/helloworld.html" target="_blank">http://www.whirlislands.nl/3dstests/helloworld.html</a>)
<blockquote>
The first thing I tried to show on the 3DS. It's a simple Hello World application with a circle in the background. The Hello World text flashes a little.
This demo is built on the CAKE.js engine, and is a slightly modified version of the Hello World example.
</blockquote>
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Some things worth researching further:</b><!--sizec--></span><!--/sizec-->
<b>JSNES </b>(JavaScript Nintendo Entertainment System Emulator JSNES)(<a href="http://benfirshman.com/projects/jsnes" target="_blank">http://benfirshman.com/projects/jsnes</a>)
<blockquote>This WORKS on the 3DS. But it is extremely slow (0.10 frames per second). Also, the 3DS repeatedly asks if I want to terminate the script because of long execution time.
I haven't implemented gameplay buttons yet. It won't be playable.
However, it could be a nice proof of concept. After 30 seconds, I was able to see the Super Mario Bros. Menu. <img src="style_emoticons/<#EMO_DIR#>/biggrin.gif" style="vertical-align:middle" emoid="" border="0" alt="biggrin.gif" />
</blockquote>
<b>Arkanoid 1k</b> (<a href="http://digitalinsane.com/code/arkanoid1k.html" target="_blank">http://digitalinsane.com/code/arkanoid1k.html</a>)
<blockquote>I'm currently trying to implement this game with buttons. Since it is so small and simple, I hope it will run as fast as possible on the 3DS.
I'm doing this mainly because I want to find out how fast a JavaScript game can actually run on the 3DS.
This game was made by Chris Kieslak as well.</blockquote><!--QuoteEnd--></div><!--QuoteEEnd-->
Now, finally, two(or three?) days ago nintendo released the update with the eShop and the Internet Browser in there. I started playing around with the Browser. At first I was sad that 'nintendo did such a bad job' with the browser. Since there is no sound support, no flash support, no html5 support and no java support.
but more and more I realized that this wasn't true. Nintendo's goal was to create a browser wich can be opened even while another application is opened. That is quite amazing.
Another thing I missed at first was that the browser DOES have (some) support for the Canvas element. When I realized that the browser could load Canvases, I started experimenting.
And now, I've got a list with a few games and demos wich work on Javascript and Canvas.
Even tough there is no sound, it's nice to know that you can play Space Invaders on there for free, right? <img src="style_emoticons/<#EMO_DIR#>/biggrin.gif" style="vertical-align:middle" emoid="
" border="0" alt="biggrin.gif" /> Allright, there we go. I hope I've posted this in the correct section, and that you enjoy.
~RedJiggly
<!--quoteo--><div class='quotetop'>QUOTE</div><div class='quotemain'><!--quotec--><!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Wait WHY?<!--sizec--></span><!--/sizec-->
Before we start, for everybody claiming: "Why would you want to do something like this?"
Well... let's just say that it's interesting because of the clear limitations of the browser. And also I've got too much free time on my hands.
<i><b>~RedJiggly</b></i>
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Compatibility of the 3DS Browser:</b><!--sizec--></span><!--/sizec-->
<b>Specifications:
</b>
<i>Note: These are also listed in the manual of the 3DS browser, page 12.</i>
<b>Browser Engine:
</b><ul><li>NetFront® Browser. (NX v1.0)</li></ul>
<b>Protocols:
</b><ul><li>HTTP 1.0
</li><li>HTTP 1.1
</li><li>SSLv3
</li><li>TLS 1.0</li></ul>
<b>Web Standards:
</b>
<ul><li>HTML4.01
</li><li>XHTML 1.1
</li><li>CSS1
</li><li>CSS2.1
</li><li>CSS3 (some)
</li><li>DOM levels 1-3
</li><li>ECMAScript (this is Javascript and other dialects)
</li><li>XMLHttpRequest
</li><li>the Canvas Element(To a certain extent. Is slow)</li></ul>
<b>Picture Support:
</b><ul><li>-MPO
</li><li>-GIF
</li><li>-JPEG
</li><li>-PNG
</li><li>-BMP
</li><li>-ICO</li></ul>
(tough, Some files cannot be displayed)
<b>Also interesting is that the 3DS Browser can be launched without needing to close another application.
</b>
<b>On the other hand however, there is:
</b><ul><li>-No Audio Support
</li><li>-No HTML5 Support
</li><li>-No Flash
</li><li>-No Java
</li><li>-No Other Plugin-based stuff on webpages.</li></ul>
<hr/>
Even tough the browser lacks Flash, Java and Sound, we have some Canvas and JavaScript capabilities.
This still means that we can do some interesting stuff. (Or at least, that we aren't totally crippled on the 3DS Browser)
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>3DS Browser: Buttons.
</b><!--sizec--></span><!--/sizec-->
Sadly enough, the 3DS doesn't have a keyboard. That also means: no 'onkeypress' handlers in JavaScript. However, when tapping with the stylus we can simulate a click at the point on the page you tapped on.
Also, when you hold the stylus long enough, you'll enter 'Text Copy mode'. In this mode Javascript thinks that you have the cursor down. This can also be used.
So, if you want to play some JavaScript games wich use the keyboard, you have to creat buttons or anchors on the page, and use them as input instead.
With this, I managed to create the following working games and demo's on the 3DS.
EDIT: Later, I found out that the browser DOES pass the 'keydown' events of the D-pad to the page as the arrow buttons. I didn't notice this before. It is a bit strange to play since you are moving the screen around as well while moving something in the game, but it works.
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>3DS-compatibel demo's/Games</b><!--sizec--></span><!--/sizec-->
<i>(Note: I do not own nor created these games.
The only addition I made to some was implementing on-page links so you could use the needed 'buttons' with the 3DS Stylus.)
</i>
<b>Solitaire</b> (<a href="http://digitalinsane.com/games/yetris/" target="_blank">http://digitalinsane.com/games/solitaire/</a>)
<blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesn't rely on a Canvas object, making it fast.(this game runs about full speed. only dragging cards lags a little)
This game is completely playable. I did not need to create extra links since the game doesn't need a keyboard.
</blockquote>
<b>Yetris. A Tetris Clone</b>(<a href="http://digitalinsane.com/games/yetris/" target="_blank">http://digitalinsane.com/games/yetris/</a>)
<blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesn't rely on a Canvas object, making it fast.(this game runs about full speed.)
I did not need to implement extra links for controls, since I found out that you can use the D-pad als Arrow Buttons in the browser.
</blockquote>
<b>Puzzle with Flickr Photos</b>(<a href="http://digitalinsane.com/games/puzzle/" target="_blank">http://digitalinsane.com/games/puzzle/</a>)
<blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesn't rely on a Canvas object, making it fast.(this game runs at full speed.)
I did not need to implement extra links for controls, since I found out that you can use the D-pad als Arrow Buttons in the browser.
This game lets you search trough photos on Flickr, and then lets you solve a puzzle made from one of those photos.
</blockquote>
<b>Space Invaders Clone</b> (Edited Version:<a href="http://www.whirlislands.nl/3dstests/spaceinvaders.html" target="_blank">http://www.whirlislands.nl/3dstests/spaceinvaders.html</a>). (Original Version:<a href="http://digitalinsane.com/games/space-invaders/" target="_blank">http://digitalinsane.com/games/space-invaders/</a>)
<blockquote>---This Space Invaders Clone was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesnt rely on a Canvas object, making it fairly fast(around 80% speed?). This game is quite well playable.
I put down extra links on the page to be able to control the game with the 3DS Stylus.
</blockquote>
<b>Pacman Clone </b>(Edited Version:<a href="http://www.whirlislands.nl/3dstests/pacman.html" target="_blank">http://www.whirlislands.nl/3dstests/pacman.html</a>). (Original Version:<a href="http://digitalinsane.com/games/pacman/" target="_blank">http://digitalinsane.com/games/pacman/</a>)
<blockquote>---This PacMan Clone was made by Kris Cieslak and uses Javascript and the YUI Engine.
It doesnt rely on a Canvas object, making it fairly fast(around 80% speed?). This game is quite well playable. (Actually it is too fast on a modern computer <img src="style_emoticons/<#EMO_DIR#>/tongue.gif" style="vertical-align:middle" emoid="
" border="0" alt="tongue.gif" />)I put down extra links on the page to be able to control the game with the 3DS Stylus.
EDIT: However, you can control Pacman with the D-pad as well. The enter button you'll have to press with the stylus tough.
</blockquote>
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Other Projects:
</b><!--sizec--></span><!--/sizec-->
<b>JavaScript8080 Arcade Game Emulator</b> (<a href="http://www.whirlislands.nl/3dstests/js8080.html" target="_blank">http://www.whirlislands.nl/3dstests/js8080.html</a>)
<blockquote>---This Application is able to emulate the original Space Invaders, Lunar Rescue and Balloon Bomber.
Sadly enough, it is extremely slow. Playing it is not really fun, it runs about 1 frame per second.
HOWEVER, it works. This is great to know, don't you think?
I created extra buttons on the page to be able to control the emulator with the 3DS Stylus.
When trying this out, HAVE PATIENCE <img src="style_emoticons/<#EMO_DIR#>/tongue.gif" style="vertical-align:middle" emoid="
" border="0" alt="tongue.gif" />. It really is slow.</blockquote>
<b>wsIRC Client </b>(<a href="http://www.wsirc.com" target="_blank">www.wsirc.com</a>)
<blockquote>---One of the first things I wanted on the 3DS was a IRC Client.
Since java-based clients don't work at all, and Mibbit does not have a 'send' button,(you cannot press enter like you would do on a normal keyboard)
I started searching for an alternative. I found an Javascript-based IRC Client called wsIRC Client.
This client is quite small, and has a send button. It works great. One bad point is however that whenever you lose your connection, you have to retype the whole server adress, channel and username again.
</blockquote>
<b>Hello World Canvas</b> (<a href="http://www.whirlislands.nl/3dstests/helloworld.html" target="_blank">http://www.whirlislands.nl/3dstests/helloworld.html</a>)
<blockquote>
The first thing I tried to show on the 3DS. It's a simple Hello World application with a circle in the background. The Hello World text flashes a little.
This demo is built on the CAKE.js engine, and is a slightly modified version of the Hello World example.
</blockquote>
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Some things worth researching further:</b><!--sizec--></span><!--/sizec-->
<b>JSNES </b>(JavaScript Nintendo Entertainment System Emulator JSNES)(<a href="http://benfirshman.com/projects/jsnes" target="_blank">http://benfirshman.com/projects/jsnes</a>)
<blockquote>This WORKS on the 3DS. But it is extremely slow (0.10 frames per second). Also, the 3DS repeatedly asks if I want to terminate the script because of long execution time.
I haven't implemented gameplay buttons yet. It won't be playable.
However, it could be a nice proof of concept. After 30 seconds, I was able to see the Super Mario Bros. Menu. <img src="style_emoticons/<#EMO_DIR#>/biggrin.gif" style="vertical-align:middle" emoid="
" border="0" alt="biggrin.gif" /></blockquote>
<b>Arkanoid 1k</b> (<a href="http://digitalinsane.com/code/arkanoid1k.html" target="_blank">http://digitalinsane.com/code/arkanoid1k.html</a>)
<blockquote>I'm currently trying to implement this game with buttons. Since it is so small and simple, I hope it will run as fast as possible on the 3DS.
I'm doing this mainly because I want to find out how fast a JavaScript game can actually run on the 3DS.
This game was made by Chris Kieslak as well.</blockquote><!--QuoteEnd--></div><!--QuoteEEnd-->
