Javascript div游戏中的弹跳img_Javascript_Html_Css

Javascript div游戏中的弹跳img

javascript html css

Javascript div游戏中的弹跳img,javascript,html,css,Javascript,Html,Css,我的javascript代码有问题。我想编辑代码来制作我的迷你游戏这是我试图编辑的原始代码。是关于弹跳球的。当你按下按钮时，球开始反弹。球处于随机位置，每个球都随机移动。当他们即将逃离边境时，他们正在返回。这段代码中的所有内容都非常完美。原始代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #border {height:500px; w

我的javascript代码有问题。我想编辑代码来制作我的迷你游戏

这是我试图编辑的原始代码。是关于弹跳球的。当你按下按钮时，球开始反弹。球处于随机位置，每个球都随机移动。当他们即将逃离边境时，他们正在返回。这段代码中的所有内容都非常完美。 原始代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    #border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
    b {display:block; height:10px; width:10px; border-radius:5px; background:red; position:absolute}
    h1,div {text-align:center; margin:10px}
</style>
</head>
<body>

</body>

<h1>Balls</h1>
<div id='border'>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b></b>
</div>

<div>
    <button onclick="run=false"> Stop </button>
    <button onclick="run=true;start()"> Start </button>
</div>


<script>
        var b=document.getElementsByTagName('B');
        var run=false;
        var i;
        for(i=0;i<b.length;i++)
        {
            b[i].x=Math.random()*490;
            b[i].y=Math.random()*490;

            b[i].vx=Math.random()*20-10;
            b[i].vy=Math.random()*20-10;

            b[i].style.left=b[i].x+"px";
            b[i].style.top =b[i].y+"px";
        }

    function start()
    {
        var i;
        for(i=0;i<b.length;i++)
        {
            b[i].x+=b[i].vx;
            b[i].y+=b[i].vy;

            if(b[i].x>490 || b[i].x<0)  b[i].vx*=-1;
            if(b[i].y>490 || b[i].y<0)  b[i].vy*=-1;

            b[i].style.left=b[i].x+"px";
            b[i].style.top =b[i].y+"px";
        }

        if(run)
            setTimeout(start,20);

    }
</script>

</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    #border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
    img {display:block; height:10px; width:10px; position:absolute}
    h1,div {text-align:center; margin:10px}
</style>
</head>
<body>

</body>

<h1>Balls</h1>
<div id='border'>
    <img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
    <img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
    <img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
</div>

<div>
    <button onclick="run=false"> Stop </button>
    <button onclick="run=true; start()"> Start </button>
</div>


<script>
        var b=document.getElementsByTagName('IMG');
        var run=false;
        var i;
        for(i=0; i<b.length; i++)
        {
            b[i].x=Math.random()*490;
            b[i].y=Math.random()*490;

            b[i].vx=Math.random()*20-10;
            b[i].vy=Math.random()*20-10;

            b[i].style.left=b[i].x+"px";
            b[i].style.top =b[i].y+"px";
        }

    function start()
    {
        var i;
        for(i=0; i<b.length; i++)
        {
            b[i].x+=b[i].vx;
            b[i].y+=b[i].vy;

            if(b[i].x>490 || b[i].x<0)  b[i].vx*=-1;
            if(b[i].y>490 || b[i].y<0)  b[i].vy*=-1;

            b[i].style.left=b[i].x+"px";
            b[i].style.top =b[i].y+"px";
        }

        if(run)
            setTimeout(start,20);

    }
</script>

</html>


#边框{高度：500px；宽度：500px；边框：1px纯灰；边距：自动；位置：相对}
{显示：块；高度：10px；宽度：10px；边框半径：5px；背景：红色；位置：绝对}
h1，div{文本对齐：居中；边距：10px}
球
停止
开始
var b=document.getElementsByTagName（'b'）；
var-run=false；
var i；
对于（i=0；i而不是使用
，请使用
b {background-image: url("http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354");
background-repeat: no-repeat;
background-position: right top;}

代码不使用img
标记的原因概述如下：
HTMLImageElement.x
只读返回表示
与最近层的水平偏移。此属性模拟旧层
网景4行为
HTMLImageElement.y
只读返回长字符串
表示距最近图层的垂直偏移。此属性
模仿旧的Netscape 4行为
作为解决方法，您可以在b
标记上使用，或将坐标属性名称更改为，即currentX
和currentY