2013-06-28 2 views
3

мячик не остановит прыгающимОтказы мяча в JavaScript

каждый раз, когда я это делаю, я остался с очень досадной проблемой - мяч просто продолжает подпрыгивая только немного на дне.

Пожалуйста, найти свой jsfiddle ссылку код ниже

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(); 

})(); 

Я был бы очень признателен, если кто-то может указать на мою ошибку

+0

Могу ли я предположить, что этот фрагмент не имеет смысла: 'вар bounceBall = {} || bounceBall; '. Это должно быть 'var bounceBall = bounceBall || {}; '. Более того, после этого вы просто перезаписываете свою переменную, обновляя ее: 'bounceBall = {...}'. –

+0

благодарит Gion! Я меняю его – Elankeeran

ответ

2

Следующий код не принимает высоту шара во внимание:

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

Если вы измените его t о это - он должен работать:

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