2013-06-28 104 views
3

彈跳球不會停止,我每次做一次反彈彈跳球在JavaScript

,我留下一個非常惱人的問題 - 球只是不斷在底部反彈只是一點點。

請在下面找到

http://jsfiddle.net/elankeeran/xe5wJ/

(function(){ 

    var bounceBall = {} || bounceBall; 

    bounceBall = { 

     container: { 
      obj   : null, 
      width  : 0, 
      height  : 0, 
      interval : 0 
     }, 
     ball : { 
      obj   : null, 
      top   : 0, 
      left  : 0, 
      height  : 0, 
      width  : 0, 
      maxWidth : 0, 
      maxHeight : 0, 
      dx   : 10, 
      dy   : 30, 
      stopBall : false, 
      moveRight : true, 
      moveDown : true, 
      counter  : 0 
     }, 
     init: function(){ 
      console.log("BounceBall Init"); 
      var self = this; 
      var myContainer 
      if(document.getElementById('container')) 
       myContainer = document.getElementById('container'); 
      myContainer.addEventListener('click', self.handleClick, false); 
      self.setBall(myContainer); 
      self.ball.width = self.ball.obj.clientWidth; 
      self.ball.height = self.ball.obj.clientHeight; 


     }, 
     setBall : function(myContainer){ 

       var ballDiv = document.createElement("div"); 
       this.container.obj = myContainer; 
       this.container.width = myContainer.clientWidth; 
       this.container.height =myContainer.clientHeight; 
       ballDiv.className= "ball"; 
       this.ball.obj = ballDiv; 
       myContainer.appendChild(ballDiv); 


     }, 
     handleClick : function(event){ 
      console.log(bounceBall.container.height + " " + event.y); 
       bounceBall.ball.top = bounceBall.container.height; 
       bounceBall.ball.maxHeight = event.y; 
       bounceBall.ball.maxWidth = event.x; 
       bounceBall.ball.obj.style.top = bounceBall.ball.maxHeight + 'px'; 
       bounceBall.ball.obj.style.left = bounceBall.ball.maxWidth + 'px'; 
       bounceBall.container.interval = setInterval(function(){bounceBall.move(); },100); 
     }, 
     move : function(){ 



        if (this.ball.top >= this.ball.maxHeight){ 
         this.ball.moveDown = false; 

        } 
        if (this.ball.top <= 0){ 
         this.ball.moveDown = true; 
         this.ball.maxHeight = this.ball.maxHeight -20; 
        } 



        if (this.ball.moveDown){ 
         this.ball.top = this.ball.top + this.ball.dy; 
        } else { 
         this.ball.top = this.ball.top - this.ball.dy; 
        } 

        this.ball.obj.style.top = this.container.height - this.ball.top + 'px'; 



     } 
    }; 
    bounceBall.init(); 

})(); 

我的jsfiddle代碼的鏈接,我會很感激,如果有人能指出我的錯誤

+0

我建議這個片斷是沒有意義的:'VAR bounceBall = {} || bounceBall;'。它應該是'var bounceBall = bounceBall || {};'。此外,在此之後,您只需重新聲明它即可覆蓋變量:'bounceBall = {...}'。 –

+0

感謝祗園!我改它 – Elankeeran

回答

2

下面的代碼沒有考慮球的高度考慮:

if (this.ball.top <= 0){ 

如果你改變它t O此 - 它應該工作:

if ((this.ball.top - 20) <= 0){ 
+1

它應該停止一旦達到底 – Elankeeran

1

這裏是我的鏈接編輯代碼

if (this.ball.top >= this.ball.maxHeight){ 
        this.ball.moveDown = false; 

       } 
       if ((this.ball.top - 20) <= 0){ 
        this.ball.moveDown = true; 
        this.ball.maxHeight = this.ball.maxHeight -20; 
       } 
       if (this.ball.moveDown){ 
        this.ball.top = this.ball.top + this.ball.dy; 
        clearInterval(bounceBall.container.interval); 
       } else { 
        this.ball.top = this.ball.top - this.ball.dy; 
       } 

       this.ball.obj.style.top = this.container.height - this.ball.top + 'px'; 

改變此代碼。

請檢查http://jsfiddle.net/xe5wJ/16/

+0

http://jsfiddle.net/xe5wJ/15/這裏是鏈接我的代碼編輯請檢查它停止後底 – ankit

+0

球不彈跳它停止 – Elankeeran

+0

http:// jsfiddle。 net/xe5wJ/16 /檢查這個鏈接 – ankit