The best kittens, technology, and video games blog in the world.

Monday, December 24, 2007

Javascript version of jrpg

I have just written a very small Javascript version of jrpg, which can be accessed here:



If you want to try it out, you will need a decent browser like Firefox 2, and Japanese fonts. It might work with other browsers, but I haven't done any testing yet. Just like in pygame version you can move around using arrow keys, and if they don't work by using numeric keyboard with numlock on. Battles are fought by keyboard and enter key.

The game is a very small demo, allowing you to only go around a very small map, collecting coins and fighting hiragana demons. Most of the cool features from the full pygame version are not implemented, so if you haven't seen it yet go ahead and download it. I did it because I wanted to see what's possible with pure Javascript+CSS, and relearn modern Javascript.

Things I learned from the experience:
  • I really like jQuery. Mixing DOM and jQuery operations could be made somewhat easier, but even without that jQuery really greatly improves the code.
  • Declarative specifications of presentation and semi-declarative specifications of behaviour are extremely convenient way of creating user interfaces. They definitely beat pygame in convenience.
  • Having fully powerful layout engine, and font engine is a great improvement over pygame.
  • Javascript's OO system is quite nice to use in spite of being so different from other OO systems. Definitely beats Java's.
  • Functional programming in Javascript is possible, but much more painful than in any other language I know due to its strictly C-like syntax, except for the languages which do not support functional programming at all like Python, Java, or Prolog. It would be nice if future version of Javascript at least introduced implicit return, and renamed function to fun. Compare Javascript foo.map(function(x){return x+1}) with hypothetical improved Javascript foo.map(fun(x){x+1}) and Ruby foo.map{|x| x+1}. Bad syntax discourages using high order function a lot, and creating your own high order functions even more.
  • Destructuring assignment is an awesome feature that is not normally noticed when it's there, but it hurts a lot when it's missing.
  • Lack of string interpolation makes string building code look like crap.
  • Firebug is even more awesome than I thought.
I'm not sure how far I'd like to go with the experiment. I don't see any reasons why jrpg couldn't be reimplemented in Javascript+CSS, and it would definitely expand the possibilities, especially with displaying messages. On the other hand performance might be much worse than pygame version (or not), and standalone application is in many ways more convenient than a web-based one (fonts can be bundled, no browser upgrade needed).

3 comments:

Anonymous said...

Nice, but I couldn't play the game, tried from Safari 3 and Firefox 2.0.0.11 and neither of them responded to the keys. I think I don't have Japanese fonts, so that may be the problem.

About JS 'implicit' return, the EcmaScript 4 proposal has "lambdas" that omit the braces and the return. So you could do foo.map(function(x) x + 1);

I agree that function is a bit long, but it's not that much more than python/ruby's lambda :)

taw said...

Arrow keys work on some computers but not all. Press numlock and use numeric keyboard.

If you don't have Japanese fonts you'll simply see standard replacement characters (squares or question marks) in battle mode, in shouldn't break anything else.

Anonymous said...

Check out maplist/2, maplist/3, sublist/3, forall/2 and related predicates in Prolog, which allow for functional programming style, including a notation similar to currying in Haskell. Logic programming is a proper superset of functional programming, since functions are a special kind of relations.