将多个球放入框中（javascript）_Javascript_Html_Css

将多个球放入框中（javascript）

javascript html css

将多个球放入框中（javascript）,javascript,html,css,Javascript,Html,Css,我创建了一个像这样的简单网站，当点击盒子时，一个球被扔进盒子里。但每次只有一个球落下。我希望在多次单击框时，多个球落入框中：下面是我使用的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup (n) { var context; var dx= 4; va

我创建了一个像这样的简单网站，当点击盒子时，一个球被扔进盒子里。但每次只有一个球落下。我希望在多次单击框时，多个球落入框中：

下面是我使用的代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function popup (n) {
            var context;
            var dx= 4;  
            var dy=4;
            var y=25;
        var elWidth=150;
        var ballWidth=10;
            var x=(elWidth+ballWidth)/2;
            var counter = 0;
        var myCanvas=document.getElementById('myCanvas'+n);
            function draw(){
                context= myCanvas.getContext('2d');
                context.clearRect(0,0,200,235);
                context.beginPath();
                context.fillStyle="red";
                context.arc(x,y,10,0,Math.PI*2,true);
                context.closePath();
                context.fill();
        if(y>300){clearInterval(interval);}
                if( y<0 || y>224)dy=0;
                y+=dy;
        myCanvas.className='active';
            }


            var 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;}
</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="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>


功能弹出窗口（n）{
var语境；
var-dx=4；
var-dy=4；
变量y=25；
可变宽度=150；
var球宽=10；
var x=（elWidth+ballWidth）/2；
var计数器=0；
var myCanvas=document.getElementById（'myCanvas'+n）；
函数绘图（）{
context=myCanvas.getContext（'2d'）；
clearRect（0,0200235）；
context.beginPath（）；
context.fillStyle=“红色”；
弧（x，y，10，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
如果（y>300）{clearInterval（interval）；}
如果（y224）dy=0；
y+=dy；
myCanvas.className='active'；
}
var间隔=设定间隔（图10）；
}
html，正文{
保证金：0；
}
分区时间{
显示：表格；
背景：绿色；
浮动：左；
利润率：20px；
缩放：1；
位置：相对位置；
顶部：75px；
左：35px；
宽度：150px；
高度：150像素；
}
跨度{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
颜色：白色
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
帆布{
z指数：10000；
转化：继承；
浮动：左；
利润率：20px；
缩放：1；
位置：相对位置；
顶部：-200px；
左：35px；
利润率：20px；
}
#myCanvas1{清除：左；}
过去的想法
当前想法
未来的想法

我想多个球应该投到框时，框点击多次。但旧球应该留在盒子里。如何实现这一目标？我还想给它增加一些响应能力，以便它可以在手机和平板电脑上测试。我如何在不改变功能的情况下做到这一点

如下更改脚本

var myCanvas, context;
var balllist = [];
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++;

    // create a new ball
    balllist.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++) {
            var ball = balllist[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;
        }
    }
    clearInterval(interval);
    interval = setInterval(draw, 10);
}

var myCanvas，上下文；
var balllist=[]；
var计数器=0；
var区间；
window.popup=函数（n）{
变量dy=4，y=25；
可变宽度=150；
var球宽=10；
var x=（elWidth+ballWidth）/2；
计数器++；
//创建一个新球
push（{x:x，y:y，dy:dy}）；
myCanvas=document.getElementById（'myCanvas'+n）；
context=myCanvas.getContext（'2d'）；
函数绘图（）{
clearRect（0,0200235）；
对于（变量i=0；i300）{
间隔时间；
}
如果（ball.y<0 | | ball.y>224）ball.dy=0；
ball.y+=ball.dy；
}
}
间隔时间；
间隔=设置间隔（图10）；
}

此代码仅适用于一个画布。创建另一个球列表（如canvas2的球列表2）并修改弹出函数以使用该球列表。

如果我继续添加球，它会自动弹出，我不希望发生这种情况。在源代码中，我增加了x值以区分是否正确创建了多个球。如果您不想这样做，您可以简单地将“+counter”从赋值中删除到x。我将编辑答案。如果您阅读此评论，请接受它作为答案，因为它解决了您的问题：）