1
我寫了一個簡單的網站。它有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>
這是行不通的。我錯在哪裏？幫幫我。當球落入盒子時，它們會混合在一起。我想要並排放在盒子裏的球。
我想你是錯過了「}」之前 – 2014-11-01 09:51:02
我提供了缺少'}'，但它沒有解決問題。 – Test123 2014-11-01 09:55:12
你能解釋你的代碼應該如何工作嗎？你有三個球（'ball'，'ball1'，'ball2'），但只有'ball'被繪製過。爲什麼你有這些嵌套循環？ – Stuart 2014-11-01 10:37:08