Wie man ein Objekt immer wieder automatisch erscheinen lässt

Ich versuche ein Spiel mit Jquery zu erstellen, aber ich habe ein paar Probleme, das ist ein großes, mit dem ich wirklich Hilfe zu schätzen wüsste.Wie man ein Objekt immer wieder automatisch erscheinen lässt

Vor allem hier sind meine Codes.

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; 
} 
}`

Nun meine Fragen:

Wie mache ich das Essen "rand" in meinem Spiel Spawn automatisch?
Wie mache ich das automatisch hervorbringende Essen "rand" an einem zufälligen Ort innerhalb des Spielplans "spelplan" spawnen?

Wieder einmal würde ich wirklich jede Hilfe dankbar ich, Dank im Voraus bekommen!

Quelle

2017-04-15 John

Dieses ist nicht wirklich funktioniert:

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

Ursache Element ist nur eine Zeichenfolge. Kann folgendes tun:

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

Quelle

2017-04-15 16:04:14

@ guest271314 ich weiß. Schau doch nochmal nach ... –

@Jonasw Vielen Dank es kommt nun automatisch hervor! Nun das Problem ist, dass ich die Objekte "rand" brauche, um innerhalb des Spielplans "spelplan" irgendwelche Vorschläge zu machen, wie ich das mache? – John

@ guest271314 Sie sollten das jquery Objekt nicht die Zeichenfolge 'element' anhängen – xar

Wie man ein Objekt immer wieder automatisch erscheinen lässt

Antwort

Verwandte Themen