HTML中的弹跳球_Html - Fatal编程技术网

HTML中的弹跳球

html

HTML中的弹跳球,html,Html,我想创建多个球，在没有画布的情况下，以随机速度随机初始点反弹单球代码 var x, y, vx, vy; var SCREENHEIGHT, SCREENWIDTH; //this function runs on the initialization of the page function init() { SCREENWIDTH = window.innerWidth;

我想创建多个球，在没有画布的情况下，以随机速度随机初始点反弹

单球代码

        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>

var x，y，vx，vy；
屏幕高度、屏幕宽度；
//此函数在页面初始化时运行
函数init（）
{
SCREENWIDTH=window.innerWidth；
屏幕高度=window.innerHeight；
x=Math.random（）*屏幕宽度；
y=Math.random（）*屏幕高度；
vx=数学随机数（）*10-5；
vy=Math.random（）*10-5；
mainloop（）；
}
//函数永远重复运行
函数mainloop（）
{
x+=vx；
y+=vy；
如果（x>SCREENWIDTH-20 | | | xSCREENHEIGHT-20 | | | ySCREENWIDTH-20 | | | x[i]SCREENHEIGHT-20 | | y[i]您的代码不相同。您尝试在这两种情况下获取box元素，但在多球情况下失败，因为您的代码是
document.getElementById（框）

你的单球在哪
document.getElementById（“box”）
您的代码不相同。您尝试在这两种情况下获取box元素，但在多球情况下失败，因为您的代码是
document.getElementById（框）

你的单球在哪
document.getElementById（“box”）这就是我解决问题的方法。
我在html5画布上画球


var宽度=100；
var高度=200；
函数球（）{
//随机半径
this.radius=Math.floor（Math.random（）*（10-5+1））+5；
//随机x和y
this.x=Math.floor（Math.random（）*（宽度this.radius+1））+this.radius；
this.y=Math.floor（Math.random（）*（宽度this.radius+1））+this.radius；
//随机方向，+1或-1
this.dx=Math.floor（Math.random（）*2）*2-1；
this.dy=Math.floor（Math.random（）*2）*2-1；
//随机颜色，r、g或b
var rcol=Math.floor（Math.random（）*3）；
this.col=rcol==0？“红色”：
rcol==1？“蓝色”：“绿色”；
}
//创建一个球数组
numBalls=10；
var balls=新阵列（numBalls）；
对于（i=0；i单击框运行，这就是我解决问题的方法。
我在html5画布上画球


var宽度=100；
var高度=200；
函数球（）{
//随机半径
this.radius=Math.floor（Math.random（）*（10-5+1））+5；
//随机x和y
this.x=Math.floor（Math.random（）*（宽度this.radius+1））+this.radius；
this.y=Math.floor（Math.random（）*（宽度this.radius+1））+this.radius；
//随机方向，+1或-1
this.dx=Math.floor（Math.random（）*2）*2-1；
this.dy=Math.floor（Math.random（）*2）*2-1；
//随机颜色，r、g或b
var rcol=Math.floor（Math.random（）*3）；
this.col=rcol==0？“红色”：
rcol==1？“蓝色”：“绿色”；
}
//创建一个球数组
numBalls=10；
var balls=新阵列（numBalls）；
对于（i=0；i单击框运行什么类型的问题你在面对吗？多个球的代码没有运行。我想显示一个以随机速度反弹的50个球。我在文档中获取属性样式“null”的错误。MainLoop的getelement行是否抛出了任何特定错误？你是否有任何关于为什么它可能没有运行的其他信息？如果你不知道我在做什么，这是一个大任务出了什么问题，你的JavaScript控制台告诉你了什么？在Functionon MainLoop中，box未初始化什么类型的问题你在面对吗？多个球的代码没有运行。我想显示一个以随机速度反弹的50个球。我在文档中获取属性样式“null”的错误。MainLoop的getelement行是否抛出了任何特定错误？你是否有任何关于为什么它可能没有运行的其他信息？如果你不知道我在做什么，这是一个大任务s g
    <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>