Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Diablo in JavaScript (mitallast.github.com)
281 points by sebkomianos on Feb 18, 2013 | hide | past | favorite | 113 comments


Not a commentary on this project per se, but I can't help but think when I see "X in javascript" voted up that the implicit frame is: "isn't it impressive what you can do in javascript now?"

But if you flip that statement on its head, the equivalent is "The web has finally caught up with what we could do on a 1997 desktop!"


I've had this sentiment from 1996 on. I worked for a company creating Internet materials for use in classrooms (Internet-on-CD, books, etc.). I remember seeing a "frog dissection" thing on a website and everyone seemed to impressed with it. Why? You'd click a gif, it'd run a CGI and deliver a new image. Just what you could do with actual clients, just slower, more limited, and lower resolution.

There's something neat about "X in Y" for some technical novelty (like emulators) but I don't get the excitement in general.


This has been stated a million times, and I'm not even a "web developer" like the majority here seems to be, by my take is this: not needing a client is the win.

There's a huge amount of value, as perceived by "users" of the services/applications/games, in not having to care about and install a specific client for each service/application/game.

That's why it's noteworthy when something that used to require a heavliy specialized client, such as a game, no longer does for delivering the same experience.


The next logical step is Diablo in CSS3.


This is done in canvas, but a lot of games are done in CSS3 - using 3D transforms and CSS animation, it's very feasible.

Of course, it's much harder to do a game in pure CSS, like this crazy thing http://jsdo.it/GeckoTang/4rXg


That made me giggle. I'm sure someone is working on it.


Agreed. The worst part is that, as far as I can tell, this isn't actually Diablo. So we can't even claim a foothold on 1997.


I like the Github description: 'Isometric minimal-code style game at html5 canvas and javascript'. I guess Diablo is being used as a shorthand for that.


This link wasn't submitted by the author, FWIW


Well that IS pretty neat that a browser can do what a 1997 desktop can do. Browsers are much more portable than a 1997 desktop.


In theory they are but most "Look what we can do with JavaScript now!" posts are quickly followed by "only works correctly in Chrome Canary" or "only works correctly in latest Firefox nightly".


This works pretty nice in the most used browser in the world (Chrome last release), that is a win in my book.


And the original worked pretty nicely in the most used operating system in the world (Windows), when it was released. But pointing this out just proves my original point that the openness of web standards isn't all that it is cracked up to be.


I do believe that Windoze stopped being most used operating system in the world (hint: android)


The code is pretty much open (even commented and well organized) and It can fairly easy be changed to SVG to support pretty much every modern browser. Open enough for me.


Dead Space 3 wasn't created by 1 person in their spare time. But by all means, don't let that temper your cynicism.


I meant it as a commentary on celebrating javascript in general, not on this person's project.

It's not cynicism I feel, it's dissatisfaction. I /want/ to use the web for powerful things, but the limitations of javascript make many of those things impractical. Hence my ambivalence towards "x in javascript"


[deleted]


Java applets, Native Client, and ActiveX all (imperfectly) address this problem.

We have long had trouble agreeing on a standard for web-based native code. But that doesn't mean that it's a senseless request. The exalted status of Javascript is merely a convenient local optimum.


What exactly makes it impractical to do powerful things? You may have disdain for certain language features but I don't understand how that makes it impractical.

Most of the tech demo's we're seeing coming out of the JS crowd are from people who have only just started using the WebGL API (which is still experimental). I'm extremely excited to see the things that experienced OpenGL developers will be able to do as the API becomes more mainstream.


Neither was this. Let's face it a clone is much different from creating a game from scratch. Not only that, but Dead Space 3 would be a far more complicated game to create than Diablo, even starting from scratch.


To keep on rolling and flip the statement again, it seems closer to "look, I can build Tetris on my wristwatch":

in order to make your statement, you have to ignore the state of a web browser running on a 1997 vintage desktop.


The implicit frame of the implicit frame might be "so let's move everything into the browser".

Look at it from the perspective of someone who just wants to use a computer for something a computer could do in 1997. Doing it in a browser today would still sometimes be a downgrade from doing it in a (well written) native application in 1997.

I am eager to seeing how much of a difference asm.js can make.


The me in 1997 would be pretty happy to know that the game would be playable by virtually every computer user in the world by clicking a link.


Well, every user using Chrome.


With a reasonably modern computer and internet access.


I totally agree that doing something ins browser today would be worse than the 1997 era native app equivalent....

... but to agree with a sibling comment: wow-- you can just download the code in, like 10 min? And I can read/modify it it because it doesn't even have to be compiled to run?

These were both two very big limitations on my user experience in 1997...

