Merge branch 'doc'

Conflicts:
	src/base_ui.js
This commit is contained in:
Oliver Rümpelein 2014-10-07 12:02:03 +02:00
commit f0e2c17022
7 changed files with 101 additions and 34 deletions

View file

@ -1 +1,4 @@
Simply game-helper for Dungeonslayers, written in HTML5 and JS 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')

14
TODO
View file

@ -1,5 +1,15 @@
ToDo for JSDSH: ToDo for JSDSH:
- Implement FrontEnd (Add Player, etc) ? - Implement FrontEnd (Add Player, etc) ?
- Implement Player, Creatures
- Background and Wall Editing/Importing - 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

View file

@ -1,10 +1,10 @@
{ {
// Setup play area
start_init(400,387); start_init(400,387);
var wall = [];
Crafty.background("url('/assets/adv01/adv01_bg.jpg') 100% 0"); 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(0,0,150,37));
wall.push(Crafty.e("Wall").wall(242, 0, 160,39)); wall.push(Crafty.e("Wall").wall(242, 0, 160,39));
wall.push(Crafty.e("Wall").wall(130, 0, 115,11)); 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(40, 377, 360,10));
wall.push(Crafty.e("Wall").wall(390,0,10,387)); wall.push(Crafty.e("Wall").wall(390,0,10,387));
var cur_sel; var cur_sel; // "Pointer" to current selected creature
var player={}; var player={};
/* iniitialize Players and creatures */
player["Gesina"]=new Player({"pname":"Gesina", "cname":"Aknya", "class":"Zauberin", "level":0, player["Gesina"]=new Player({"pname":"Gesina", "cname":"Aknya", "class":"Zauberin", "level":0,
"experience":0, "race":"Mensch", "size":2}, "experience":0, "race":"Mensch", "size":2},
{"body":6, "agility":6, "spirit":8}, {"body":6, "agility":6, "spirit":8},
@ -41,6 +42,5 @@
{"x":200,"y":80,"w":20,"h":20,"col":"red"}, {"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, {"life": 8, "defense": 7, "ini":9, "walk":4.5, "melee":7, "shoot":0, "chant":0,
"shoot_chant":0}); "shoot_chant":0});
end_init(); end_init();
} }

View file

@ -18,11 +18,12 @@
<button id="load">Load</button> <button id="load">Load</button>
</div> </div>
<!-- Include 3rd-Party Libraries -->
<script type="text/javascript" src="lib/crafty.js"></script> <script type="text/javascript" src="lib/crafty.js"></script>
<script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script>
<!-- Own JS-Files -->
<script type="text/javascript" src="src/jsds_crafty.js"></script> <script type="text/javascript" src="src/jsds_crafty.js"></script>
<script type="text/javascript" src="src/jsds.js"></script> <script type="text/javascript" src="src/jsds.js"></script>
<script type="text/javascript" src="src/base_ui.js"></script> <script type="text/javascript" src="src/base_ui.js"></script>
<!-- <script type="text/javascript" src="" id="adv"></script>-->
</body> </body>
</html> </html>

View file

