How do I fix my automatically spawning food in my game using Jquery

Question

I'm trying to create a game using Jquery however I do have a big problem which I would appreciate help with.

First of all here are my 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 ==38) {
 if (y > spelLeftMin) {
    $("#box1").animate({top: '-=20px'}, 0);
    }
    }

    else if (e.keyCode ==40) {
  if (y < spelTopMax) {
    $("#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>").css('left',randPosX);
$("#spelplan").append(element);
}


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

<button class="new_pos">New position</button>


<div id="spelplan">
<div id="box1"></div>
<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>
<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;
}
}

So my question is: How do I make the food "rand" objects spawn at a random location within the gameboard "spelplan". It seems to be fine on the placement on the width however it does not place the objects correctly to the height of the gameboard and instead makes the objects spawn lower and lower on the website overtime.

Once again I would really appreciate any help I can get, thanks in advance!

score 1 · Accepted Answer · edited May 23 '17 at 12:17

1

First, you have not defined a random function for vertical positioning. To fix that, we need another random variable for vertical positioning:

var spelplanHeight = $('#spelplan').height();
var randPosY = Math.floor((Math.random()*spelplanHeight));

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

Now, If I understand correctly, you want all those small green boxes to appear within the blue box. To achieve that, make the following changes in your css:

 .rand {
   background-color:green;
   height:15px;
   width:15px;
   position:absolute;
   z-index:3;
   }

You can take a look at this answer too.

Working fiddle

edited May 23 '17 at 12:17

Community

1
1

answered Apr 15 '17 at 23:30

jrook

3,459
1
16
33

Thanks for the help, it kind of worked the small green boxes now spawn within the blue box but they are spawning diagonally on the same line sort of. Do you know how to fix this issue so that the small green boxes just appear at a completly random place within the blue box? Once again thanks for the help I really appreciate it. – John Apr 15 '17 at 23:44
the issue persists the small boxes contine to spawn diagonally within the blue box – John Apr 15 '17 at 23:52
Make sure to apply `randPosY` and `randPosX` correctl – jrook Apr 16 '17 at 00:10
Ah, in my code I had randPosX where it should have been randPosY fixed it now. Thank you so much for all the help! – John Apr 16 '17 at 00:12

How do I fix my automatically spawning food in my game using Jquery

1 Answers1