Donut : a javascript game engine experiment

Posted the 11th Jun. 2010.
Filed under Blog.
The RSS feed for comments is here.

  • 2010/09/03 tested on iPad :) . Actu­ally I’m quite hap­pily sur­prised by the result.

The other day, I was won­der­ing if I could cre­ate a sim­ple point and click game engine only with javascript… I ended up spend­ing a cou­ple of hours build­ing a sim­ple pro­to­type, with char­ac­ters I made for Yokata.

Test it here: Chara move test 0.0.1 (only char­ac­ter move­ments and sim­ple speech bub­ble)
The music of the demo is not by me. It has been made by the won­der­ful Ultra­syd.

It’s pretty rough for now, but I think the idea is there. No use or can­vas or any other fancy HTML5 fea­ture, just good old divs and Jquery for the animations.

It has been devel­opped with Fire­fox 3.6.2 on a Mac. There is a posi­tion­ing bug in Safari/Webkit and Chrome, I’m work­ing on it… (or if you have any idea, don’t hes­i­tate to mail me). This is fixed. I have no plan of sup­port­ing IE for now.

This is a work in progress, and should be updated fre­quently (well, depend­ing on my time of course).
For now, the only fea­tures are :

  • Click and go — lim­ited to a square area around the char­ac­ter.
    To do : make this round Done.
  • Back­ground scrolling
  • Col­li­sions with NPC, gen­er­at­ing dif­fer­ent type of events (sim­ple alert, dia­logue, etc.)
  • Ran­dom “jew­els” gen­er­a­tion for each level (not fea­tured in demo)
  • Login/logout (not fea­tured in demo)
  • Life, money, stats. (not fea­tured in demo)

To do :

  • Fix Safari/Chrome start posi­tion­ing bug Fixed
  • Col­li­sions with jewels
  • Add 1st plan with z scrolling.
  • Save posi­tion of char­ac­ter, back­ground, level
  • Make level build­ing dynamic
  • Add abil­ity to change character
  • Add sounds (ide­ally, with­out Flash)

Updates:

  • 2010/06/11: Added cookie sav­ing player posi­tion, back­ground posi­tion, and pro­file (left or right).

I called this “Donut”, because of the character’s face.

Com­ments and crit­ics welcome !

12 Comments

  1. kertz
    Posted September 1, 2010 at 12:04 pm | Permalink

    This is great… are you going to make the source available?

  2. Jérôme
    Posted September 1, 2010 at 5:02 pm | Permalink

    Thank you.
    It’s mostly JavaScript, so you already have acess to the source… The login part is very sim­ple PHP, no rocket sci­ence here :)

  3. kertz
    Posted September 2, 2010 at 2:54 pm | Permalink

    Jérôme,

    Oh sorry! I mean are you going to open-source this? I think this has a good future… I would be inter­ested to join the devel­op­ment if you are going to open-source it.

    cheers

  4. Jérôme
    Posted September 3, 2010 at 10:10 pm | Permalink

    I guess I can put every­thing on a SVN some­where if that’s what you mean :)
    Any com­ments sug­ges­tions etc. are of course welcome!

  5. kertz
    Posted September 6, 2010 at 4:08 pm | Permalink

    Yep that should be good :)

    This could be a bug, I can not see any text box for user­name and pass­word in the over­lay login box. :| I tried on FF and Chrome.

  6. Jérôme
    Posted September 6, 2010 at 4:22 pm | Permalink

    OK. I’ll do this :)
    con­cern­ing your remark, this is not a bug, but a pre­vi­ous ver­sion, which doesn’t include the login form. Should work on FF/Chrome/Safari/iOs

  7. kertz
    Posted September 6, 2010 at 11:08 pm | Permalink

    Great! I was just think­ing how about this with Google map in the back­ground and you can see all the peo­ple who are online at their exact place? Could be fun… and prob­a­bly you can walk around in the real map! Meet peo­ple who are nearby talk to them and such… add some real­ity to it, you can not walk a lot, you will lose energy after some­time… Haha could work as a Face­book game ;)

  8. axel
    Posted September 9, 2010 at 1:16 am | Permalink

    The login box dont shows in safari to. But its realy great!!!

  9. Jérôme
    Posted September 9, 2010 at 11:13 am | Permalink

    Thanks for your mail!
    The login form doesn’t show in ANY browser, since it’s not inte­grated to the live ver­sion yet :)

  10. Jérôme
    Posted September 9, 2010 at 11:20 am | Permalink

    I like the idea of using gmap to man­age the maps and the back­ground… V.3 is really flex­i­ble, and can be tweaked to dis­play almost any­thing. Not sure how I would inte­grate it tough…

  11. Sarah Minx
    Posted November 2, 2011 at 12:17 am | Permalink

    Hey there,

    I would love to have access to the source for this project. You did great! I am also an illus­tra­tor (and a web pro­gram­mer) but don’t want to code any­thing from the ground up. This would be a won­der­ful addi­tion to the web­site and allow peo­ple to “meet” my characters.

    I would love to give you credit! Please let me know if you would be will­ing to send the SVN.

    Thanks!

  12. Jérôme
    Posted November 5, 2011 at 5:01 am | Permalink

    Hey Sarah,

    basi­cally, you already have access to the JS part by check­ing the source of the demo. The code is quite ugly, and I never found time (and moti­va­tion, I con­fess) to clean it, so I guess that’s why I never put it on SVN/git/etc. — and wouldn’t rec­om­mend to use it in pro­duc­tion. Also, I used a mix of PNG and ani­mated GIF for ani­ma­tion, which I don’t think would be the best solu­tion now CSS3 and frame-based ani­ma­tion is more main­stream.
    The PHP part doesn’t add much: very sim­ple login, and a prim­i­tive in-game dia­log model thing, using CodeIgniter.

    What would you have in mind for your site?

Post a Comment

Your email is never shared. Required fields are marked *

*
*