将多个球放入框中（javascript）

我创建了一个像这样的简单网站，当单击该框时将球放入框中。但每次只有一球落下。我想多球落入框中多次点击框时：
website 将多个球放入框中（javascript）

这里是我使用的代码：我想多球要投进箱子时

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

这些框被点击多次。但老球应该留在箱子里。如何实现？我想添加一些响应，以便它可以在手机和平板电脑上测试。我如何在不改变功能的情况下做到这一点？

来源

2014-11-01 Test123

更改脚本如下。

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); 
}

此代码仅适用于一个画布。创建另一个balllist（如canvas2的balllist2）并修改弹出功能以使用该balllist。

来源

2014-11-01 06:57:22

如果我继续添加球，它会出现箱子，我不希望发生这种情况。 – Test123 2014-11-01 07:16:55

在源代码中，我增加了x值以区分是否有多个球正确创建。如果你不想这样做，你可以简单地将'+ counter'从赋值中移除到x。我会编辑答案。 – 2014-11-01 14:05:10

如果您阅读此评论，请接受它为答案，因为它解决了您的问题:) – 2014-11-01 14:08:14

将多个球放入框中（javascript）

回答

相关问题