title: Javascript Object Association
body: <p>I am currently learning Javascript and I have problem on object association. </p>
  
  <p>The codes can be found in jsfiddle: <a href="http://jsfiddle.net/hphchan/94ajjbur/2/" rel="nofollow">http://jsfiddle.net/hphchan/94ajjbur/2/</a>.</p>
  
  <p>Here I highlight some of the essential parts of my codes. 
  I create a ball and a number of blocks using constructor functions. To get the ball notice it hits the blocks, I put block object as one of the input to create Ball object, like this: </p>
  
  <p><code>var ball = new Ball(20, 20, "#000", 2, 5, objArray);</code></p>
  
  <p>where objArray includes a number of block Objects and a spinner object. And I create a method of Ball object, which is ballMove() which creates a ball and moves and bounce back if it hit anything. </p>
  
  <p>And I want to do the following: </p>
  
  <ol>
  <li>when the ball hit the spinner, nothing happens just the ball get bounce back. </li>
  <li>when the ball hit the block, the block get disappear. </li>
  </ol>
  
  <p>Here are the essential code for block to be disappear: </p>
  
  <p>In JS: </p>
  
  <pre><code>function Ball(width, height, color, speedX, speedY, relatedObjArray) {
       Item.call(this, width, height, color); 
       this.relatedObjArray = relatedObjArray;
       ...
  }
  
  Ball.prototype = new Item(); 
  
  Ball.prototype.ballMove = function() {
      var relatedObjArray = this.relatedObjArray;
      ...
      setInterval(function() {
          ...
          if (relatedObj.className == "block visible") {
              relatedObj.className = "block hidden"; 
              relatedObjArray.splice(i, 1); 
          }
      }
  }
  </code></pre>
  
  <p>In CSS: </p>
  
  <pre><code>.hidden {
      visibility: hidden;
  }
  </code></pre>
  
  <p>The codes I wrote run perfectly. However, in order to make the block disappear, I put the code which makes the block disappear in moveBall(), which is a method inside Ball, instead of Block. </p>
  
  <p>Indeed, I would like to put the code to make the block disappear inside the Block constructor function, since this is an activity relates more with Block than ball. 
  I would like to create a method for Block instead. It should looks something like this: </p>
  
  <pre><code>Block.prototype.hiddenBall = function() {
      if (touches ball) {
          block.className = "block hidden"; 
          removeBlock in the Object Array; 
  }
  </code></pre>
  
  <p>while leaving moveBall() method the capability of bouncing back only. </p>
  
  <p>However, I have no idea how I can do this. Since I create the Block first, then Ball. So that I can put the Block objects as an input of Ball. So how can I do the opposite as well, putting Ball as an input of Block, so that I can make the Block disappear when it detects it is hit by the ball? OR are there any alternative way to do it? </p>