5 cool javascript apps
By Justin Silverton
The following are 5 javascript apps that I thought would never be possible. They are all written using the canvas HTML element.
The canvas element is a third party extension that allows for dynamic rendering of scriptable bitmap images.
It was initially introduced by Apple or use inside their own Mac OS X Webkit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers (notably Mozilla and Firefox) and standardized by the WHATWG on new proposed specifications for next generation web technologies. Support is also present in the Opera 9.0 browser. Novell manufactures an XForms processor plugin for Internet Explorer, which also provides support for the canvas element. Independent efforts to support the canvas feature on Internet Explorer do not require plugins and are based solely on VML and Google has also begun a project to add canvas abilities to Internet Explorer using the same techniques.
Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, and image composition. Source
Note: Most of these examples are *not* compatible with Internet Explorer
1) Canvascape
A proof of concept of a 3D FPS. There is a textured and non-textured version available.
2) MSX Emulator
This project shows us the true power of javascript and the canvas element. It is an MSX emulator, which includes the ability to load and play game roms.
A soccer game.
4) Plasma Demo
This is a port of an RGB C plasma demo
A clone of the game Arakanoid.
26 Comments so far
Leave a reply
Great list - all worked in Firefox!
Although I’d hate to be a party pooper, but due to the considerable difference in Java Script handling across browsers, this wouldn’t contend with java or flash for some time still.
On Arkanoïd, the ball was bouncing on an invisible line, near the top of the screen (only when 3 tiles where left). I love Arkanoïd !
AMAZING. JavaScript PWNS J00!!!
Hi, I’m the developer of JS Arkanoid: the bouncing on invisible line bug has been solved. The game is only a demo to show Canvas, hope you like it!
And sorry for my English!
Arkanoid did not work in Opera. The textured “FPS” was very slow, even with Opera (the fastest of all major browsers as far as JavaScript is concerned: http://www.mgroves.com/JavaScript-speed)
Davide,
Thanks for posting and keep up the good work!
Arkanoid did not work in Opera 9.10
Wow I love these apps. I spent an hour playing them!
That version of Arkanoid is super low-end compared to Schiller’s. http://www.schillmania.com/arkanoid/arkanoid.html
[…] You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Leave aReply […]
This is not new. Someone wrote a 3D fps in 5k of javascript back in 2003, see http://www.wolf5k.com/
How about some cool demos that just use Javascript/DOM/CSS (no Canvas tag):
3D Demo:
www.uselesspickles.com/triangles/demo.html
Ball Physics Simulation:
www.uselesspickles.com/jsballs/
:)
Or some JavaScript demos ?
Mooncheese, Redbug and Gallion reach by Matthew ‘gasman’ Wescott
- http://www.scene.org/file.php?file=%2Fparties%2F2004%2Fassembly04%2Fbrowser_demo%2Fmooncheese_by_shingebis.zip&fileinfo
- http://www.west.co.tt/matt/js/redbug/
- http://matt.west.co.tt/demoscene/gallions-reach/
Neja by Mathieu ‘p01′ Henri
- http://www.p01.org/releases/Demoscene/#neja
[…] […]
[…] Pero, ¿que pasa cuando lo llevas a un nivel que no conocemos tanto? ¿que pasaría si usaramos Javascript para desarrollar juegos? […]
[…] Jaslabs: High performance php » 5 cool javascript apps (tags: javascript) […]
[…] 5 cool javascript apps Canvascape, MSX Emulator, Unreal Soccer, Plasma Demo, An Arkanoid clone. I’ve seen a few of these somewhere before… (tags: CANVAS JavaScript Games) […]
[…] 8. 5 cool javascript apps […]
Thanks for getting this list together, these are interesting.
[…] link […]
[…] read more | digg story […]
[…] read more | digg story […]
Uhm here are amazing javascript games
Be quick or be dead
and
KABOOM
It seems they use dojo for rendering.
See you!
[…] read more | digg story […]
Does anyone else find it at all kinda silly this whole push to cram as much functionality into the browser as possible? I mean the whole point of the browser was to read hyper-text documents, and look how far this has been stretched. What is the point in trying to encapsulate desktop windowing technology into a browser when there is a completely adequate theater for this type of application: the desktop! These days writing a graphics application to work across all of the 3 dominant desktop platforms isnt as difficult as it was in the 90s, and instead of increasing the bloat of our web browsers, why dont we instead work on better ways to allow desktop apps to run cross platform?