@ -1,3 +1,4 @@
// Currently, only one Adventure is selectable
$(document).ready( function() { $(document).ready( function() {
$('#game').hide(); $('#game').hide();
$('#ui').hide(); $('#ui').hide();

View file

@ -79,6 +79,8 @@
$('#ui').empty(); $('#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 dice = function(probe) {
var diceval = Math.floor(Math.random() * (21 - 1)) + 1; var diceval = Math.floor(Math.random() * (21 - 1)) + 1;
if ( diceval <= probe ) { if ( diceval <= probe ) {
@ -86,23 +88,32 @@
} }
else { else {
if (diceval === 20) { if (diceval === 20) {
alert ("Patzer!"); alert ("Patzer!"); // We need alert here, because most "Patzer"
// affect gameplay (dropping equipement and so on)
}; };
return 0; 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({ var Creature = Class.extend({
init: function(info,attributes,properties,drawinfo,battle){ init: function(info,attributes,properties,drawinfo,battle){
/* info: pname, cname,class, level, experience, race, size /* info cotains basic information about a Creature:
* attributes: body, agility, spirit * pname (playername), experience, race, size (as a categorie)
* properties: strength, hardness, movement, skill, mind, aura *
* drawinfo: x,y,w,h,col * 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"]+"", this.info = {"pname": info["pname"]+"", "experience": info["experience"]*1,
"size":info["size"]*1}; "race":info["race"]+"", "size":info["size"]*1};
this.attributes = {"body": attributes["body"]*1, "agility": attributes["agility"]*1, this.attributes = {"body": attributes["body"]*1, "agility": attributes["agility"]*1,
"spirit": attributes["spirit"]*1}; "spirit": attributes["spirit"]*1};
this.properties = {"strength": properties["strength"]*1 , "hardness": properties["hardness"]*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"], this.graphelement = Crafty.e("Creature").creature(this.info["pname"],drawinfo["x"],drawinfo["y"],
drawinfo["w"],drawinfo["h"],drawinfo["col"]); 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 = {}; this.battle = {};
if(battle) { if(battle) {
this.battle={"life": battle["life"]*1, "defense": battle["defense"]*1,"ini":battle["ini"]*1, 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, "walk": battle["walk"]*1, "melee": battle["melee"]*1,
"chant": battle["chant"]*1, "shoot_chant": battle["shoot_chant"]*1}; "shoot": battle["shoot"]*1, "chant": battle["chant"]*1,
"shoot_chant": battle["shoot_chant"]*1};
} }
else { else {
// This is given by DS-Rules
this.battle["life"] = this.attributes.body + this.properties.strength + 10;; this.battle["life"] = this.attributes.body + this.properties.strength + 10;;
this.battle["defense"] = this.attributes.body + this.properties.hardness; this.battle["defense"] = this.attributes.body + this.properties.hardness;
this.battle["ini"] = this.attributes.agility + this.properties.movement; this.battle["ini"] = this.attributes.agility + this.properties.movement;
@ -127,11 +143,19 @@
this.battle["chant"] = this.attributes.spirit + this.properties.aura; this.battle["chant"] = this.attributes.spirit + this.properties.aura;
this.battle["shoot_chant"] = this.attributes.spirit + this.properties.skill; 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; this.life = this.battle["life"]*1;
/* Curent attack and whether it is defendible
*/
this.att = "melee"; this.att = "melee";
this.defendible = true; 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) { attack: function(enem) {
clearoutput(); clearoutput();
var output=$('#output'); var output=$('#output');
@ -163,6 +187,7 @@
}; };
output.append("Schaden: "+attack_val+"<br>"); output.append("Schaden: "+attack_val+"<br>");
enem.life -= 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.life <= 0 ) {
if ( enem.enem ){ if ( enem.enem ){
output.append(enem.info.cname + " ist besiegt<br>"); output.append(enem.info.cname + " ist besiegt<br>");
@ -176,6 +201,7 @@
} }
}, },
// The next three funcs are self-explaining
die: function() { die: function() {
this.graphelement.destroy(); this.graphelement.destroy();
delete(player[this.info.pname]); delete(player[this.info.pname]);
@ -192,6 +218,8 @@
} }
}, },
// Write out the UI for attack-selection, including binding.
sel_att: function() { sel_att: function() {
var outstr="<p>"; var outstr="<p>";
outstr += "Angriffstyp?<br>"; outstr += "Angriffstyp?<br>";
@ -215,12 +243,13 @@
} }
}); });
// Maybe the most important class in here
var Player = Creature.extend({ var Player = Creature.extend({
init: function(info,attributes,properties,drawinfo,battle){ // x,y,w,h,col) { init: function(info,attributes,properties,drawinfo,battle){ // x,y,w,h,col) {
/* info: pname, cname,class, level, experience, race, size /* Additional to Creature, Player has:
* attributes: body, agility, spirit * info: Charactername, Class (Human? Elve), Level
* properties: strength, hardness, movement, skill, mind, aura * extern: for battle modifiers such as weapons
* drawinfo: x,y,w,h,col * An info-function printing the basic informations
*/ */
this._super(info,attributes,properties,drawinfo,battle); this._super(info,attributes,properties,drawinfo,battle);
this.info["cname"]= info["cname"]+""; this.info["cname"]= info["cname"]+"";
@ -248,12 +277,11 @@
}); });
var Beast = Creature.extend({ var Beast = Creature.extend({
init: function(info,attributes,properties,drawinfo,battle){ // x,y,w,h,col) { init: function(info,attributes,properties,drawinfo,battle){
/* info: pname, experience, race, size /* Additional to Creature, a Beast has:
* attributes: body, agility, spirit * Cname for compability reasons in some functions, set to match pname
* properties: strength, hardness, movement, skill, mind, aura * the "enem"-bool, specifying it as an enemy that really dies
* drawinfo: x,y,w,h,col * A print-function as in Player
* battle: life, defense,ini,walk,melee,shoot,chant,shoot_chant
*/ */
this._super(info,attributes,properties,drawinfo,battle); this._super(info,attributes,properties,drawinfo,battle);

View file

@ -1,7 +1,7 @@
{ {
// For Hitbox-Dbg: Add WiredHitBox to Components of the corresponding objects, // 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( Crafty.c(
"Wall", { "Wall", {
init: function() { 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( Crafty.c(
"Thing", { "Thing", {
init: function() { 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( Crafty.c(
"Creature", { "Creature", {
init: function() { init: function() {
@ -57,18 +60,31 @@
.collision() .collision()
.fourway(4) .fourway(4)
.onHit("coll", function(hb) { .onHit("coll", function(hb) {
/* If object hits something it shouldn't, release it from influence of mouse
*/
this.stopDrag(); this.stopDrag();
if (hb[0].normal && (! isNaN(hb[0].overlap)) ) { 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 { do {
var nor=hb[0].normal; var nor=hb[0].normal;
var ol=hb[0].overlap; var ol=hb[0].overlap;
this.x += Math.ceil(nor.x * -ol); this.x += Math.ceil(nor.x * -ol);
this.y += Math.ceil(nor.y * -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) { this.bind('MouseDown', function(e) {
if(e.mouseButton === Crafty.mouseButtons.LEFT) { if(e.mouseButton === Crafty.mouseButtons.LEFT) {
this.old_pos["x"]=this.x; this.old_pos["x"]=this.x;
@ -91,10 +107,16 @@
}); });
return this; 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 start_init = function(w,h) {
var width=w || 500; var width=w || 500;
var height=h|| 400; var height=h|| 400;
@ -108,6 +130,8 @@
}; };
/* At the end, disable mouse-control for all creatures
*/
var end_init = function() { var end_init = function() {
Crafty("Creature").each( function() { Crafty("Creature").each( function() {
this.disableControl(); this.disableControl();