I'm not saying that we should move back to having everything run on a mainframe, but I suppose that in response to the "so what" I was responding to I offer "wow, man: there is something way different going on in a port of a technology than there is in the original."

/postmodernity


I was doing that in Smalltalk in 1995.


And the "purpose" that the "web" was serving back then.


Or that javascript has caught up with what you could do in flash about 10 years ago. ;)


If this isn't a comment about the project, then maybe you could step off the soapbox.


Yeah, only now with javascript we can transmit HD videos in realtime via webcam with Chrome or Firefox, just like in 1997... no wait... the cherry picking of an example went wrong on that one. But maybe we can still devalue Javascript by saying HD videos is a separate thing and that speed connections is more important than Javascript in that example?


That argument works for anything, as long as you can convince the browser vendors to implement support for it and provide it as an api. So I would argue that's much closer to the definition of cherry picking an example.


So I guess I can't talk about the DOM; many functions are just an API for it; and canvas is just an API for drawing accelerated by the CPU; so... Javascript is nothing and nothing can be blamed on it?


I'm just saying that the provision of video streaming as a web api is not a particularly technically interesting development. It's just a gradual beefing up of the browser as a thin client. And until support for the features are widespread, it's not really a commercially interesting development either.

I would class many of the other things you mention as incremental improvements of the rendering engine as a universal runtime. It's great that it's happening but it's not technically that exciting to me to see reimplementations of 16 year old games since we've had the flash runtime in the interim anyway.


Broken argument; flash is way too slow compared to the current version of Canvas; recently I made a full conversion of flash to canvas (was painful but) the performance is outstanding and the ability to interact natively and play nice with the DOM is invaluable.


The latest comparative performance of 2D drawing in one runtime vs another doesn't have anything to do with my argument.


> I'm just saying that the provision of video streaming as a web api is not a particularly technically interesting development. It's just a gradual beefing up of the browser as a thin client. And until support for the features are widespread, it's not really a commercially interesting development either.

You mean P2P connections? Oh we have that now in Firefox and Chrome. You mean video chats? Oh we have that. You mean thousands of libraries to create and develop videogames for the web? Oh we have that. You mean easily extensible browsers via plugins/extension? Oh we have that. I need you to be very specific about what we are lacking.


What the html platform is lacking? My last project was built around QT, OpenGL, CUDA and made extensive use of various C based linear algebra libraries and was ~20kloc of C++. I'm sure it could be reimplemented as a web app but it would be a strange decision to do so.

But that wasn't my point. My point was that just because the web allows you to do things that were possible on the desktop 10+ years ago doesn't make it interesting to me. And the fact that you can always add specific functionality to the runtime like video conferencing doesn't really address that.

I don't have to wait for browser vendors, I just start coding.


The desktop equivalent, CU-SeeMe, was working in 1994.


I tried it circa 1998. I wouldn't call it "working" even then.

Not to mention it needed installation (Javascript just needs people to go to a specific page), and the speed, lag and buffering was horrible at the time.


> speed, lag and buffering was horrible at the time

That has nothing to do with the software and everything to do with the network, no?


Of course not.

Even on the same network, different conference apps have different characteristics. It depends on the compression and coded they use, how they handle changes in network performance, etc.

Plus the GUI and UX of that app was simply horrible.



Random Javascript point and click game demo in alpha quality. Uses sprites ripped from Diablo 2. Other sprites from an unknown source. Not actually Diablo. Not anywhere close.


Random Javascript point and click game demo in alpha quality. Uses sprites ripped from Diablo 2. Other sprites from an unknown source. Not actually Diablo. Not anywhere close.

I thought it was really neat, I don't know what all your hate is about. I also like that the source code is friendly looking and you could show it to somebody new to coding to inspire them.


It's not hate. It's pointing out that it's not Diablo in JavaScript.


It's possible to point that out without being a total jerk.


I didn't get the feeling that aw3c2 was being a jerk. The demo really does use sprites ripped from Diablo and it's in alpha quality. I could neither move nor attack, all I could do is watch that first monster attack me and wait while it completely depleted my health, at which point I did not die but just continued to stand there. Tested on FF 18.


Try running it on chrome. I had the same experience with FF


