3

弹跳球不会停止弹跳

每次我这样做时，我都会遇到一个非常烦人的问题——球只是在底部继续弹跳一点点。

请在下面找到我的 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();

})();

如果有人能指出我的错误，我将不胜感激

4

2 回答 2

2

以下代码不考虑球高：

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

如果你把它改成这个 - 它应该可以工作：

if ((this.ball.top - 20) <= 0){
于 2013-06-28T06:14:13.467 回答
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/

于 2013-06-28T06:31:48.180 回答