如何使对象一遍又一遍地自动出现

我试图用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; 
} 
}`

现在我的问题：

如何使食物 “兰特” 在我的游戏产卵自动？
如何在游戏板“spelplan”内的随机位置产生自动产卵食物“rand”？

再一次，我会非常感谢任何帮助，我可以得到，在此先感谢！

来源

2017-04-15 John

这个心不是真正的工作：

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);

来源

2017-04-15 16:04:14

@ guest271314我知道。再次看看... –

@Jonasw非常感谢你，现在它自动产生！现在的问题是，我需要在游戏板“spelplan”中产生对象“rand”以提供有关我如何执行此操作的任何建议？ – John

@ guest271314你应该追加jquery对象而不是字符串'element' – xar

如何使对象一遍又一遍地自动出现

回答

相关问题