The problem with this demo isn't that it's pretty alpha (and to be fair, it is, you can move, and attack, that's about it).

The problem is that it uses stolen assets from another game.

That is 100% not ok, even for a tech demo.

(...there are plenty of free game assets out there, creative commons license; drawing attention to yourself by stealing someone elses art is douche behaviour)


People sample audio all the time. This isn't a commercial project and sampling some sprites from a 13 year old game doesn't seem like it's going to impact Blizzard in any way. He should, of course, give the original creators credit in his README at some point (judging by the fact there is no README the project may be still undergoing development).


Sure, it's not a commercial interest thing, its just about ethics. :)

I'm not going to stand up and tell someone its mean and unethical put some harsh criticism out about a project which is in itself unethically stealing art assets and associating itself with a brand it has nothing to do with.

If you're happy to accept this project and what it's doing, you should equally be happy to accept it's going to get some flack for it. You can't have it both ways (doing this is ok even tho its unethical AND but its unethical to criticise it and that's bad).


It won't impact Blizzard but it's going to make it to the front page of HN. If the same demo was made with custom sprites, we would probably never have heard of it since it indeed doesn't do much.


He is sucking someone's else popularity! What an evil and selfish mind he has!


No, but it's sucking our "precious" time :) We're all thinking we're going to see Diablo in JavaScript, and then this...


Related question. Can I use the Quake 3 sounds for debugging purposes in my open source project? Or are they copyrighted and I would be doing something bad by including them in my project's folder.


You would commit copyright infringement. Check out the sounds of games like OpenArena, Sauerbraten, Zonotic, etc. Not good but ok as placeholders.


The "you can move" is questionable.


I don't blame him for being a bit frustrated though. I doesn't say anywhere that it doesn't support firefox. Was only able to move around and kill things when I switched to chrome.

OT: Gamers tend not to have a lot in between hatred and love to begin with, and if you're at all familiar with the current Diablo community, well, Diablo 3 hasn't brought out the most civil side of the fans.


HN != Battle.net forums, thankfully..!


Yeah, "0.9999... != 1" posts would never happen on HN :)


Have to agree 100% it looks more like runescape then it does diablo.


My bad - haven't actually played Diablo. (and I guess that's extra uncool points for me, but, yeah..)

Also, to clarify, I found this while browsing through http://gistflow.com (specific gist: http://gistflow.com/posts/201-diablo-js)


You click around to run around. You click on enemies. You click on dropped loot. Looks like Diablo to me. ;)


It's not that bad. If you go behind a building, it becomes transparent. Pretty close to Diablo. Of course it's a demo not meant to be a full blown game.


It's not the JavaScript part that is interesting, but the fact that it's running in a browser. In fact, "Diablo (alpha) in Browser" would've been a more appropriate title. And it's interesting because, well, it's programmed for a browser, which is made of open-standards.

And I know people will complain about how "we were doing this kind of stuff in the 90s", but I still think it's quite an accomplishment given that it's programmed at a much higher-level of abstraction than the original Diablo (which was C and some machine code).

But I still think it's stupid to have games in the browser. The browser does not take full advantage of the hardware - it shouldn't, it's made for content and information. Its priorities are security (sandbox) and accessibility.

So it's gonna be a while before we'll see games - that require lots of raw machine code processing - in the browser. Because in principle, if browsers give accessible raw processing power, they'll suffer on security. And it's proven really hard to have the best of the both worlds, otherwise today we would have mainstream cutting-edge graphic games available in the browser.

And we don't, we have 90s games.


The odd implication I get from this, is that somehow the original Diablo was not programmed against open standards. Is that on purpose?


Can't move in Firefox 18. What is so out of date with Firefox that this cannot work? I see more and more of these demos flat out not working in FF, but work fine in Chrome. What is the explanation?


Sometimes it is laziness on the part of the developer (i.e. only using webkit- prefixes on the new JS/CSS features, even though the moz- prefixed equivalent works perfectly), other times it just hasn't been implemented in FF yet (although sometimes the demos do work in the aurora/nightly versions).


WebKit is the new IE.


No -webkit- specific code in sight and the console shows no error; the worst kind of bug.

Edit: I found it; It is using the event property offSetX instead of a cross-browser property; if the developer or someone else want so fix: http://stackoverflow.com/questions/11334452/event-offsetx-in... [Line 151 in diablo.js]


Pretty cool. The full source code's on Github as well:

https://github.com/mitallast/diablo-js

The code's not commented very heavily, but it's pretty readable nonetheless.


Is this your code? I would like to contribute (I'm not so proficient with JavaScript though, but a huge fan of diablo. (usually re-install it every two years)


This is neat, but it's not really that big of a leap. Here is a thing I wrote in 2002, as I was just starting to learn to program. It's a little broken now because the character image didn't get archived, but you get the idea. A lot more was possible, I just didn't quite have the chops before I got distracted by my next project http://www.oocities.org/webspynner_99/games/RPG/rpg.html

The fact that browsers are still able to run my shitty code is kind of impressive.

But just sayin', it's nice to see this, but even in the "on the web" realm, it's not that big of a leap. It's more of an indication of how much network and processor speeds have advanced in the last 11 years than how much capability of web browser has.


I see a green blob and a blue blob.

What should do with it? :)


