Temple of The Roguelike Forums

Development => Programming => Topic started by: languard on March 26, 2011, 10:14:42 PM

Title: HTML5 RougeLIke
Post by: languard on March 26, 2011, 10:14:42 PM
First has anyone done one yet?  Currently revving up one myself to A)Get experience programming a RL before inflicting them on my students B)To learn the CANVAS tag and HTML and it's always good to see what else has been done before.

Second, is there a common tweet tag for RL development?  #rougelike has nothing, nor does #rougedev.  Those are the two hash tags I was going to use, and will use I guess if there isn't something out there yet.
Title: Re: HTML5 RougeLIke
Post by: Ancient on March 27, 2011, 12:42:55 AM
Cardinal Quest (http://www.tametick.com/cq/) is one such game.

There is nothing under these tags because you are misspelling it. it roGUe, not roUGe.
Title: Re: HTML5 RougeLIke
Post by: languard on March 27, 2011, 12:49:47 AM
*facepalm* Spelling error.  Of course.  Thanks for the link as well :)
Title: Re: HTML5 RougeLIke
Post by: Ancient on March 27, 2011, 07:43:49 PM
You are welcome. The rogue/rouge mishap is so common nobody gets upset when this happens. There is even The Roguelike (http://roguebasin.roguelikedevelopment.org/index.php?title=The_Rougelike!) 7DRL and POWDER was actually named under this inspiration. You know, rogue is misspelled as rouge, rouge is a kind of powder so ... POWDER!

Enough ranting, you may wish to check out another HTML5 roguelike I remembered:
A Little Anxious When It's Dark (http://roguebasin.roguelikedevelopment.org/index.php?title=A_Little_Anxious_When_It%27s_Dark) has a CSS3/HTML5 HUD. Beware, it is very demanding in regards of minimum system requirements because it also uses WebGL.
Title: Re: HTML5 RougeLIke
Post by: languard on March 27, 2011, 08:44:07 PM
Well I'll have to wait until I get home to test the second one out.  This netbook is not exactly what you would call a gaming machine ;)   Do love the Iron Maiden reference though. Oddly enough Cardinal Quest crashes FireFox almost constantly, so I wasn't able to try it out very much.

Still nothing under the #roguedev tag, so I'll start using that on twitter.

For anyone that is interested, I'll be blogging about the development of webrogue at http://webrogue.blogspot.com/ (http://webrogue.blogspot.com/), and the project website is http://WebRouge.languard.kodingen.com/index.html (http://WebRouge.languard.kodingen.com/index.html).  At the moment there is nothing there other than some ultra basic info.  Will be changing soon though.
Title: Re: HTML5 RougeLIke
Post by: siob on March 29, 2011, 11:22:00 AM
Unclear if it yet qualifies as rogue but I'm developing this with GameJs (canvas + js):

http://apps.gamejs.org/rtsimple/

control with mouse
Title: Re: HTML5 RougeLIke
Post by: languard on March 29, 2011, 02:27:47 PM
@Ancient: How strange, can't load up Anxious on my work machine  :-\  Using Chrome 10, and I can play Crysis, but not a web-based RL.  Technology is grand sometimes  :D

@siob: Thanks for the link.  My first thought was: oh great it's broke on FireFox.  Then 20 seconds later it finally started.  In dev, I know, but you really need to improve that load time, or give a status bar or something.  Attention spans on the web are oooo shiny video....

*coughs* Where was I?  Oh right, improve the load screen  ;)  The GameJs looks interesting as well.

My first round of experimentation is going to be with vector based graphics and the Dojo Toolkit.  I like the UI that you can do with Dojo, so we'll see how that goes.  Hopefully I'll something up later today that is playable.
Title: Re: HTML5 RougeLIke
Post by: Ancient on March 29, 2011, 06:04:58 PM
Anxious has caused a lot of head scratching for us in the reviewing committee too. Half of us were unable to run this. People who were initially assigned to this all happened to belong to that very group.
Title: Re: HTML5 RougeLIke
Post by: languard on March 30, 2011, 04:30:05 AM
Update on blog: goo.gl/eHMbU (http://goo.gl/eHMbU)  Nothing much.  Backing off on vectors due to low support, started work on core.js.  Hopefully something playable tomorrow.
Title: Re: HTML5 RougeLIke
Post by: siob on March 30, 2011, 07:31:29 AM
Anxious has caused a lot of head scratching for us in the reviewing committee too. Half of us were unable to run this. People who were initially assigned to this all happened to belong to that very group.

regarding webGL: even if you have chrome or firefox4, your GFX card must be supported and I know that ff4 is still blocking a lot of them due to open bugs.

Maybe in half a year most combinations of browsers/cards work.

edit @languard, this has a ton of up2date info about different JS engines / frameworks / tools: https://github.com/bebraw/jswiki/wiki/
Title: Re: HTML5 RougeLIke
Post by: languard on April 03, 2011, 02:56:59 AM
Perhaps someone knows of a better solution, but I found a good solution on the net for including javascript files:

Code: [Select]
//Function posted by jawednazarali
//taken from: http://forums.digitalpoint.com/showthread.php?t=146094
//Attribution added by Languard
function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';

head.appendChild(script)
}

