0

RESOLVED, WAS AN ERROR IN MY CODE

I'm testing out the moo4q jQuery-MooTools synthesis (http://moo4q.com/) on a simple game and am running into an issue. Here's the snippet of code that's causing the problem:

// write score counter, puts up overlay, load image
initGame: function () {

    this.app.unbind('loadingDone',this.initGame);

    this.setupHUD();
    this.gameObjects['scoreCounter'].html('1000');
    var imgLib = this.imgs[this.gameType];
    var img = imgLib.getUniqueImage();
    this.log(img);
    img.display(this.gameObjects['imageHolder']);

    this.gameObjects['overlay'].fillRect(0, 0, 320, 460);
    $(this.gameObjects['overlay'].canvas).bind('click', $.proxy(this.pokeHole, this));

},

As explanation, this.gameObjects['imageHolder'] is a canvas context passed to the img object to tell it where to draw. Specifically on the line 'img.display(this.gameObject['imageHolder']); I am getting the error

Uncaught TypeError: Object [object Object] has no method 'display'

from Chrome

The output of the log trace called on the line just before the call (which is just a wrapped window.console.log) is:

[Class.newClass.constructor
 file: Object
 keyword_list: Array[1]
 options: F
 __proto__: Object
   canvasContext: null
   checkResponse: function (){
   constructor: function (){
   display: function (){
   file: null
   initialize: function (){
   keyword_list: Array[0]
   log: function (){
   options: Object
   __proto__: Object

I thought, maybe, that it would call the display as extended with the proto? But it seems not. this.imgs[this.gameType] is a class ImageContainer. getUniqueImage looks like this:

// gets a random image from the imgsShown array, then removes it
// so that subsequent calls to getUniqueImage will always
// be unique.  Refills imgsShown if empty.
getUniqueImage: function() {

  // copy over the img array if imgsShown array is empty
  if(this.imgsShown.length == 0) this.imgsShown = this.imgs.slice(0);
  var rand = Math.floor(Math.random() * this.imgsShown.length);

  return this.imgsShown.splice(rand,1);
}

Whole picture here (breaks when Animals is clicked):

http://www.clumsyfingers.net/projects/game/revealer/

the most relevant files are in an /apps directory I have left open

http://www.clumsyfingers.net/projects/game/revealer/app/

Halp?

clumsyfingers
  • 485
  • 4
  • 10
  • It turned out to be an error in the return value of the getUniqueImage function. I was returning an array (created by the splice function) and not the object. For reference, the [ ]'s in Chrome's debug indicate that the parameter logged is an array. – clumsyfingers Mar 18 '11 at 01:16

1 Answers1

1

var img = imgLib.getUniqueImage();

is imgLib an array/html collection? if so, img is an object?

img.display(this.gameObjects['imageHolder']);

Are you prototyping Object? That's not a good idea, if you were. I suggest you refactor by doing a class method displayImage and just call that instead.

Community
  • 1
  • 1
Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69
  • imgLib is an ImageCollection class instance (http://www.clumsyfingers.net/projects/game/revealer/app/imagecollection.js) . I'm not 100% sure how moo4q is implemented... not sure if it prototypes Object or not. I'll look into it and get back with you. – clumsyfingers Mar 17 '11 at 13:11
  • 1
    NOBODY prototypes Object - particularly not mootools, whose class implementation this ports. Mootools had Hash 'Native' which was an object wrapper with prototyping (deprecated) and now it does pseudo methods in an `Object type`, just like [javascript natives](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys). – Dimitar Christoff Mar 17 '11 at 13:18
  • Yeah, it wasn't that, it turned out that I was returning an array instead of the object itself *slap forehead*. Now I know [ ] in chrome debug isn't just syntactical sugar, it means you're referencing an array. +1 to both of you for taking a look. Thank you. – clumsyfingers Mar 18 '11 at 01:15