Framerate was a bit choppy for me. It ran smoother back in 1997. The open web still has a long way to go.


Cool, I guess. No instructions what-so-ever. Can we get some documentation on keys to use?


It appears to be Chrome only which might explain your problem with controls...

Edit: Yes, I did only test in Firefox and Chrome. According to the comments below, it appears to work for modern browsers except Firefox.


Man, I can understand people writing Firefox-hating demos if they're trying to show off some feature that recently landed in WebKit, I can almost understand it if they just did a weekend-hack and couldn't be bothered testing in any browsers other than their own.

I can't understand this - in 2013, how on earth do you break mouse events in JavaScript? We've had events like onmousedown working reliably across browser implementations for a decade or more, what on earth is going on?


The click handler is registered on the canvas and it checks e.offsetX. On Firefox, some people use e.layerX, but it's not exactly the same thing [0]. Someone posted a useful polyfill on JQuery's bugtracker [1].

Firefox should just support offsetX as well, but they don't, for whatever reason.

[0] https://bugzilla.mozilla.org/show_bug.cgi?id=122665#c3

[1] http://bugs.jquery.com/ticket/8523#comment:16


Works in IE10. Why do you say Chrome only?


Maybe he just tried Firefox and Chrome like me?


Works fine in Safari.


Well, click left and use 1-9 for drinking potions.

Nothing else is implemented - and that much is probably obvious for people who played a hack'n slay before.

But thinking about it, it is interesting how games explain their shortcuts in the interface.


This is Hacker News, hit F12!


By the gods... :)


Just another misleading HN titles to a technically uninteresting project. I believe this is a fair assessment.

Even if the goal was to showcase what can be done in JavaScript now, it's a rudimentary isometric visualization of animated sprites with very simple game logic (not even basic path finding).

Just to make it clear, regarding the creator and the project:

* Is there something bad with him creating something? No, not at all. Cudos to him for making something! Especially for making it open source. Let's anyone peek at how he has done what he has. Sweet.

* Is there something bad with with how he is doing it? Yes, he is using copyrighted graphics he doesn't own the rights to use.

Regarding this as HN:

* Is this technically interesting? No, not even remotely. Throwing graphics on a canvas and point-and-click basic game logic is not interesting. Point out to me a basic mechanic or implementation that isn't trivial (overlay of minimap is the most interesting thing that comes to mind).

* Is this aesthetically interesting? It would be, if it was original art. Seeing as it is just "borrowed" sprites, the optimal goal would be a screenshot of Diablo 2.

* Is the title accurate? No, not even remotely (there is much more to Diablo than sprites).

* Is the project anywhere finished and presentable? Maybe this just personal preference, but I don't like seeing other people's pre-alpha demos.

tl;dr: Stop wasting people's time with technically uninteresting posts with misleading titles alluding to the contrary, to projects using assets they shouldn't.


I can't wait for Far Cry 3 in Javascript.


Weird, controls worked in Firefox on Windows but not Firefox on Linux


This is so awesome. I loved Diablo growing up and it's amazing to see that it could be recreated using js. I'm interested to see what other games people will make using js.


There's a Diablo-like game also made in Javascript - http://www.smokymonkeys.com/triglav/. Unfortunately, as it was made more than five years ago, it's IE only (no ActiveX or installing anything necessary, though). Check out some screenshots on the "gallery" page it you don't feel like booting up IE.


One the one hand - great. On the other hand - we've been there ten years ago.


doesnt work on iPad in stock browser


Great! Now the browser finally caught up with MS-DOS games!


Diablo was a Windows game - it didn't run on MS-DOS.


You are right, I was just trying to point out the quality one gets out of so many layers instead of using desktop applications directly.


I look forward to the day when I can watch in-game footage of games, maybe replays from RTS games for example, in a game-engine in the browser.


Borrowing some sprites and textures from Diablo 2 is hardly sufficient to call this "Diablo in Javascript".


This is running on a ie10 on winrt surface , cool stuff good job to the maker (even touch is working)


This is pretty cool. It's obvious it's not a 1:1 port of the original, but still fun and entertaining.



Awesome work. It's a bit slow in FF but works fine in Chrome. A welcome screen would be helpful.


Fun fact: this just works in Opera


Wow, the switch to webkit was fast. :)


Anybody got some SOJ's for sale?


I got some, can you dupe me a GPOW? TPTPTPTP~~~^_^


I want Windforce bow. How much SOJ? ^_^


Great, but it would be excellent if there were instructions.


Click!


Doesn't work.


this must have been posted in HN before... NES emulator in javaScript http://fir.sh/projects/jsnes/


Where are the cows?


can not believe only 500 lines of code




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: