Question

我想创建多个球以随机速度随机初始化点弹跳而没有画布。

单球代码

        var x, y, vx, vy;
        var SCREENHEIGHT, SCREENWIDTH;
        //this function runs on the initialization of the page 
        function init()
        {
            SCREENWIDTH = window.innerWidth;
            SCREENHEIGHT = window.innerHeight;
            x = Math.random()*SCREENWIDTH;
            y = Math.random()*SCREENHEIGHT;
            vx = Math.random()*10 -5;
            vy = Math.random()*10 -5;
            mainloop();
        }

        //function runs repeatedly for the eternity
        function mainloop()
        {
            x += vx;
            y += vy;
            if (x>SCREENWIDTH-20||x<0) vx = -1*vx;
            if (y>SCREENHEIGHT-20||y<0) vy = -1*vy;
            document.getElementById("box").style.left = x+"px";
            document.getElementById("box").style.top = y+"px";
            setTimeout(mainloop, 30);
        }
    </script>
</head>
<body onload="init()">
    <div id="box" style="position:absolute;width:20px; height:20px;background:#f00"></div>

这运行正常，我的代码为多个球

    <title>Bouncing Box</title>
    <script>
        var x=new Array(50), y=new Array(50), vx=new Array(50), vy=new Array(50);
        var SCREENHEIGHT, SCREENWIDTH;
        var i;
        //this function runs on the initialization of the page 
        function init(i)
        {
            SCREENWIDTH = window.innerWidth;
            SCREENHEIGHT = window.innerHeight;
            x[i] = Math.random()*SCREENWIDTH;
            y[i] = Math.random()*SCREENHEIGHT;
            vx[i] = Math.random()*10 -5;
            vy[i] = Math.random()*10 -5;
            mainloop(i);
        }

        //function runs repeatedly for the eternity
        function mainloop(i)
        {
            x[i] += vx[i];
            y[i] += vy[i];
            if (x[i]>SCREENWIDTH-20||x[i]<0) vx[i] = -1*vx[i];
            if (y[i]>SCREENHEIGHT-20||y[i]<0) vy[i] = -1*vy[i];
            document.getElementById(box).style.left = x[i]+"px";
            document.getElementById(box).style.top = y[i]+"px";
            setTimeout(mainloop(i), 30);
        }

    </script>
</head>
<body>
<div id="container">
    <div id="box" style="position:absolute;width:20px; height:20px;background:#f00"></div>
    <script>

        function createDiv(divid)
        {
            this.div = document.createElement("box");
            this.div.setAttribute("id",divid);
            var parent = document.getElementById('box');
            parent.appendChild(this.div);
            return this.div;
        }

        function Box()
        {
            var box = document.getElementById("box");
            var boxes = new Array();

            for (i=0; i < 50; i += 1)
            {
                boxes.push(createDiv(i));
            }

            for (i=0; i < 50; i += 1)
            {
                init(i);
            }
        }


    </script>
</div>

我无法理解问题

Answer 1

您的代码不一样。你尝试在两者中获取box元素，但是因为你的代码是

，它在多个球的情况下失败了

document.getElementById(box)

你在单球中的位置

document.getElementById("box")

Answer 2

这就是我为解决问题所做的工作。我在html5画布上绘制球。

<script type="text/javascript">
var width = 100;
var height = 200;
 
	function Ball(){
    // random radius
    this.radius = Math.floor(Math.random()*(10-5+1))+5;
 
    // random x and y
    this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
    this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
 
    // random direction, +1 or -1
    this.dx = Math.floor(Math.random()*2) * 2 - 1;
    this.dy = Math.floor(Math.random()*2) * 2 - 1;
 
    //random colour, r, g or b
    var rcol = Math.floor(Math.random()*3);
    this.col = rcol==0 ? "red" :
               rcol==1 ? "blue" : "green";
		}
 
	// create an array of balls
	numBalls = 10;
	var balls = new Array(numBalls);
	for(i= 0 ; i < numBalls ; i++){
   balls[i] = new Ball();
	}
 
	// draw the balls on the canvas
	function draw(){
	var canvas = document.getElementById("myCanvas");
 
	// check if supported
	if(canvas.getContext){
 
    var ctx=canvas.getContext("2d");
 
    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    ctx.globalAlpha = 0.5;
    ctx.strokeStyle="black";
 
    // draw each ball
    for(i = 0; i < numBalls ; i++){
      var ball = balls[i];
      ctx.fillStyle=ball.col;
      ctx.beginPath();
 
      // check bounds
      // change direction if hitting border
      if(ball.x<=ball.radius ||
         ball.x >= (width-ball.radius)){
        ball.dx *= -1;
      }
      if(ball.y<=ball.radius ||
         ball.y >= (height-ball.radius)){
        ball.dy *= -1;
      }
 
      // move ball
      ball.x += ball.dx;
      ball.y += ball.dy;
 
		// draw it
		ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false);
		ctx.stroke();
		ctx.fill();
		}
	}
	else{
			//canvas not supported
		}
	}
 
		// calls draw every 10 millis
	function bounce(){
    setInterval(draw, 10);
	}
	</script>
	<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px" onclick="bounce()">
	Canvas not supported.</canvas>

Click on the box to run

用HTML弹跳球

2 个答案: