球没有落入盒子里

时间：2014-11-01 09:39:55

标签： javascript html css

我写了一个简单的网站。它有3个盒子。点击框会将球投入其中。 这是代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function popup (n) {

        var myCanvas, context;
        var balllist = [];
        var balllist1 = [];
        var balllist2 = [];
        var counter = 0;
        var interval;

        window.popup = function (n) {
        var dy = 4, y = 25;
        var elWidth = 150;
        var ballWidth = 10;
        var x= (elWidth + ballWidth) / 2 + counter;
        counter += 10;

        // create a new ball
        balllist.push({x: x, y: y, dy: dy});
        balllist1.push({x: x,y: y,dy: dy});
        balllist2.push({x: x,y: y,dy: dy});

        myCanvas = document.getElementById('myCanvas' + n);
        context = myCanvas.getContext('2d');

        function draw() {
            context.clearRect(0,0,200,235);
            for (var i = 0; i < balllist.length; i++) {
                for (var j = 0; j < balllist1.length; j++) {
                    for (var k = 0; k < balllist2.length; j++) {

                        var ball = balllist[i];
                        var ball1 = balllist1[i];
                        var ball2 = balllist2[i];
                        context.beginPath();
                        context.fillStyle="red";
                        context.arc(ball.x, ball.y, 10, 0, Math.PI*2, true);
                        context.closePath();
                        context.fill();
                        if (i == balllist.length - 1 && ball.y > 300) {
                            clearInterval(interval);
                        }
                        if(ball.y < 0 || ball.y > 224) ball.dy = 0;
                            ball.y += ball.dy;

                        if (j == balllist1.length - 1 && ball1.y > 300) {
                            clearInterval(interval);
                        }
                        if(ball1.y < 0 || ball1.y > 224) ball1.dy = 0;
                            ball1.y += ball1.dy;

                        if (k == balllist2.length - 1 && ball2.y > 300) {
                            clearInterval(interval);
                        }
                        if(ball2.y < 0 || ball2.y > 224) ball2.dy = 0;
                            ball2.y += ball2.dy;
                    }
                }
            }
        clearInterval(interval);
        interval = setInterval(draw, 10);
    }
}
</script>
<style>
html,body{margin:0;}

div.time {
    display: table;
    background: green;
    float: left;
    margin: 20px;
    zoom: 1; 
    position: relative;
    top: 75px;
    left:35px;
    width: 150px;
    height: 150px;
}

span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


canvas{
    z-index:10000;
    transform: inherit;
    float: left;
   /* margin: 20px;*/
    zoom: 1; 
    position: relative;
    top: -200px;
    left:35px;
    margin:20px;
}
#myCanvas1{
    clear:left; 
    margin: -13px; 
    position:relative;
}
</style>
</head>
<body>
<div class="time"><span>Past Thoughts</span></div>
<div class="time"><span>Present Thoughts</span></div>
<div class="time"><span>Future Thoughts</span></div>
<canvas id="myCanvas1" width="150" height="300" onclick="popup(1)"></canvas>
<canvas id="myCanvas2" width="150" height="235" onclick="popup(2)"></canvas>
<canvas id="myCanvas3" width="150" height="235" onclick="popup(3)"></canvas>
</body>
</html>

它不起作用。我哪里错了？帮帮我。当球落入盒子时，它们会混合在一起。我想要并排放在盒子里的球。

4 个答案:

答案 0 :(得分：2)

for (var k = 0; k < balllist2.length; j++)

放k++代替j++

答案 1 :(得分：2)

正如评论中所述，您的代码存在一些问题，导致其无法按预期工作。

  • 嵌套循环不起作用
  • 多个球变量（ball，ball1，ball2）没有做任何事情 - 实际上只绘制了ball
  • 您的内部和外部职能popup具有相同的名称
  • （取决于窗户大小）您的画布可能无法与盒子对齐，因此球落在错误的位置

尝试考虑一个创建新球的函数和另一个单独的函数（不在第一个函数内），它更新每个帧中的所有动画，如下例所示（JSFiddle）

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head><style>html, body {
    margin:0;
}
div.time {
    display: table;
    background: green;
    float: left;
    margin: 20px;
    zoom: 1;
    position: relative;
    top: 75px;
    left:35px;
    width: 150px;
    height: 150px;
}
span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
canvas {
    z-index:10000;
    transform: inherit;
    /* margin: 20px;*/
    zoom: 1;
    position: relative;
    top: -200px;
    left:35px;
    margin:20px; 
}
</style></head><body>
<div class="time"><span>Past Thoughts</span>

</div>
<div class="time"><span>Present Thoughts</span>

</div>
<div class="time"><span>Future Thoughts</span>

