user interface - Quintus JavaScript Programming GUI -

in simple javascript/html 5 game have believe update error don't know how fix. thing there no real error, not responding code how wanted to. problem is, want on screen gui displays number of enemies killed on map. far have gui there. here picture of game:

http://i.stack.imgur.com/0rx4d.png [this shows 3 enemies on screen, gui in top right corner, , player.]

now problem whenever kill enemy number should raise, of course doesn't. here code:

window.addeventlistener("load",function() {  var ekl1 = 0; // enemies killed level 1  var q = window.q = quintus()         .include("sprites, scenes, input, 2d, anim, touch, ui, tmx")         .setup({ maximize: true })         .controls().touch()  q.sprite.extend("player",{    init: function(p){      this._super(p, {       sprite: "player",       sheet: "player",       speed: 150,        x: 410,       y: 90      });      this.add('2d, platformercontrols, animation');       },     step: function(dt){       if(this.p.vx > 0){         this.play("walk_right");         this.p.direction = "right";       } else if(this.p.vx < 0){         this.play("walk_left");         this.p.direction = "left";       } else {         this.play("stand_" + this.p.direction);// + this.p.direction > 0 ? "right" : "left");       }      }   });  q.sprite.extend("enemy",{   init: function(p) {     this._super(p, {        sprite: "enemy",       sheet: "enemy",       vx: 100      });      // enemies use bounce ai change direction      // whenver run something.     this.add('2d, aibounce');      // listen sprite collision, if it's player,     // end game unless enemy hit on top     this.on("bump.left,bump.right,bump.bottom",function(collision) {       if(collision.obj.isa("player")) {          //q.stagescene("endgame",1, { label: "you died" });          collision.obj.destroy();       }     });      // if enemy gets hit on top, destroy     // , give user "hop"     this.on("bump.top",function(collision) {       if(collision.obj.isa("player")) {          this.destroy();           collision.obj.p.vy = -300;           //increasing enemies killed on destroy           ekl1++;         }     });   } });  q.scene("uicontainers", function(stage){   var container = stage.insert(new q.ui.container({       fill: "gray",       border: 2,       shadow: 3,       shadowcolor: "rgba(0,0,0,0.5)",       y: q.height/10,       x: q.width/1.25     }));     stage.insert(new q.ui.text({        label: "enemies killed: " + ekl1.tostring(),       color: "black",       x: 0,       y: 0     }),container);      container.fit(20,20); });  q.scene("level1", function(stage){   stage.insert(new q.repeater({ asset: "background-wall.png", speedx: 0.5, speedy: 0.5 }));   q.stagescene("uicontainers", 1);    stage.collisionlayer(new q.tilelayer({ dataasset: 'level.json', sheet: 'tiles' }));     var player = stage.insert(new q.player());    stage.insert(new q.enemy({ x: 700, y: 0 }));   stage.insert(new q.enemy({ x: 800, y: 0 }));   stage.insert(new q.enemy({ x: 500, y: 0 }));    stage.add("viewport").follow(player);  });  q.load("sprites.png, sprites.json, enemy.png, enemy.json, level.json, tiles.png, background-wall.png",  function(){   q.sheet("tiles","tiles.png", { tilew: 32, tileh: 32 });   q.compilesheets("sprites.png", "sprites.json");   q.compilesheets("enemy.png", "enemy.json");   q.animations("player", {     walk_right: {frames: [0, 1, 2, 3], rate: 1 / 4, flip: false, loop: true },      walk_left: {frames: [0, 1, 2, 3], rate: 1 / 4, flip:"x", loop: true },     stand_right: {frames: [0], rate: 1 / 4, flip: false, loop: true},     stand_left: {frames: [0], rate: 1 / 4, flip: "x", loop: true}     });    q.stagescene("level1"); });     }); 

the code of course written in javascript run quintus gaming engine can found here: http://html5quintus.com/

this how went trying work, made global variable called ekl1 (enemies killed level 1) returned/equaled 0. global variable accessed in enemy function @ bottom player enemy collision takes place. says if player hits top of enemy, enemy destroyed. did added this: ekl1++ inside if statement on destroying enemy. converted string , ran console , worked! killed enemy , said 1, killed 2, , killed last 1 , displayed 3. of course had implement gui on screen. did made uicontainer function hold gui's. inserted label onto container can see put label text as:

"enemies killed: " + ekl1.tostring();

this converted without need of string variable, integer string. thought work, when killed monster didn't rise. believe reason container drawn on screen once, , doesn't update. means when kill monster won't update container. don't know how implement update function or working properly.

if knows answer fixing please respond! hope isn't problem hard fix.

thanks time,

~jackson vandy

your string "enemies killed: " + elk1.tostring() evaluated, changes elk after evaluation have no effect on label. no worries, there's solution. quintus has storage 'game states', called q.state. there's event handling, in case games state changes. i've added code below, should give rough direction on change code.

var q = // ...  // 1. after initialization of q, create q.state containing 'enemieskilled' q.state.reset({   enemieskilled: 0 });  // ...  // 2. 1 change in enemy sprite needed... q.sprite.extend("enemy",{   // ...   this.on("bump.top",function(collision) {     if(collision.obj.isa("player")) {        this.destroy();       collision.obj.p.vy = -300;        // 3. increment state variable       q.state.inc("enemieskilled");     }   }); }  // ...  // 4. extend q.ui.text class... q.ui.text.extend("enemieskilledlabel", {   init: function(p) {     this._super({       label: "enemies killed: 0",       // ...     });      // 5. add listener changes on state...     q.state.on("change.enemieskilled",this,"enemieskilledchange");   },    // 6. ...and handler   enemieskilledchange: function(enemieskilled) {     this.p.label = "enemies killed: " + enemieskilled;   } };   // ... etc. 

be aware use q.state.set(...), q.state.get(...) or convenience methods q.state.inc(...), quintus can fire change.<state> event.

best have @ http://html5quintus.com/guide/core.md, section "game state".