0
我創建了一個像這樣的簡單網站,當單擊該框時將球放入框中。但每次只有一球落下。我想多球落入框中多次點擊框時:
將多個球放入框中(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>
這些框被點擊多次。但老球應該留在箱子裏。如何實現?我想添加一些響應,以便它可以在手機和平板電腦上測試。我如何在不改變功能的情況下做到這一點?
如果我繼續添加球,它會出現箱子,我不希望發生這種情況。 – Test123 2014-11-01 07:16:55
在源代碼中,我增加了x值以區分是否有多個球正確創建。如果你不想這樣做,你可以簡單地將'+ counter'從賦值中移除到x。我會編輯答案。 – 2014-11-01 14:05:10
如果您閱讀此評論,請接受它爲答案,因爲它解決了您的問題:) – 2014-11-01 14:08:14