</div>
<br style="clear: both" />
<canvas id="myCanvas1" width="150" height="235" onclick="newBall(0)"></canvas>
<canvas id="myCanvas2" width="150" height="235" onclick="newBall(1)"></canvas>
<canvas id="myCanvas3" width="150" height="235" onclick="newBall(2)"></canvas>
<script type="text/javascript">
var balls = [[], [], []],
    canvases = document.getElementsByTagName('canvas'),
    context = [],
    interval,
    boxWidth = 150,
    ballRadius = 10,
    canvasHeight = 235;
for (var i = 0; i < canvases.length; i++) {
    context.push(canvases[i].getContext('2d'));
}

function draw() {
    var movement = false;
    for (var i = 0; i < 3; i++) {
        context[i].clearRect(0, 0, boxWidth, canvasHeight);
        for (var j = 0; j < balls[i].length; j++) {
            if (balls[i][j].y < balls[i][j].yStop) {
                balls[i][j].y += 4;
                movement = true;
            }
            context[i].beginPath();
            context[i].fillStyle = "red";
            context[i].arc(balls[i][j].x, balls[i][j].y, ballRadius, 0, Math.PI * 2, true);
            context[i].closePath();
            context[i].fill();
        }
    }
    if (!movement) {
        clearInterval(interval);
        interval = null;
    }
}

function newBall(n) {
    console.log('new ball', n);
    var last = balls[n][balls[n].length - 1],
        ball = {x: ballRadius, y: ballRadius, yStop: canvasHeight - ballRadius};
    if (last) {
        if (last.x < boxWidth - ballRadius * 3) {
             ball.x = last.x + ballRadius * 2;
             ball.yStop = last.yStop;
        } else {
             ball.yStop = last.yStop - ballRadius * 2;
        }
    }
    balls[n].push(ball);
    if (!interval) {
        interval = setInterval(draw, 10);
    }
}
</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

请看下面的JSFiddle：球落下了！

请参阅：http://jsfiddle.net/ge5Ldxfg/

您的函数调用有问题。

window.popup = function (n) {

不正确。

错误关闭}也存在问题。我在JSFiddle中评论了//。

答案 3 :(得分：0)

如果您使用OOP概念，这可能会变得不那么复杂......

Demo on JFIDDLE 

<html>
<head>
<script type="text/javascript">

    function Ball(canvas){
       this.canvas = canvas;
       this.dy = 4; 
       this.y = 25;
       this.ballWidth = 15*2;

       if (canvas.x == null || canvas.y == null){
            canvas.x = this.ballWidth/2;
            canvas.y = 235 - this.ballWidth/2;
       } else if ((canvas.x + this.ballWidth/2) > canvas.width){
            canvas.x = this.ballWidth/2;
            canvas.y = canvas.y - this.ballWidth;
       }else {
            canvas.x = canvas.x + this.ballWidth;
       }
       this.x = canvas.x;
       this.destY = canvas.y;

       var that = this;
       this.interval = setInterval(function(){
            that.y += that.dy;
            if (that.y>that.destY){
                clearInterval(that.interval);
            }
       }, 10);
    }

    var ballList = [];
    var elements = document.getElementsByTagName('canvas');
    draw = function(){
            for (var i = 0; i < elements.length; i++) {
                var context = elements[i].getContext('2d');
                context.clearRect(0,0,200,235);
            }
            for (var i = 0; i < ballList.length; i++) {
                var ball = ballList[i];
                var context = ball.canvas.getContext('2d');
                context.beginPath();
                context.fillStyle="red";
                context.arc(ball.x, ball.y, 15, 0, Math.PI*2, true);
                context.closePath();
                context.fill();
            }
    }

    window.onload = function(){
        setInterval(draw,10);
    };
</script>
<style>
html,body{margin:0;}

div.time {
    display: table;
    background: green;
    float: left;
    margin: 20px;
    zoom: 1; 
    position: relative;
    top: 75px;
    left:35px;
    width: 150px;
    height: 150px;
}

span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


canvas{
    z-index:10000;
    transform: inherit;
    float: left;
   /* margin: 20px;*/
    zoom: 1; 
    position: relative;
    top: -200px;
    left:35px;
    margin:20px;
}
#myCanvas1{
    clear:left; 
    position:relative;
}
</style>
</head>
<body>
<div class="time"><span>Past Thoughts</span></div>
<div class="time"><span>Present Thoughts</span></div>
<div class="time"><span>Future Thoughts</span></div>
<canvas id="myCanvas1" width="150" height="235" onclick="ballList.push(new Ball(this));"></canvas>
<canvas id="myCanvas2" width="150" height="235" onclick="ballList.push(new Ball(this));"></canvas>
<canvas id="myCanvas3" width="150" height="235" onclick="ballList.push(new Ball(this));"></canvas>
</body>
</html>
相关问题
最新问题