个人中心
gpt4 book ai didi

javascript - 球没有掉进盒子里

转载 作者：行者123 更新时间：2023-11-30 10:11:00 26 4
gpt4 key购买 nike

我写了一个简单的网站。它有 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>

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

最佳答案

如评论中所述，您的代码存在多个问题，无法按预期工作。

  • 嵌套循环不起作用
  • 多个球变量(ball、ball1、ball2)没有做任何事情——只有 ball 是实际绘制
  • 你的内部和外部函数 popup 具有相同的名称
  • (取决于窗口大小)您的 Canvas 可能未与框对齐，因此球会落在错误的位置

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

<!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>

关于javascript - 球没有掉进盒子里，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26687939/

26 4 0
文章推荐： javascript - 使用 # 打开基于 url 的模态
文章推荐： swift - 我该如何实现 - 当文本选择消失时，选择的彩色文本将恢复为选择之前的颜色(在 swift 中， cocoa 中)？
文章推荐： swift - 如何从数组的数组中获取值
文章推荐： javascript - Lodash 适用于两个对象，但如果具有三个对象则返回 null
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com