diff --git a/README.md b/README.md index 02442b3..18ec2bd 100644 --- a/README.md +++ b/README.md @@ -1 +1,4 @@ -Simply game-helper for Dungeonslayers, written in HTML5 and JS \ No newline at end of file +Simply game-helper for Dungeonslayers, written in HTML5 and JS. + +All links are given from src-root, which makes it possible to run everything with some basic +HTTP-Server from this directory (i.e. 'python -m SimpleHTTPServer' or 'python -m http.server') \ No newline at end of file diff --git a/TODO b/TODO index 9277af5..24ecf60 100644 --- a/TODO +++ b/TODO @@ -1,5 +1,15 @@ ToDo for JSDSH: - Implement FrontEnd (Add Player, etc) ? - - Implement Player, Creatures - Background and Wall Editing/Importing - - Shoot, Attack + - Basic Modifiers + - on-the-fly-adding of characters + - traps etc. + - JSON instead of JavaScript importing + - second adventure + - "walking" distance (show with circle?) + - add avatars for players and monsters + - attack distance + - Testvalues > 20 + - Objects: Pass object to initializer + - Hitbox on "things" + - Instructions-page \ No newline at end of file diff --git a/assets/adv01/adv_01.js b/assets/adv01/adv01.js similarity index 90% rename from assets/adv01/adv_01.js rename to assets/adv01/adv01.js index a12d580..b1ca256 100644 --- a/assets/adv01/adv_01.js +++ b/assets/adv01/adv01.js @@ -1,10 +1,10 @@ { + // Setup play area start_init(400,387); - - var wall = []; - Crafty.background("url('/assets/adv01/adv01_bg.jpg') 100% 0"); + // Ojects get saved within an array primary for easier debugging + var wall = []; wall.push(Crafty.e("Wall").wall(0,0,150,37)); wall.push(Crafty.e("Wall").wall(242, 0, 160,39)); wall.push(Crafty.e("Wall").wall(130, 0, 115,11)); @@ -13,9 +13,10 @@ wall.push(Crafty.e("Wall").wall(40, 377, 360,10)); wall.push(Crafty.e("Wall").wall(390,0,10,387)); - var cur_sel; + var cur_sel; // "Pointer" to current selected creature var player={}; + /* iniitialize Players and creatures */ player["Gesina"]=new Player({"pname":"Gesina", "cname":"Aknya", "class":"Zauberin", "level":0, "experience":0, "race":"Mensch", "size":2}, {"body":6, "agility":6, "spirit":8}, @@ -41,6 +42,5 @@ {"x":200,"y":80,"w":20,"h":20,"col":"red"}, {"life": 8, "defense": 7, "ini":9, "walk":4.5, "melee":7, "shoot":0, "chant":0, "shoot_chant":0}); - end_init(); } diff --git a/index.html b/index.html index 4a83c10..c000801 100644 --- a/index.html +++ b/index.html @@ -18,11 +18,12 @@ + + - diff --git a/src/base_ui.js b/src/base_ui.js index faf8e1f..80f0c05 100644 --- a/src/base_ui.js +++ b/src/base_ui.js @@ -1,3 +1,4 @@ +// Currently, only one Adventure is selectable $(document).ready( function() { $('#game').hide(); $('#ui').hide(); diff --git a/src/jsds.js b/src/jsds.js index 6d0245e..30342e7 100644 --- a/src/jsds.js +++ b/src/jsds.js @@ -79,6 +79,8 @@ $('#ui').empty(); }; + // Probe-Function: checks, whether a given "effort" is succesfull, according to the rules of DS + // Not yet implemented: Tests for values larger than 20 var dice = function(probe) { var diceval = Math.floor(Math.random() * (21 - 1)) + 1; if ( diceval <= probe ) { @@ -86,23 +88,32 @@ } else { if (diceval === 20) { - alert ("Patzer!"); + alert ("Patzer!"); // We need alert here, because most "Patzer" + // affect gameplay (dropping equipement and so on) }; return 0; }; }; - // Own Classes for Creatures, etc + // Own Classes for Creatures, derived from the Basic Object class from above + // Creature is the base class for every "living" (or dead) "being" var Creature = Class.extend({ init: function(info,attributes,properties,drawinfo,battle){ - /* info: pname, cname,class, level, experience, race, size - * attributes: body, agility, spirit - * properties: strength, hardness, movement, skill, mind, aura - * drawinfo: x,y,w,h,col + /* info cotains basic information about a Creature: + * pname (playername), experience, race, size (as a categorie) + * + * attributes are personal values that don't change very often: + * body, agility and spirit + * + * properties may change more often, i.e. by weapon bonuses: + * strength, hardness, movement, skill (in a crafty way), mind, aura + * + * drawinfo contains informations needed for graphical representation: + * x,y,w,h,col,cx,cy (Coord. of center) */ - this.info = {"pname": info["pname"]+"", "experience": info["experience"]*1, "race":info["race"]+"", - "size":info["size"]*1}; + this.info = {"pname": info["pname"]+"", "experience": info["experience"]*1, + "race":info["race"]+"", "size":info["size"]*1}; this.attributes = {"body": attributes["body"]*1, "agility": attributes["agility"]*1, "spirit": attributes["spirit"]*1}; this.properties = {"strength": properties["strength"]*1 , "hardness": properties["hardness"]*1, @@ -111,13 +122,18 @@ this.graphelement = Crafty.e("Creature").creature(this.info["pname"],drawinfo["x"],drawinfo["y"], drawinfo["w"],drawinfo["h"],drawinfo["col"]); + /* Battle-info may either be set as an argument, or need to be calculated from attributes + * and properties + */ this.battle = {}; if(battle) { this.battle={"life": battle["life"]*1, "defense": battle["defense"]*1,"ini":battle["ini"]*1, - "walk": battle["walk"]*1, "melee": battle["melee"]*1, "shoot": battle["shoot"]*1, - "chant": battle["chant"]*1, "shoot_chant": battle["shoot_chant"]*1}; + "walk": battle["walk"]*1, "melee": battle["melee"]*1, + "shoot": battle["shoot"]*1, "chant": battle["chant"]*1, + "shoot_chant": battle["shoot_chant"]*1}; } else { + // This is given by DS-Rules this.battle["life"] = this.attributes.body + this.properties.strength + 10;; this.battle["defense"] = this.attributes.body + this.properties.hardness; this.battle["ini"] = this.attributes.agility + this.properties.movement; @@ -127,11 +143,19 @@ this.battle["chant"] = this.attributes.spirit + this.properties.aura; this.battle["shoot_chant"] = this.attributes.spirit + this.properties.skill; }; + /* Some special attributes: We need two "life" variables, one to have the maximum value + * (the one within battle), the other to see whether a character is dead or unconscious. + */ this.life = this.battle["life"]*1; + /* Curent attack and whether it is defendible + */ this.att = "melee"; this.defendible = true; }, + /* Attack by now follows only basic rules, the gamemaster has to be sure that an attack is allowed + * (distance), and that no modifier applies (distance-shot, other targets within range) + */ attack: function(enem) { clearoutput(); var output=$('#output'); @@ -163,6 +187,7 @@ }; output.append("Schaden: "+attack_val+"
"); enem.life -= attack_val; + // If an "enemie" dies, he should really die, a player-char should only get "unconcious" if( enem.life <= 0 ) { if ( enem.enem ){ output.append(enem.info.cname + " ist besiegt
"); @@ -176,6 +201,7 @@ } }, + // The next three funcs are self-explaining die: function() { this.graphelement.destroy(); delete(player[this.info.pname]); @@ -192,6 +218,8 @@ } }, + + // Write out the UI for attack-selection, including binding. sel_att: function() { var outstr="

"; outstr += "Angriffstyp?
"; @@ -214,13 +242,14 @@ $("#"+this.att).get(0).selected="true"; } }); - + + // Maybe the most important class in here var Player = Creature.extend({ init: function(info,attributes,properties,drawinfo,battle){ // x,y,w,h,col) { - /* info: pname, cname,class, level, experience, race, size - * attributes: body, agility, spirit - * properties: strength, hardness, movement, skill, mind, aura - * drawinfo: x,y,w,h,col + /* Additional to Creature, Player has: + * info: Charactername, Class (Human? Elve), Level + * extern: for battle modifiers such as weapons + * An info-function printing the basic informations */ this._super(info,attributes,properties,drawinfo,battle); this.info["cname"]= info["cname"]+""; @@ -248,12 +277,11 @@ }); var Beast = Creature.extend({ - init: function(info,attributes,properties,drawinfo,battle){ // x,y,w,h,col) { - /* info: pname, experience, race, size - * attributes: body, agility, spirit - * properties: strength, hardness, movement, skill, mind, aura - * drawinfo: x,y,w,h,col - * battle: life, defense,ini,walk,melee,shoot,chant,shoot_chant + init: function(info,attributes,properties,drawinfo,battle){ + /* Additional to Creature, a Beast has: + * Cname for compability reasons in some functions, set to match pname + * the "enem"-bool, specifying it as an enemy that really dies + * A print-function as in Player */ this._super(info,attributes,properties,drawinfo,battle); diff --git a/src/jsds_crafty.js b/src/jsds_crafty.js index 348fbb0..0baaafe 100644 --- a/src/jsds_crafty.js +++ b/src/jsds_crafty.js @@ -1,7 +1,7 @@ { // For Hitbox-Dbg: Add WiredHitBox to Components of the corresponding objects, - // and uncomment the section in - + + // Basic properties of Walls (they are black, and do have a hitbox) Crafty.c( "Wall", { init: function() { @@ -22,6 +22,8 @@ } ); + // Thing may later be used for treasuries, then it would need a hitox itself. + // old_pos is used for distance calculations. Crafty.c( "Thing", { init: function() { @@ -44,6 +46,7 @@ } ); + // Creatures are players as well as monsters. They may be moved either by mouse, or by fourway-buttons. Crafty.c( "Creature", { init: function() { @@ -57,18 +60,31 @@ .collision() .fourway(4) .onHit("coll", function(hb) { + /* If object hits something it shouldn't, release it from influence of mouse + */ this.stopDrag(); if (hb[0].normal && (! isNaN(hb[0].overlap)) ) { + /* If it ends up overlapping with oneo r several other objects, + * push it back as long as necessary + */ do { var nor=hb[0].normal; var ol=hb[0].overlap; this.x += Math.ceil(nor.x * -ol); this.y += Math.ceil(nor.y * -ol); } - while( (hb=this.hit("coll")) && (this.hit("coll")[0].normal) && (this.hit("coll")[0].overlap) ); + while( (hb=this.hit("coll")) && (this.hit("coll")[0].normal) && + (this.hit("coll")[0].overlap) ); } }); - + calc_center(); + + /* Mouse-actions: + * left click: select creature, save old position, make only this creature + * controllable by mouse, write output info + * right click: If current selected creature, show battle menu, + * otherwise just attack (by now) + */ this.bind('MouseDown', function(e) { if(e.mouseButton === Crafty.mouseButtons.LEFT) { this.old_pos["x"]=this.x; @@ -91,10 +107,16 @@ }); return this; + }, + calc_center: function() { + this.cx = this.x + (this.w / 2); + this.cy = this.y + (this.h / 2); } } ); + /* function for basic setup: creates canvas and small boxes that keep ojects on it + */ var start_init = function(w,h) { var width=w || 500; var height=h|| 400; @@ -108,6 +130,8 @@ }; + /* At the end, disable mouse-control for all creatures + */ var end_init = function() { Crafty("Creature").each( function() { this.disableControl();