Finally getting a chance to work on it tonight.  Experimenting with using arrays of functions and a factory system to make the engine easily moddable/expandable.
Title: Re: HTML5 RougeLIke
Post by: languard on April 04, 2011, 02:51:31 PM
JavaScript doesn't support associative arrays, which is very aggravating because the system I had envisioned used them.  Ah well, such is life I suppose.
Title: Re: HTML5 RougeLIke
Post by: siob on April 07, 2011, 12:44:31 PM
JavaScript doesn't support associative arrays, which is very aggravating because the system I had envisioned used them.  Ah well, such is life I suppose.

maybe I misunderstand, but javascript has nothing but assoc arrays:

var test = {
   "aRandomKey": 123,
   234: true
};

regarding javascript loaders, may I suggest: RequireJs.

No offense, but you don't seem to have much JS knowledge ;) May I suggest this as intro material: https://developer.mozilla.org/en/A_re-introduction_to_JavaScript

If you want a pure reference doc: https://developer.mozilla.org/en/JavaScript/Reference
Title: Re: HTML5 RougeLIke
Post by: languard on April 07, 2011, 02:30:47 PM
*laughs* No offense taken.  It's been 10+ years since I've worked with javascript, and I never was very heavily into the language.

What you posted is an object if I understand the language correctly, not an array.  I can do the same thing in C#:
Code: [Select]
class test
{
  int aRandomKey = 123;
  bool _234 = true;
}

A few minor syntax differences, but the same thing.  Those are objects, not arrays.  Arrays use the [ ] brackets for access, so it would look like this: someArray["akey"] = something.  While that appears to work in JS, it doesn't really.  Not as a true array.
Title: Re: HTML5 RougeLIke
Post by: purestrain on April 07, 2011, 05:48:21 PM
Code: [Select]
var foo= new Array()
foo["z1"]="x1";
foo["z2"]="x2";
foo["z3"]="x3";

Should work in javascript afaik
Title: Re: HTML5 RougeLIke
Post by: languard on April 07, 2011, 07:08:34 PM
@purestrain:  It does and doesn't.  This article does a better job explaining than I can: http://www.hunlock.com/blogs/Mastering_Javascript_Arrays#quickIDX9 (http://www.hunlock.com/blogs/Mastering_Javascript_Arrays#quickIDX9)  The biggest problem is that the length property is 0 doing it that way, because you aren't really adding anything to the array.
Title: Re: HTML5 RougeLIke
Post by: purestrain on April 08, 2011, 06:36:25 AM
And the problem is you don't want to add size/count functionality?  ::)
Title: Re: HTML5 RougeLIke
Post by: siob on April 08, 2011, 03:07:12 PM
*laughs* No offense taken.  It's been 10+ years since I've worked with javascript, and I never was very heavily into the language.

What you posted is an object if I understand the language correctly, not an array. 

<cut code>

  While that appears to work in JS, it doesn't really.  Not as a true array.

what do you mean - not as a "true array"? do you miss the array functions map(), forEach() or in what way is it not behaving like an array for you?

in JS, there is no difference between an array and an object. everything is a "hash" or "associative array" (except the basic types bool, number, etc).

try this in your browser or take a peek at the manual hehe
Code: [Select]
>typeof []
"object"
>typeof {}
"object"
Title: Re: HTML5 RougeLIke
Post by: siob on April 08, 2011, 03:11:42 PM
Arrays use the [ ] brackets for access, so it would look like this: someArray["akey"] = something.  While that appears to work in JS, it doesn't really.  Not as a true array.

ah! the brackets. you can use those for "objects" too!

var foo = {bar: 1}

can be accessed as foo['bar'] or foo.bar
Title: Re: HTML5 RougeLIke
Post by: languard on April 08, 2011, 03:54:14 PM
0.o  javascript is weird :p  At least for my C++/C# oriented mind  ;D  Hmm..random idea, write a book for game development using javascript...interesting, but need to learn the language better first :)  Wasn't aware that arrays returned as objects.  Could use typeof to generate a list of valid function names to differentiate between functions and other data types....

