javascript - 如何使物体一遍又一遍地自动出现

我正在尝试使用Jquery创建游戏，但是我确实有一些问题，这是我非常希望获得帮助的主要问题。

首先，这是我的代码。

HTML：

   <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style20.css"><title>     Jquery spel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $(document).keydown(function(e){
    var spelLeftMax = $('#spelplan').width();
    var spelLeftMin = $('#box1').width();
    var spelTopMax = $('#spelplan').height();
    var spelTopMin = $('#box1').height();

    var x = $('#box1').position().left + $('#box1').width();
    var y = $('#box1').position().top + $('#box1').height();


    if (e.keyCode ==39){
        if (x < spelLeftMax) {
            $("#box1").animate({left: '+=20px'}, 0);
        }
    }

    else if (e.keyCode ==37) {
        if (x > spelLeftMin) {
            $("#box1").animate({left: '-=20px'}, 0);
        }
    }

    else if (e.keycode ==40) {
        if (y < spelTopMax) {
            $("#box1").animate({top: '+=20px'}, 0)
        }
    }

    else if (e.keycode ==38) {
        if (y > spelTopMin) {
            $("#box1").animate({top: '-=20px'}, 0)
        }
    }

    else if (e.keyCode ==38)
        $("#box1").animate({top: '-=20px'}, 0);
    else if (e.keyCode ==40)
        $("#box1").animate({top: '+=20px'}, 0);
    });

setInterval(spawnrand,1000);
});

function spawnrand(){
var spelplanWidth = $('#spelplan').width();
var randPosX = Math.floor((Math.random()*spelplanWidth));
var element = "<div class='rand'></div>"
$(element).css('left',randPosX);
$("#spelplan").append(element);
}


</script>
</head>
<body>
<header class="col-12 col-m-12">
<h1>Titel</h1>
</header>

<div id="rand_pos" class="rand"></div>
<div id="pos_log" class="log">x: 0<br />y: 0</div>
<button class="new_pos">New position</button>


<div id="spelplan">
<div id="box1"></div>
<br>
<p>Lives:</p>
<p>Score:</p>
</div>
</div>

</body>

</html>

CSS：

  *{
    box-sizing : border-box;
    margin:0;
    padding:0;
    }

body {
background-color: black;
}

header {
position:absolute;
top:50px;
color:white;
text-align:center;
}



#rand_pos{
position: absolute;
top:20%;
left: 30%;
z-index: 10;
}

#box1 {
background-color:red;
height:50px;
width:50px;
position:absolute;
left:30%;
top:150px;

}
p {
position:relative;
left:10px;
color:white;
}
#spelplan {
position:absolute;
left:25%;
top:20%;
height:600px;
width:600px;
background-color:blue;
border-style:double;
border-radius:40px;

}


.rand {
background-color:green;
height:15px;
width:15px;
position:relative;
left:30%;
top:150px;
z-index:-1;
}


.new_pos {
background: #ccc;
border: 1px solid #000;
padding: 5px;
box-shadow: 0 0 20px #555;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.new_pos:hover {
background: #bbb;
box-shadow: 0 0 20px #222;
}


.new_pos:active {
box-shadow: 0 0 20px #000;
background: #aaa;
}


*:focus {
 outline: none;
}



.new_pos {
 position: fixed;
left: 0;
bottom: 0;
cursor: pointer;
}








/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
img {
    width: 80%;
    height: auto;
}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
img {
    width:100%;
    height:auto;
}
}`

现在我的问题是：

如何在游戏中自动生成食物“ rand”？
如何使自动生成的食物“ rand”在游戏板“ Spelplan”中的随机位置生成？

再次感谢您能提供的任何帮助！

最佳答案

这不是真的工作：

var element = "<div class='rand'></div>"
$(element).css('left',randPosX);
$("#spelplan").append(element);

原因元素只是一个字符串。可以这样做：

var element = $("<div class='rand'></div>").css('left',randPosX);
$("#spelplan").append(element);

关于javascript - 如何使物体一遍又一遍地自动出现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43428176/