Slashdot Mirror
JavaScript/HTML 5 Gaming?
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?"
I think that basically sums it up.
Unless you count Kingdom of Loathing and such.
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 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.
How we know is more important than what we know.
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.
There's also another awesome game written in html5: http://www.effectgames.com/effect/games/crystalgalaxy/
It runs at decent speed in firefox, and its very fast in chromium.
~xnt14
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?
My <1000 UID is with a hot chick
If I'm not wrong Lord Of Ultima
yesterday I stumbled on http://www.boingboing.net/arcade/ which presents a few games which are mostly html5. Since a lot of people are choosing html5 over flash I believe we'll see more and more of them coming in the future.
Wasn't Google's pacman thing pure javascript/html5? Its still up at http://google.com/pacman
Normal is a setting on a washing machine.
I found this shoot'em up to be very crude. It was jerky and not particularly well-made; anything but a good showcase (but with that said, no slandering of the author's effort).
If you want to see some real nice examples of JavaScript/HTML5, check out http://www.kesiev.com/akihabara/
Asteroids: http://www.kevs3d.co.uk/dev/asteroids/
I found that through this site that has a lot of canvas demos with code: http://www.canvasdemos.com/
How many more years will slashdot have an off-by-one error on your Score in your profile?
Does anyone know of a FOSS HTML5 game library that handles cross-browser compatibility for you?
How many more years will slashdot have an off-by-one error on your Score in your profile?
I recreated the classic 8-bit arcade game 'Thrust' (predecessor of Gravitar) in this way: http://joncom.be/experiments/thrust/
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 for website games. Not everything, of course, but some things.
So the real question is, by doing a full game in flash, what are you limiting yourself? well.. flash is expensive to make, is not flexible to add content. Is also designed (mostly) for the fullscreen thing, read... most flash websites avoid the scroll bar.
So a HTML5 website could exploit these strong points of HTML. And make a webgame with lots of text and images, a integrated wiki, a game that you can browse to get different information that is updated often (as oposed with "often outdated" that you get with flash websites). We have already lots of games like that, OGame, eRepublik, and the like.
New type of games can be invented, but using the strong points of html, result on strategy games. Using the strong points of flash, you make casual puzzle and platform games.
I don't think HTML5 will change this much. It can create new type of games, but the existing games seems to work already in flash and html4.
-Woof woof woof!
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
Bonus points if you know what game it's from, and a medal if you can beat the CPU with 21-0.
'For we walk by faith, not by sight.' II Corinthians 5:7
Boing Boing recently had a game competition, quite a few are written with JS: http://www.boingboing.net/arcade/
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/ . Also wrote versions of Tempest (for IE4 using VML), Frogger, Pengo, Pole Position, etc.
Code, Hardware, stuff like that.
As mentioned on my favorite site, slashdot.org, there's an MMOG that uses HTML5ish stuff. Well, at least Javascript:
http://slashdot.org/comments.pl?sid=1706968&cid=32783638
How many more years will slashdot have an off-by-one error on your Score in your profile?
Commander Keen in Goodbye Galaxy!
Yay me! ^^
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 Flash-based game sites such as Newgrounds.com are going to adapt if (when?) Flash becomes less relevant for the Internet wholesale. I think the idea of Java being expanded to fit the myriad creations of that site's community is less than realistic in the face of the progression of HTML 5. One thing that Flash has over HTML is a program which simplifies the whole shebang of making an animation without having to write much code (Actionscript). Though it is pretty awful in this day and age, almost 30 years after the C64, for people to consider Actionscript's (a mostly Flash-native language) advantagious to their own productive capacity when it comes to games it nevertheless is a factor in Flash remaining at the top of the games market for so long.
Looking at it that way, were people interested in creating games to switch over to HTML5 they'd obviously have a lot of skill to apply in other areas which are discussed regularly on Slashdot. Actionscript doesn't offer this, and is inferior as a result.
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/
And another one, this one with sound even: http://29a.ch/jswars/
LD HL,16384 LD C,192 LAB0: LD B,32 SUB A,A LAB1: RR (HL) INC HL DJNZ LAB1 DEC C JR NZ,LAB0
---
HTML5 Games Feed Just added at Feed Distiller
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.
A javascript non HTML5 puzzle game(just DHTML):
http://hylzee.sourceforge.net/hylZee/
Hey don't blame me, IANAB
Hardly the same, but I always liked these: http://kisrael.com/features/gb.html
Entanglement
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/
This guy's scrolling shooter is of course better, but the tech has been around for a while.
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.
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/ (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.
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 fuss"?
------ The best brain training is now totally free : )
Hi Overlord. I appreciate your effort searching google and posting these links, but did you bother to click on them?
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.
How many more years will slashdot have an off-by-one error on your Score in your profile?
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/
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
Hi Hellop,
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 (More info in this article) 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/ It might not be updated any more but it's still a nice resource, if you've just started using the canvas element.
My <1000 UID is with a hot chick
It isn't flash, although I'm not sure if it is HTML5, or just heavy javascript http://www.google.com/pacman/
4 levels? Wow. TFA only has 1.
I declare Scott Porter the winner. hahaha "Porter"
How many more years will slashdot have an off-by-one error on your Score in your profile?
[Shameless Plug] SVGcave isn't particularly wonderful, but it does demonstrate a few things that can be done with html5 (SVG, not canvas).
Ask me about repetitive DNA
I created SnackMan (pacman clone with multiple levels and variable ghosts) in DHTML+JS with sound & music back on IE6.
Over the years I gave up on JS+DOM because of the number of <object> tags I had to support for sound.
HTML5 sparked my interest in using JS for games again, so I reworked the sound system.
The latest version only works in HTML5 aware browsers (eg: FF 3.5).
For some reason the music stutters and cuts out.
Downloading it and running the game locally solves the issue.
Also: To have multiple sounds of the same effect playing at once I had to create 10 identical <audio> audio tags for each effect.
I can't wait until the HTML5 implementations are more stable so that I can seriously use it for games.
looks actually easier to use then what i had been
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+DHTML/Canvas.
Game authoring frameworks for JS may fix this.
2. JS animation is sometimes jerky and slow. SVG is very slow too.
Hardware acceleration will fix this.
3. The audience without flash or java is too small to worry about.
This audience is growing, much the same as when Firefox was new.
It's silly to not test websites in FF, Chrome, Safari and Opera now.
In short: Why? Because it's the future. HTML was originally for static content. Now web pages have rich multimedia content.
In the future HTML will likely incorporate standard effects like animated style transitions, and even 3D.
You can ignore the future, but soon the future will be very relevant.
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?
My game engine, Tempest Game Engine, is intended to be a feature-rich tile-based games engine, with pluggable modules that enable developers to add their own code segments as its development progresses. Right now it's got tile based rendering, integrates with the OSS Tiled editor, a decent tile management system, and a few other bells and whistles. I'd love feedback, feel free to check out http://tge.stormwarestudios.com/.
I wrote the underpinnings of an SVG Javascript game years ago at while at a previous job. The frame rate was horrible but the project proved it could be done even then.
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 even have the necessary brain cells to use a computer to begin with, at the cost of making a much worse experience for almost everyone else, is *not* a good strategy.
"Sufficiently advanced satire is indistinguishable from reality." - [Tips: 1DrYakQDKCQ6y52z6QbnkxHXAocMZJE61o ]
We're developing a multiplayer RPG over at http://playbastion.com that eschews Flash entirely, in favor of the Javascript approach. Helps a lot in terms of being friendly to mobile web browsers. The first playtest just concluded, but if you are interested in trying the game, head over to the site and sign up for the next test.
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 the browser in a light breeze. The dev tools for HTML5 development are nonexistent beyond your classic HTML toolkit; when you're trying to manipulate SVG files with script, this can be a major, major headache.
Note that many of these gripes are specific to Webkit. The dev tools, however, are not. I work primarily in Flash these days because a) it's what my work pays me to do, and b) for all my quibbles with it, Flash's development environment is the only dev environment that even comes close to being good for this kind of work.
I would absolutely -love- to target HTML5 instead of Flash, but until the tools are there, it isn't going to happen. The real kicker is that in another few years, HTML5 will likely simply be a publish setting in Flash CS(n+1), and all this chest-thumping about HTML5 versus Flash will be completely moot, as the actual -content- being made will be -exactly the same for both-.
In the end, HTML5 will likely supplant Flash, as it should; plugins are generally a bad way to go about enabling core content. That said, everything is going to look pretty much exactly alike, and virtually all rich HTML5 content will be created with the exact same set of proprietary tools as Flash. What's more, that proprietary toolset is going to generate code which is essentially unreadable to humans, anyhow.
Obliteracy: Words with explosions
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 development environment right there. I love vim, but get off your high horse and stop thinking that using the command line or a shitty editor makes you any better than someone who doesn't.
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/
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?
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/
I made World of Solitaire (http://worldofsolitaire.com) and I think it's pretty awesome.
100% HTML/JavaScript, no flash. Over 50 different solitaire games, multiple decks, undo support, customizable backgrounds, statistics and more.
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 your post is that because this is Slashdot, people may assume that "library" means code library in such a context, rather than "collection of". Thus it may be clearer to explicitly say collection.
Stylish sheet to fix many problems in Slashdot's D3: https://gist.github.com/801524
I am looking for Javascript card games. I want to learn how to program them. I found solitaire games written in Javascript at http://worldofsolitaire.com/ But what I would really like is examples of trick-taking card games written in Javascript. Can anyone point me in the right direction?
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 home systems as Flash is.
Footnotes:
[1] In this context by clunky I mean that it does not permit many quick and dirty hacks that many scripting languages permit, tending to enforce at least some elements of proper OO design (although admittedly not all of them). In some contexts this is a good thing, as it discourages the quick and dirty hacks. However for game development, permitting the hacks can allow a developer to quickly try out an idea, and implement it properly only once it has been shown to be workable.
As long as the developer is disciplined enough to replace the hack with proper code, this can speed up testing out ideas without causing the code quality to suffer. If the hack is not replaced, this
Stylish sheet to fix many problems in Slashdot's D3: https://gist.github.com/801524
http://sixfoottallrabbit.co.uk/gameoflife/ The Game of Life in html5.
.
. hmmm
I'm a fan of Triglav , which is a Diablo-style RPG with surprising quality and game length. It's coded in JavaScript, but designed for IE6 (wtf?), but appears to work with IE8 (and doesn't appear to work with Firefox). There's a instant-play mode, or a registration mode that lets you save your progress. Check it out.
http://www.marginallyclever.com/samples/
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.
I wrote these several months ago. http://www.marginallyclever.com/samples/
I posted an article a while back about a DHTML engine I put on GitHub. I included an example game called Bombada that's also on GitHub. Note: the engine isn't "HTML5" per se (which is becoming more of a buzzword than makes sense) and I've moved on to a canvas engine (which will someday also be open source).
Even better, there was recently a game development contest on Boing Boing which saw 9 pretty cool entires. Ours was called Onslaught! and was written in JavaScript using canvas (though it does fall back to flash for audio).
I've got some substantial experience writing games in JavaScript and HTML5. To me, the biggest hurdle right now is audio. Somebody mentioned the inability to go fullscreen, and while I've seen that handled by the video tag, to me it's not as big a problem as the audio tag being basically unusable for gaming purposes.
The link posted up top, http://www.html5games.com/ is full of html5 games- they seem to be written in js but are being powered by the html5 canvas element. Not sure why some people think there is no html5 being used. Effectgames.com, on the other hand, does NOT use html5. The thread starters game also uses tr HTML5 canvas element.
I'm a little surprised that nobody has mentioned 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.
Overlord, it's funny, I have the same bookmarks.
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's only for creating 2.5D games like The Sims and therefore not a general purpose game/graphics API. And the second one, while it looks like a good start is only in version 0.1 and doesn't seem to have been updated since 2008. Plus, by the author's own admission, it is not really usable for games because "coding games in JavaScript requires other methods to get games running smoothly" and is just about "about fun and experimenting."
Well hopefully you and I will keep looking, and eventually the community will come together to create an HTML 5 graphics API. Lets keep each other posted!
How many more years will slashdot have an off-by-one error on your Score in your profile?
Wait wait, what?! Java is great for creating games. If you check out the state-of-the-art 3D accelerated stuff, you'll find games that are the equivalent of Quake, TeamFortress2, Doom3, etc..
The problem is, people don't want to download a 50MB browser plugin.
How many more years will slashdot have an off-by-one error on your Score in your profile?
http://pyjs.org/examples/asteroids/output/Space.html
using pyjamas http://pyjs.org/
what ever happened to Java games? there are bindings to 3d acceleration and its installed pretty much every where. so where are all the java games?
http://battlecell.com
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 definitely handle more than flash. Flash's 3D handling is rather primitive (but has been improving in the latest releases), and Flash does have slower code execution than Java, so code-heavy games (chess games, flight sims, etc) would also benefit from Java over Flash.
Stylish sheet to fix many problems in Slashdot's D3: https://gist.github.com/801524
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.
http://techcrunch.com/2010/04/01/google-html5-quake/
so flash is the visual basic of the web?
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 language. Like all decent dynamic languages ECMAscript (and thus both Javascript and Actionscript) permits procedural, object-oriented, and even functional programming paradigms. However, the extensions to ECMAscript include more traditional OO support than ECMAscript alone provides, making it possible to avoid many of the unusual idioms javascript OO design requires.
One interesting feature of Actionscript is the optional static typing. While the language is fundamentally dynamically typed, it provides the option of specifying static types on variables and function/method arguments. This primarily allows for better optimization, but also allows for better static analysis, including "compile-time" checking for certain kinds of type errors.
Thus a program can initially be designed using dynamicly typed variables for ease and speed of initial development, and later be slowly migrated to static typing during maintenance, providing the benefits of "compile-time" type-checking, as well as performance benefits. Even then, it is not necessary to commit to being fully statically typed, letting one leave dynamic those parts of the code that would benefit from that.
Thus the language itself is not one that an experienced developer would feel constrained in, nor would it be one they would feel embarrassed to use (which is very different to VB).
Stylish sheet to fix many problems in Slashdot's D3: https://gist.github.com/801524
http://en.wikipedia.org/wiki/Freeciv.net
That's all HTML5, and I'm pretty sure it's been mentioned here on /.
Pluralitas non est ponenda sine neccesitate
Thank you, that's a really good reply. I'd also been wondering if Flash were a Visual Basic of the web, but without the shame, if you know what I mean. But I was sort of too shy to ask because it might've been a stupid question. And you all ARE a rough crowd at times!
This is actually one of slashdot's better threads.
tempus fugit
Related question, are there any JS libs that permit IE6 app forward compatibility with other browsers?
I know tobacco is bad for you, so I smoke weed with crack.