[Solved] Slotmachine Reel

Declared two instance of an Object but when I log the value, It has the same values.

Hope you can help me with this.

var reel1 = new Reel(0);
reel1.setPosition(cc.p(0 ,size.height / 2 - 50));
this.addChild(reel1);

var reel2 = new Reel(80);
reel2.setPosition(cc.p(80 ,size.height / 2 - 50));
this.addChild(reel2);

console.log(reel1.reel);
console.log(reel2.reel);

Why? Did I make something wrong

Hello,

Can you show me the implementation of Reel class?

Here’s is my reel class…

I am creating a slot machine like and I am using numbers instead of images.

My real problem is when my reel updates (see update method), both reel1 and reel2 is set to the same x and y position. But when I tried to log the posX value, It shows the correct value.

var Reel = cc.Layer.extend({
    reel_height:0,
    card:[],
    main_reel:null,
    reel_index:0,
    reel:[],
    roll:false,
    animRoll:null,
    posX:'',
    ctor:function (posX) {
      this.posX = posX;
      this._super();
      this.reel_height = 100 * -10;

      for(var i=0;i<2;i++) {
        this.reel[i] = new cc.LayerColor(cc.color(this.getRandomInt(0,255), this.getRandomInt(0,255), this.getRandomInt(0,255)), 80, this.reel_height);
        for (var ctr = 0; ctr < 10; ctr++) {
          this.card[ctr] = new Card(ctr.toString());
          this.card[ctr].name = ctr.toString();
          this.card[ctr].setPosition(cc.p(0, this.card[ctr].card_height * -ctr));
          this.reel[i].addChild(this.card[ctr]);
        }

        this.reel[i].setPosition(cc.p(this.posX, this.reel_height * i));
        this.addChild(this.reel[i]);

      }

      this.scheduleUpdate();
      this.rollAnimation();
    
      return true;
    },

    rollAnimation: function () {
      this.roll = true;
      this.animRoll = cc.moveBy(this.getRandomInt(2,3), 0, 100 * 10).repeatForever();
      this.runAction(this.animRoll);
    },

    stopAnimation: function () {
      this.roll = false;
      this.stopAction(this.animRoll);
    },

    update: function (dt) {
      if (this.reel[0].getParent().convertToWorldSpace(this.reel[0].getPosition()).y >= (14 * 100)) {
        this.reel[0].setPosition(cc.p(this.posX, this.reel_height * this.reel_index));
        this.reel_index++;
      }

      if (this.reel[1].getParent().convertToWorldSpace(this.reel[1].getPosition()).y >= (14 * 100)) {
        this.reel[1].setPosition(cc.p(this.posX, this.reel_height * this.reel_index));
        this.reel_index++;
      }

    },

    getRandomInt: function (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
});

I have some doubts.

when I tried to log the posX value, It shows the correct value.

Are you getting different position when you log? Are you able differentiate two objects?

For the beginning you have mentioned.

console.log(reel1.reel);

I am not able to see reel variable. I can see reel as array.

I am trying to make the reel array attribute into multidimensional array using the posX value as the first index. (this.reel[posX][0])

And I think I am getting the correct position of the reel.

Am I doing it right?

If i check the way of implementation, posX value should print correct.
I think you are doing right. You are getting correct position.

What is your doubt?

(this.reel[posX][0]) : Here posX is value or array index? Here i can see you are assigning posX to array index and you are saying first index.

I change my Reel class implementation.

And it is now working correctly.

Changed my posX to index.

And let setPosition() do the job to change position.

Here’s my Reel Class for those people who want to develop a Slotmachine.

var Reel = cc.LayerColor.extend({
    reel_height:0,
    card:[],
    reel_index:0,
    reel:[],
    roll:false,
    animRoll:null,
    animCorrect:null,
    index:'',
    target:null,
    duration:0,
    ctor:function (index, target) {
      //this._super(cc.color(255, 155, 255), 200, cc.winSize.height);
      this._super();
      this.index = index;
      this.target = target;
      this.reel_height = 100 * -10;

      this.reel[this.index] = [];
      for(var i=0;i<2;i++) {
        //this.reel[i] = new cc.LayerColor(cc.color(this.getRandomInt(0,255), this.getRandomInt(0,255), this.getRandomInt(0,255)), 80, this.reel_height);
        this.reel[this.index][i] = new cc.Layer();
        for (var ctr = 0; ctr < 10; ctr++) {
          var color = cc.color(255, 255, 255);
          if(i%2){
            color = cc.color(255, 155, 255);
          }
          this.card[ctr] = new Card(ctr.toString(), color);
          this.card[ctr].name = ctr.toString();
          this.card[ctr].setPosition(cc.p(0, this.card[ctr].card_height * -ctr));
          this.reel[this.index][i].addChild(this.card[ctr]);
        }

        this.reel[this.index][i].setPosition(cc.p(0, this.reel_height * i));
        this.addChild(this.reel[this.index][i]);

      }


      this.scheduleUpdate();
      return true;
    },

    rollAnimation: function () {
      this.roll = true;
      this.duration = this.getRandomInt(3,5);
      this.animRoll = cc.moveBy(this.duration, 0, 100 * 14).repeatForever();
      this.runAction(this.animRoll);
    },

    stopAnimation: function () {
      this.roll = false;
      this.stopAction(this.animRoll);

      console.log('target: '+this.target);
      var positionY = this.getPositionY();
      var cardNumber = (Math.ceil(positionY / 100) - 1) % 10;
      var correctY = (((Math.ceil(positionY / 100) * 100) + 75) - positionY);
      var targetPosition = 100 * ((parseInt(this.target) + 10) - cardNumber);

      this.animRoll = cc.moveBy(this.duration, 0, targetPosition);
      this.animCorrect = cc.moveBy(1, 0, correctY).easing(cc.easeOut(1.0));

      this.runAction(cc.sequence(this.animRoll, this.animCorrect));
    },

    update: function (dt) {

      if (this.reel[this.index][this.reel_index % 2].getParent().convertToWorldSpace(this.reel[this.index][this.reel_index % 2].getPosition()).y >= (14 * 100)) {
        this.reel[this.index][this.reel_index % 2].setPositionY(this.reel_height * (this.reel_index + 2));
        //console.log("reel_index: "+this.reel_index+" index: "+this.index);
        this.reel_index++;
      }

      if(!this.roll){
        //console.log(this.reel[this.index][this.reel_index % 2].getParent().convertToWorldSpace(this.reel[this.index][this.reel_index % 2].getPosition()).y);
      }

    },

    getRandomInt: function (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
});