需要帮助在javascript中创建随机div吗

我正在尝试做一个游戏，我只需要做一个这样的游戏，每隔一段时间，一个div（看起来像棒球）就会出现在某个特定的位置。我不知道问题出在哪里，我知道if，elseif语句是有效的，但是当我让它创建divs时，它就不起作用了。代码如下：

function createball() {
    rand = parseInt( Math.random() * 4);
    if (rand == 0 ) {    
        baseball = document.createElement("div")
        baseball.style.position="absolute";
        baseball.innerHTML = "<img src='baseball.png'  height=\"20px\" width=\"20px\"/>";
        document.getElementById("field").appendChild(baseball);
        baseball.style.height = "30px";
        baseball.style.width = "30";
        baseball.style.top = "20";
        baseball.style.left = "20";
        setCPS(calculateCPS());
    } else if (rand ==1) {
        baseball = document.createElement("div")
        baseball.style.position="absolute";
        baseball.innerHTML = "<img src='baseball.png'  height=\"20px\" width=\"20px\"/>";
        document.getElementById("field").appendChild(baseball);
        baseball.style.height = "30px";
        baseball.style.width = "30";
        baseball.style.top = "20";
        baseball.style.left = "20";
        setCPS(calculateCPS());
    } else if (rand == 2) {
        baseball = document.createElement("div")
        baseball.style.position="absolute";
        baseball.innerHTML = "<img src='baseball.png'  height=\"20px\" width=\"20px\"/>";
        document.getElementById("field").appendChild(baseball);
        baseball.style.height = "30px";
        baseball.style.width = "30";
        baseball.style.top = "20";
        baseball.style.left = "20";
        setCPS(calculateCPS());
    } else if (rand == 3) {
        baseball = document.createElement("div")
        baseball.style.position="absolute";
        baseball.innerHTML = "<img src='baseball.png'  height=\"20px\" width=\"20px\"/>";
        document.getElementById("field").appendChild(baseball);
        baseball.style.height = "30px";
        baseball.style.width = "30";
        baseball.style.top = "20";
        baseball.style.left = "20";
        setCPS(calculateCPS());
    }
}

函数createball（）{
rand=parseInt（Math.random（）*4）；
如果（rand==0）{
棒球=document.createElement（“div”）
棒球.style.position=“绝对”；
barball.innerHTML=“”；
document.getElementById（“字段”）.appendChild（棒球）；
basketball.style.height=“30px”；
basketball.style.width=“30”；
basketball.style.top=“20”；
basketball.style.left=“20”；
setCPS（calculateCPS（））；
}else if（rand==1）{
棒球=document.createElement（“div”）
棒球.style.position=“绝对”；
barball.innerHTML=“”；
document.getElementById（“字段”）.appendChild（棒球）；
basketball.style.height=“30px”；
basketball.style.width=“30”；
basketball.style.top=“20”；
basketball.style.left=“20”；
setCPS（calculateCPS（））；
}else if（rand==2）{
棒球=document.createElement（“div”）
棒球.style.position=“绝对”；
barball.innerHTML=“”；
document.getElementById（“字段”）.appendChild（棒球）；
basketball.style.height=“30px”；
basketball.style.width=“30”；
basketball.style.top=“20”；
basketball.style.left=“20”；
setCPS（calculateCPS（））；
}否则如果（兰德==3）{
棒球=document.createElement（“div”）
棒球.style.position=“绝对”；
barball.innerHTML=“”；
document.getElementById（“字段”）.appendChild（棒球）；
basketball.style.height=“30px”；
basketball.style.width=“30”；
basketball.style.top=“20”；
basketball.style.left=“20”；
setCPS（calculateCPS（））；
}
}

您什么时候调用此函数的？ 由于javascript是单线程的，所以您必须释放线程来渲染，线程才有机会绘制它

使用

setTimeout(createball, 0);

调用函数可能会起作用

另一个问题，你是否故意不移除旧棒球？ 棒球变量需要是全球性的吗

如果不是，使用var声明变量是一个更好的决定，以避免污染您的全局范围

我已经重写了你的代码如下，希望它为你工作

function createball() {
    var rand = parseInt( Math.random() * 4),
        baseball = document.createElement("div");
    baseball.style.position="absolute";
    baseball.innerHTML = "<img src='baseball.png'  height=\"20px\" width=\"20px\"/>";
    document.getElementById("field").appendChild(baseball);
    baseball.style.height = "30px";
    baseball.style.width = "30";

    if (rand == 0 ) {
        baseball.style.top = "20";
        baseball.style.left = "20";
    } else if (rand ==1) {
        baseball.style.top = "20";
        baseball.style.left = "20";
    } else if (rand == 2) {
        baseball.style.top = "20";
        baseball.style.left = "20";
    } else if (rand == 3) {
        baseball.style.top = "20";
        baseball.style.left = "20";
    }
    setCPS(calculateCPS());
}

函数createball（）{
var rand=parseInt（Math.random（）*4），
棒球=document.createElement（“div”）；
棒球.style.position=“绝对”；
barball.innerHTML=“”；
document.getElementById（“字段”）.appendChild（棒球）；
basketball.style.height=“30px”；
basketball.style.width=“30”；
如果（rand==0）{
basketball.style.top=“20”；
basketball.style.left=“20”；
}else if（rand==1）{
basketball.style.top=“20”；
basketball.style.left=“20”；
}else if（rand==2）{
basketball.style.top=“20”；
basketball.style.left=“20”；
}否则如果（兰德==3）{
basketball.style.top=“20”；
basketball.style.left=“20”；
}
setCPS（calculateCPS（））；
}

为什么不将所有不同的配置放在一个对象中，然后只应用config[rand]？控制台输出是什么？当我编辑此代码以提高可读性时，我忍不住注意到所有4种情况下的代码都是相同的。这是故意的吗？代码是相同的，只是为了看看它是否有效，它们会非常相似，唯一的区别是它们的位置会不同。我用

setInterval（createball，1000）

来称呼它。谢谢你的代码，它的问题和我一样，它正在创建div，但它们也都在同一个位置，如果用户能够抓住棒球，棒球将被移除，因此最终它们将被移除。我现在遇到的问题是，它总是在左上角创建div，位置不变（我更改了每个球的左上角值）