JavaScript/HTML 5 Gaming? 201
cjcela writes "Lately I've seen some HTML 5/JavaScript games popping up on the web. Most of them lack sound, and are not polished, but little by little this is changing. As an example, check Galactic Plunder. While it is only a single-level proof of concept, it is one of the first arcade non-Flash games that I've found playable. Do you know of other comparable or better pure JavaScript games?"
All demos (Score:5, Informative)
Everything I've seen so far has been "hey look what I can do". It's not the domain of cottage industry game developers, yet.
Just today I was looking at WebGL [khronos.org] which will allow hardware accelerated 3d in the browser.
I just hope someone, eventually, figures out that the "full screen" button we have in web video can also be used in web games.
Re: (Score:2)
In the rush to open source, less crashing and speed a lot has been dropped.
We are left with MS or Apple like apologists telling us how good the new parts that work are and that nothing better ever existed.
Flash is not good, but it does offer functionality that seems to have been totally lost in todays development efforts.
html is evolving but seems far in the past.
Re:All demos (Score:5, Informative)
I'm sure the complete lack of a decent development environment has something to do with it too.
Re:All demos (Score:5, Funny)
What on earth are you talking about? Vim works with every language.
Re: (Score:3, Interesting)
You complain about some developers preferring to use a development environment. But then you go on to complain that you couldn't use your favorite text editor back in the day and were forced to use a lame one.
I don't trust any programmer that needs "their favorite editor" but I suppose that's beside the point. See how ridiculous that sounds? Hypocrite.
Different people prefer different environments. Hell, you can even get vim or emacs to do autocomplete, syntax checking, even compilation triggers. That's a d
Re:All demos (Score:5, Interesting)
I just hope someone, eventually, figures out that the "full screen" button we have in web video can also be used in web games.
That is actually one of the most significant problems with HTML5. It provides no way for the video to maximize to full screen and is actually even against such functionality with JavaScript (page could maximize the window automatically and so on).
Currently the only way is to install a Firefox Addon that adds a context menu item to maximize the video object. But that is only for the video object, works only with Firefox and is in no way user-friendly.
Everyone here always says sites should start changing to HTML5 video, but when it lacks basic functionality like that I just don't see it happening.
Re: (Score:3, Informative)
It provides no way for the video to maximize to full screen
Have you tried pressing F11 in your web browser? Just because it's different from YouTube's control doesn't necessarily make it worse. It works especially with games that resize their canvas upon a browser window resize, and the game's scripting could sniff the browser and tell the user which key is a particular browser's key for full-screen mode.
Re: (Score:2)
Re:All demos (Score:5, Interesting)
HTML5 should offer the functionality and browsers should offer an option to turn it off.
If it's opt-out, there will likely be a well-publicized incident where a canvas, audio or video takes over the full screen of an inexperienced PC user (who forgot to turn it off or didn't even know it was possible) and impersonates the operating system's user interface.
Re: (Score:2)
Unlikely. You can already do full-screen flash and (somewhat amazingly) it hasn't been abused as far as I know.
Chrome has added a javascript full-screen video API, and Firefox has a non-javascript full-screen context menu item for HTML5 videos.
Re: (Score:2)
and impersonates the operating system's user interface.
Downloading emacs.js
1% done
processing...
processing...
1% done
processing...
processing...
1% done
processing...
processing...
HEAP SPACE EXHAUSTED
(from a loving user)
Re: (Score:2)
Flash has security controls that limit the impact. HTML5 would need to do this also.
See the security section here:
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html [adobe.com]
Re: (Score:2)
Re: (Score:2)
Pressing F11 is more user friendly, because it's the same for every single web page in that browser. Take a look around the web and see how many different icons you see for making Flash things go full screen. Just about every single Flash thing I've seen uses a different icon and puts it in a different place, while the full-screen menu item in my browser is in the same place all of the time.
The problem is that there is no way of combining the 'let this game take control of the window' and 'make the windo
Re: (Score:2)
It's not; you never tell the user what to press, because you never have a way of knowing what they need (or want) to do. Telling a browser to switch to full screen (or worse, telling them how), is like telling a user to bookmark, telling them how to follow a hyperlink, telling them to change their font sizes, or telling them how wide to make their browser window. Every web guy in history who has ever tried to do those th
Re: (Score:2)
I can't press F11 on a touchscreen
Browsers on multitouch tablets tend to run maximized in the first place, and a canvas can expand to cover the whole window.
(not a simple box detection -- you can maneuver the ship so that the wing and nose are right next to an enemy and it won't detect a collision)
Orthogonal. You can still use box detection to ignore wing and nose strikes. Pretty much every bullet-hell shooter tests bullets against only the cockpit.
Music didn't play at all.
Some web browsers support only patented codecs; others support only unpatented codecs. But as of the next IE, Apple will be the lone holdout in not providing a way to play Ogg/Vorbis audio and WebM video.
Re:All demos (Score:4, Insightful)
Try this in Firefox: Command-shift-F (on Mac OS) or F11 (on Linux). There's your full screen. The video doesn't need any way to do that, because it's right at the user's fingertips ***IF*** they want it, and likewise, the user isn't compelled to live with the programmer's arrogance if the user doesn't want fullscreen. This is a good thing.
Adding a way for javascript programmers to interfere with the user's window environment in such a way, would weaken HTML5. It might make it ever-so-slightly more convenient for your local intranet app server, but for The Internet, it would be a step toward degrading HTML5 into the realm of Flash and ActiveX. Even if they fuck up and add this "feature" to HTML5, then you're just going to have all the browser authors need to add preference options to enable/disable it, and since no one will have reason to suspect that issuing that API call will actually result in full screenage, no one will use it anyway. This idea is just as useless as the past mistake of adding the calls which allow pop-under windows.
Re: (Score:2)
That is actually one of the most significant problems with HTML5. It provides no way for the video to maximize to full screen and is actually even against such functionality with JavaScript (page could maximize the window automatically and so on).
This will be done. See this whatwg thread [whatwg.org], or this one [whatwg.org]. WebKit has a non-standard experimental implementation, and it's likely we'll see progress on standardization and deployment in the next year or so. For now, you can usually view videos full-screen by right-clicking and choosing the fullscreen option, or by opening in a new tab and hitting F11. This is one of six concerns that John Harding of YouTube told the WHATWG [whatwg.org] was important for YouTube to use HTML5 video more, and all the implementers are awar
Re: (Score:2)
I don't see this as a problem. The last thing I need is for random pages to be able hijack the entire screen without my consent. If I want something to be full screen, I will make it that way myself, and then turn it back off again when I want to.
If you don't see why this is in your best interest, please start up Inter
Re: (Score:2)
You're missing the point: You *can't* tell the browser about it.
Re: (Score:2)
Re: (Score:2)
I don't see why browsers can't add a similar fullscreen button to their video. There's nothing magical about Flash that allows it to do stuff other programs can't.
Full screen ads (Score:2)
They have got used to just clicking the "full screen" button in their YouTube player.
This kind of function should be under the control of the browser. Not something called from within the Javascript on some random page.
Otherwise the day when a "goFullScreen()" method is made available on canvases and video object, is the day when you have über-annoying ads (or shock sites) that completely hijack the whole screen. (You know as some of the flash ads already do. Have you recently tried surfing with your AdBlock+ deactivated ?) Making the web slightly more convenient for the few who don't
Re: (Score:2)
This kind of function should be under the control of the browser. Not something called from within the Javascript on some random page.
Otherwise the day when a "goFullScreen()" method is made available on canvases and video object, is the day when you have über-annoying ads (or shock sites) that completely hijack the whole screen.
You mean like window.open(), which has allowed web pages to open new windows from JavaScript for more than a decade? Except, right, browsers all integrated popup blockers, so it can only be called when you click a button. Works fine. Flash does pretty much the same thing for full-screen, and HTML5 will too when (not if) that's added to the language.
(You know as some of the flash ads already do. Have you recently tried surfing with your AdBlock+ deactivated ?)
Flash ads can't full-screen until you click on them, and when they do there's a pop-up that tells you to hit escape to leave full-screen mode. So, no, they d
Re: (Score:2)
If right-click -> full screen is too complicated for a casual user, it's a fair bet they aren't watching movies on the internet in the first place.
Re: (Score:2)
I just hope someone, eventually, figures out that the "full screen" button we have in web video can also be used in web games.
For flash at least: just find the direct link to the swf and download/paste it in the address bar, that's what I've always done.
Re: (Score:2)
You think its the flash _games_ fault when it happens to 99.99%? I'll give you a clue its the adobe engineers that are incompetent.
Re: (Score:2)
If the default path that everyone winds up on sucks, that's adobe's fault. Bad APIs, bad documentation, whatever, it's Adobe's inability to make the common case work that is the problem. Besides, why should vector be slow? The computations are dead easy, and can be vastly accelerated on every platform flash is on by a competent engineer.
Hits? (Score:2)
Someone trying to get hits on their games website? :-)
Anyway, that particular game didn't seem to work well on my machine (Mac OS X) with Safari. The Z button wouldn't shoot, and collision detection didn't seem to work most of the time. So not really a good example of what can be done I would say.
Re: (Score:2)
Safari 4 or Safari 5?
Same bugs as you with Safari 4.0.5. I even had the "ground" disappear.
Re: (Score:2)
very nice. plays just like the original. now do Exile ;-)
Re: (Score:2)
Effect Games (Score:2, Informative)
It runs at decent speed in firefox, and its very fast in chromium.
Re: (Score:3, Informative)
Re: (Score:2)
I think the phrase you were looking for was "None of them there games are HTML5, yay boy."
Re: (Score:2)
Not only it is not HTML5, but it loads twice. And you have to wait longer for the loading after you click start than the loading before you can click start. What assholes. If I knew how long it would take I would never have listened to this shitty music so long.
Also play control is poo
HTML5 Game library? (Score:2)
Re: (Score:2)
Re: (Score:2)
Another Shameless Plug (Score:2, Informative)
What about *new* games? (Score:2)
We know that full flash websites are inferior to html websites. If you want to sell dogs online, and you want to hire a webmaster and you want to make the shop a full flash website, if you have luck, the webmaster that you will hire, will tell you to drop that idea and make a html shop instead. You can ignore that advice, drop the webmaster, and get another merce.. webmaster, that will make a website for you, and only for you, completely in flash.
What make sense for normal websites may make sort of sense fo
Re: (Score:3, Funny)
1) I said websites, flash websites are more expensive than normal websites.
2) HTML can be ugly, but to add content you only need a text editor. Even the most ugly website can be edited and added content with a simple text editor. I can't say that for flash websites, most of then have the .fla files lost, and where designed statically. To change these, you probably need a hex editor...
3) "scrollbar what?". You sure know what is a scrollbar. Flash designers know what a scrollbar, even re-invent it. Most flash
Re: (Score:2)
In that sentence you said specifically you were talking about flash games, and not websites.
Paddlewars! (Score:2)
This game has been up for a while. Sound was disabled due to cross browser (un)support for the new audio tag.
http://canvas.xieke.com/paddlewar.html [xieke.com]
Bonus points if you know what game it's from, and a medal if you can beat the CPU with 21-0.
HTML 5 versus others (Score:2)
What previous commenters have been saying is true; there's relatively little by way of gaming on the Java platform despite its long prolificacy compared to HTML 5. HTML 5 is obviously still emergent; it could be over a decade until all its potential for gaming is realized. I was actually thinking of this the other week...a HTML 5 short RPG game of say, 3-5 hours worth of character-driven plotted content. It'd be novel to say the least and could be with us soon.
Another thing that's got me wondering is how Fl
Re: (Score:2)
Another thing that's got me wondering is how Flash-based game sites such as Newgrounds.com are going to adapt if (when?) Flash becomes less relevant for the Internet wholesale.
They don't have to. People won't stop what they do just because Steve Jobs tells them Flash is slow. As long as there is still a community and a market for web games, they will continue to use the tools which work best.
Re: (Score:2)
Though it is pretty awful in this day and age, almost 30 years after the C64...
You do know that the C64 has been 100% emulated in Flash [codeazur.com.br] don't you? Let me know when HTML5 can do that and I'll consider switching over from my "inferior" platform.
Lemmings (Score:2)
This Lemmings clone dates back to 2004 so it's not HTML 5 but it's pretty good all the same.
http://www.elizium.nu/scripts/lemmings/ [elizium.nu]
Re: (Score:2)
believe it or not html5 has been around since 2004.
http://en.wikipedia.org/wiki/HTML5#W3C_standardization_process [wikipedia.org]
it just hasn't progressed as quickly as you might have expected.
Games (Score:2)
LD HL,16384 LD C,192 LA
One button games (Score:2)
HTML 4 & Javascript (Score:2)
A Buddy of mine did this using HTML 4 and Javascript. In fact, he rewrote Mario Bro's, Monopoly and a few others are proof of concepts.
http://www.googin.getproxied.com/games/ [getproxied.com]
This guy's scrolling shooter is of course better, but the tech has been around for a while.
Vimperator users note (Score:2)
Make sure you enable pass through mode, otherwise the javascript keyboard event handler will not receive your keystrokes. It's rather frustrating playing a game where your plane does not move. Would have been amusing if I made it through the level anyway.
Cities of Apocalypse (Score:3, Interesting)
I created a HTML5 game using canvas and some other technologies. Naturally it requires a modern browser (meaning, anything but Internet Explorer).
The game is called Cities of Apocalypse and it is a relatively simple game that is somewhere between turn-based and real-time. You can have a look and try it out at http://citiesofap.game-host.org/ [game-host.org] (please be gentle with my server :)
I hit a few snags while developing the game, such as Firefox 3.0 not having text rendering for canvas, or Opera having a surprisingly slow javascript engine (don't flame me, route calculations take 5x as long with Opera!). All in all, it was an interesting project that I might get back to someday.
But Why? (Score:2)
Are these games more cross-platform than Flash games? Than Java games? Will they run on the iPhone? iPad? (Not that either platform represents a remotely significant percentage of web users)
Are Canvas games better than Flash games? Are they better than Java games?
Is the development environment better than existing Flash/Java development environments?
Is HTML5/Canvas less CPU intensive?
I've played with HTML5 and Canvas a few times, and I always come away scratching my head and wondering "why all the fus
Answer: (Score:2, Insightful)
They don't require a browser plugin (like java or flash) to play.
I agree that it's not that big of a deal if your target audience is using Windows PCs...
If you want Android and iP*d, and many Linux users to be able to play as well HTML5 + JS is a decent alternative.
I already use Flash's ActionScript, so why not use the almost identical JavaScript to make the game and target a wider audience?
1. Flash is made specifically for animation, so it's generally easier to get a game up and running with in than in JS+
SVGcave (Score:2)
[Shameless Plug] SVGcave [gringer.org] isn't particularly wonderful, but it does demonstrate a few things that can be done with html5 (SVG, not canvas).
I have, and it's a real pain (Score:2)
For one, Canvas (at least on the iPhone) is godawful slow. For another thing, mobile Webkit has a tendency to crash. The client-side DB was particularly suspect, and has a habit of crashing
Boing Boing Arcade (Score:2)
About eight hours ago I noticed Boing Boing has been running a gamedev contest that has attracted several Javascript/Canvas games. They seem to have sound using the "Sound" element that works in Firefox.
http://www.boingboing.net/arcade/ [boingboing.net]
Re: (Score:2)
Mine (Score:2)
I made a canvas remake of 3D Pong... it's mostly a demo and proof of concept, so it doesn't really satisfy your request, but it's playable and somewhat fun... http://lbarrettanderson.com/ [lbarrettanderson.com]
Re: (Score:2)
Looks cool, and once started the paddle tracks my mouse, but the ball never bounces back.
Firefox 3.6 on linux.
Re: (Score:2)
It is pretty glitchy in certain browsers. Chrome seems to work great. Last time I checked, Opera wouldn't display anything properly. The last time I checked Firefox it worked great as well, but that must have been an older version. I've kind of lost interest in it (made an android app out of it which is much more playable and entertaining).
Re: (Score:2)
Just tried the android app on my N1 while bored at work. Very nice.
The javascript version didn't very well for me (Chrome 5.0.375.99, Windows)
Re: (Score:2)
Thanks
One of these days I might touch up the web version once HTML5 becomes more standardized. Getting the "ping"s to play was miserable, and still doesn't work in all browsers. Not sure what you're experiencing with Chrome 5 on Windows (that's what I'm on as well), but maybe one day I'll address the issue. It's actually a (relatively) easy game to implement with canvas, at least for being 3D. I'm not aware of any easy way to create 3D objects in it, so everything there is just done with some math
Re: (Score:2)
Sorry for the useless bug report. The exact problem is that when the ball hit's either the opponent's paddle or yours a message box appears reading "INVALID_STATE_ERR: DOM Exception 11". That's probably not very helpful but whatever. I've never done any serious Javascript programming, just the odd bits here and there to fancy up a website. I'm .NET to pay the bills.
Re: (Score:2)
Now that I think about it, the issue you're having with it not bouncing back is probably due to the audio it's trying to play. I can probably make it so it doesn't crash, but this does demonstrate one of the annoyances with HTML5... audio and video formats... I wish there would just be one format that worked in every browser. I'm pretty sure I set my game up to have several different options of formats (where it chooses automatically), so simply lacking the options probably isn't what's happening, but I'm s
The Game of Life (Score:2)
http://sixfoottallrabbit.co.uk/gameoflife/ [sixfoottallrabbit.co.uk] The Game of Life in html5.
Here are two more HTML5/Javascript games (Score:2)
I would gladly write more if I had the freedom to do so.
I'm trying to figure out this websockets thing so I can start making turn-based games.
Two more - asteroids and bubble bobble (?) (Score:2)
freeciv.net (Score:2)
I'm a little surprised that nobody has mentioned Freeciv.net [freeciv.net]. It's a freeciv (.org) client that runs on a web server, and communicates with the user's browser using HTML5 elements like canvas.
Re: (Score:2)
I think that basically sums it up.
Unless you count Kingdom of Loathing and such.
Re: (Score:3, Informative)
No
Understandible. It can be hard to seperate HTML5 content from flash content these days. However, there is games popping up at a pretty constant rate. For example, look at these links:
Another thought: The HTML5 canvas element and Java's AWT "Graphics" element are very alike. I wonder how long it takes for someone to program a converter, so all java applet/mobile games are available as HTML5 games?
Re:No (Score:5, Informative)
Your first link is not a games library. At least not in the sense of your 3rd link.
But your 3rd link is 2 years old and the project it mentions doesn't appear to exist anymore.
Re:No (Score:5, Informative)
Thanks for your corrections!
It was actually from my bookmarks. I've played quite a bit around with the canvas element myself, and that's why I've got a lot of bookmarks.
Sorry about the confusion about "library". English is not my first language, and in my language library can also mean "collection of", so that's why I used that word.
The 3rd link was actually not the link I intended to post, I intended to post a link to this HTML 5 Game engine [dextrose.com] (More info in this article [ajaxian.com]) which looks pretty good. It's in beta though, and I've got no hands on experience with it, but it looks promising.
The link I posted is still valid though, and can be found here: http://tommysmind.com/ [tommysmind.com] It might not be updated any more but it's still a nice resource, if you've just started using the canvas element.
Re: (Score:2)
Actually, "library" can and does mean "collection of" in English. Indeed that is the exact meaning of "library" in a "code library". Alone "library" implies a collection of books, but "music library" and similar terms are definitely in use.
"Library" when used alone may imply a lending library. Context is necessary to determine if lending library or book collection was intended. When used with modifiers, lending library is usually not implied, with a few exceptions, like "public library".
The only issue with
Re: (Score:2)
To be more accurate, because this is Slashdot people will misinterpret anything that you say in whatever way is possible just so that they can disagree with you.
And everything that you said about ducks is completely and totally wrong. Stupid git [google.com].
Re: (Score:2)
What we need is a really fundamental (robust, orthogonal?) graphics library for HTML5. Something that handles text, music, sprites, and collision detection, AJAX (web sockets?), even event handling, etc.. in a cross browser way. So that when we make games, we don't have to worry about cross browser issues, so that we can be confident that however it renders in different browsers is the state of the art.
The "HTML 5 Game engine" called Aves looks like it
Even better: In python! (Score:2)
http://pyjs.org/examples/asteroids/output/Space.html [pyjs.org]
using pyjamas http://pyjs.org/ [pyjs.org]
Re: (Score:2)
And in addition, to see what other awesomely cool things are possible with HTML5 and Canvas, and hence possible in games, check out http://www.chromeexperiments.com/ [chromeexperiments.com]
Re: (Score:2)
The HTML5 canvas element and Java's AWT "Graphics" element are very alike. I wonder how long it takes for someone to program a converter, so all java applet/mobile games are available as HTML5 games?
Hasn't Google already done something like that?
Re: (Score:2)
Another thought: The HTML5 canvas element and Java's AWT "Graphics" element are very alike. I wonder how long it takes for someone to program a converter, so all java applet/mobile games are available as HTML5 games?
What's the showstopper for java-applets anyway?
Re: (Score:2)
Java applets work, but the language is somewhat clunky[1], at least compared to flash, and for the longest time there were no good libraries for creating Java applet games. On the other hand, Flash was designed for animations and interactive animations, meaning it came by default with many of the necessary tools for building a game.
Indeed to this day, most flash games are developed from scratch, rather than using a pre-existing game library, even though several exist.
Java is also not as widely installed on
Re: (Score:2)
The problem is, people don't want to download a 50MB browser plugin.
Re: (Score:2)
Java can be used for games, no doubt about it, but those type of games you are mentioning can have most of the code written before you even decide on the specifics of the game.
They are not as experimental as most flash games.
Flash lets you through together a game quickly to test a game-play mechanic, while the java game will probably be more technically solid, but would take more time to develop. Most of my favorite flash games would be many times harder to write in Java.
On the other hand, Java can definite
Re: (Score:2)
so flash is the visual basic of the web?
Re: (Score:2)
Honestly, yes. It allows for rapid development, the end code is all too often unmaintainable, and it is among the easier Turing-complete web technologies to learn. (Granted the programing languge itself is a superset of ECMAscript, so Javascript experience transfers partially, but browser DOM experience, and cross-browser coding experience does not really help.)
Unlike VB, the underlying language is actually reasonably good. It is an ECMAscript superset, as I already mentioned, so it is a prototype-based lan
The best game with source I found was this (Score:2)
I found that through this site that has a lot of canvas demos with code: http://www.canvasdemos.com/ [canvasdemos.com]
Re: (Score:2)
I used to write a lot of Javascript games - way back when NS4 and IE4 were the browsers of choice. e.g. Donkey Kong, with all 4 levels of the original (plays a bit too fast on modern browsers) http://www.smashcat.org/arcade/dkong/ [smashcat.org] . Also wrote versions of Tempest (for IE4 using VML), Frogger, Pengo, Pole Position, etc.
Re: (Score:2)
I declare Scott Porter the winner. hahaha "Porter"
Re: (Score:2)
http://slashdot.org/comments.pl?sid=1706968&cid=32783638 [slashdot.org]
Re: (Score:2)
Re: (Score:2)
Re: (Score:3, Informative)
Re: (Score:2)
I have played some of these browser games. Because Parent didn't mention: none of the mentioned games have anything to do with SVG/Canvas/HTML5.
Kind regards,
-S
Re: (Score:2)
Re: (Score:2)
Re: (Score:2)
Re: (Score:2)
Way to make assumptions there champ.
Re: (Score:2)
Why should this games even exist? What is the target group? I doubt there are that many people that really want to play browser games but do not have Flash.
I think was a proof of concept and general, "Hey, I wonder if I could. . ?"
That is, it wasn't made for a target audience. It was made for the creator because he wanted to create, and anybody who wanted to experience that with him is welcome.
I am curious about Javascript; it's sort of like the new BASIC. It's everywhere and anybody with a browser and an editor can use it. New browsers just takes it all a few steps further so that it is able to do pretty much anything at a good rate of speed.
-FL