弹跳球在JavaScript

弹跳球不会停止，我每次做一次反弹弹跳球在JavaScript

，我留下一个非常恼人的问题 - 球只是不断在底部反弹只是一点点。

请在下面找到

(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代码的链接，我会很感激，如果有人能指出我的错误

来源

2013-06-28 Elankeeran

我建议这个片断是没有意义的：'VAR bounceBall = {} || bounceBall;'。它应该是'var bounceBall = bounceBall || {};'。此外，在此之后，您只需重新声明它即可覆盖变量：'bounceBall = {...}'。 –

感谢祗园！我改它 – Elankeeran

下面的代码没有考虑球的高度考虑：

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

如果你改变它t O此 - 它应该工作：

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

来源

2013-06-28 06:14:13

它应该停止一旦达到底 – Elankeeran

这里是我的链接编辑代码

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/

来源

2013-06-28 06:31:48 ankit

http://jsfiddle.net/xe5wJ/15/这里是链接我的代码编辑请检查它停止后底 – ankit

球不弹跳它停止 – Elankeeran

http：// jsfiddle。 net/xe5wJ/16 /检查这个链接 – ankit

弹跳球在JavaScript

回答

相关问题