Be back in a bit...
Title: Re: HTML5 RougeLIke
Post by: languard on April 12, 2011, 04:11:31 PM
OK so that was more than a bit  ;D  Blog updated: goo.gl/eHMbU (http://goo.gl/eHMbU).  Short summery, I almost have the BSP dungeon algorithm complete.  Just need to connect the rooms and toss in some UI and it will be done.  Going to focus on getting this finished, then getting the player moving through the dungeon.

Question: Anyone know of a good rng for javascript?  My Google-foo is failing me on this.  I never trust the default rng's because they are almost never good, but I'd really rather not implement one myself.  Those things are really easy to screw up.

Edit:  I also need one so I can control the seed value.  Don't see a way of doing that with Math.random
Title: Re: HTML5 RougeLIke
Post by: Hi on April 12, 2011, 04:45:51 PM
you do indeed need to implement it yourself if you need the seed
Title: Re: HTML5 RougeLIke
Post by: kipar on April 12, 2011, 06:22:45 PM
I think Mersenne Twister is good enough. I haven't seen it's implemenations in JS, but the code isn't too long.
Title: Re: HTML5 RougeLIke
Post by: siob on April 13, 2011, 02:26:19 PM
simple random number generator for JS: https://gist.github.com/917633

enjoy :)

ps.: I recently found this good & fast perlin noise generator, might fit you: https://gist.github.com/304522
Title: Re: HTML5 RougeLIke
Post by: languard on April 13, 2011, 04:27:20 PM
simple random number generator for JS: https://gist.github.com/917633

enjoy :)

ps.: I recently found this good & fast perlin noise generator, might fit you: https://gist.github.com/304522

*looks at siob funny* you do realize that 'rng' has a period of 8 numbers, right?

In all seriousness, I do thank you for try to help.  Problem is that it almost a guarantee that a home-brew rng like that is going to fail and fail hard.  Even Math.random() fails hard if you run it through the ENT test: http://www.fourmilab.ch/random/ (http://www.fourmilab.ch/random/)

@kipar: It is looking like I'll have to implement mersenne twister.  Need to post my implementation someplace, I'm still have trouble comprehending that one doesn't already exist  :o
Title: Re: HTML5 RougeLIke
Post by: languard on April 13, 2011, 07:33:50 PM
I knew I couldn't be the only person wanting this.  https://gist.github.com/300494 (https://gist.github.com/300494)  Mersenner Twist in javascript :)
Title: Re: HTML5 RougeLIke
Post by: siob on April 13, 2011, 07:46:03 PM
simple random number generator for JS: https://gist.github.com/917633

enjoy :)

ps.: I recently found this good & fast perlin noise generator, might fit you: https://gist.github.com/304522

*looks at siob funny* you do realize that 'rng' has a period of 8 numbers, right?

In all seriousness, I do thank you for try to help.  Problem is that it almost a guarantee that a home-brew rng like that is going to fail and fail hard.  Even Math.random() fails hard if you run it through the ENT test: http://www.fourmilab.ch/random/ (http://www.fourmilab.ch/random/)


lol okay, i forgot rogue programmers are serious about this kind of stuff. at least the perlin noise lib i mentioned is more decent.
Title: Re: HTML5 RougeLIke
Post by: languard on April 21, 2011, 09:45:25 PM
BSP Dungeon Algorithm Implemented.  ABOUT F***ING TIME!!1!!11!  716 lines of code in the main bsp.js file.

My word but that was a Trial by Fire introduction to the JavaScript language.  I'll work on a blog post about the process, but for now if you wish to see it: goo.gl/VCr9H (http://goo.gl/VCr9H)  The yellow lines are the rooms.  The options don't really work at them moment, so touch them at your own risk.
Title: Re: HTML5 RougeLIke
Post by: languard on April 26, 2011, 03:36:48 AM
Blog updated.  Once I get Firebug, and once I stopped fighting the dynamic nature of javascript, things went a lot smoother for me.

Now to convert the generated dungeons into playable format.  Each pixel of the current display will represent one tile in the game of course.  As I plan on using 16x16 tiles, this represents a very large play area as I have it configured.
Title: Re: HTML5 RougeLIke
Post by: ondras on June 28, 2011, 08:55:14 AM
First has anyone done one yet?  Currently revving up one myself to A)Get experience programming a RL before inflicting them on my students B)To learn the CANVAS tag and HTML and it's always good to see what else has been done before.

http://ondras.zarovi.cz/js-like/ :)