JavaScript中的弹球

Bounce ball in JavaScript

本文关键字:JavaScript      更新时间:2023-09-26

弹跳球不会停止弹跳

每次我这样做,我都会遇到一个非常烦人的问题——球一直在底部反弹。

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

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

以下代码不考虑球的高度:

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

如果你把它改成这个-它应该工作:

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

这是我编辑代码的链接

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/