html5 - Jquery, timeinterval and if statements -

im doing kind of jquery game , got stuck. need 2 things.

1. i have playing board player. player moving of arrows on keyboard. problem player goes outside of playing board, don't want this. should make not able go outside of box.

2. i have made kind of "food" spawns @ random x location every time refresh. want spawn @ random location every 1 second example, , there therefore can more 1 "food" on board.

here have:

$(document).ready(function() {    $(document).keydown(function(e) {       if (e.keycode ==39 && $("#spelare").css("left") < '880px')          $("#spelare").animate({left: '+=20px'}, 0);      else if (e.keycode ==37 && $("#spelare").css("left") > '0px')         $("#spelare").animate({left: '-=20px'}, 0);    });      $('.food').each(function() {      var spelplanwidth = $('#spelplan').width();//screen width      var foodposx = math.floor((math.random() * spelplanwidth));        $(this).css('left', foodposx);      setinterval(function() {        var spelplanwidth = $('#spelplan').width();//screen width        var foodposx = math.floor((math.random()*spelplanwidth));               $(this).css('left', foodposx);      }, 1000);    });  });

body {    text-align: center;    background-color:black;  }    #spelplan{    width: 50%;    height:65vh;    position:absolute;    margin-left:25%;    box-shadow: inset 0px 0px 50px;    background-color: green;  }  #spelare{    width:15%;    height: 12vh;    position: relative;    top:53.4vh;    background-color:red;  }    .food{    width:5%;    height:5vh;    position:relative;    background-color:blue;  }    p {    position:relative;    font-family: 'electrolize', sans-serif;  }    #poäng{    color:white;    bottom:17vh;    right:45%;  }    #liv{    color:white;    bottom:18vh;    right:46.5%;  }    .fa-heart{    color:red;    bottom:21.5vh;    right:43.5%;    position:relative;  }    #info{    color:white;    font-family: 'electrolize', sans-serif;    margin-top:68vh;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <h2 style="color:white">jquery spel</h2>  <div id="spelplan">    <div id="spelare"> </div>    <div class="food"> </div>    <p id="poäng"> poäng:   </p>    <p id="liv"> liv: </p>    <i class="fa fa-heart" aria-hidden="true"></i>  </div>

1) keep player moving far, need add condition if statement before moving each direction make sure won't exceed game board

2) use setinterval instead of settimeout. settimeout calls function once after set period. setinterval repeats forever until told stop clearinterval(). if needed you, must assign setinterval function variable can access later.

$(document).ready(function(){   $(document).keydown(function(e){          if (e.keycode ==39 && $("#spelare").css("left") < 800) //or whatever right position             $("#spelare").animate({left: '+=20px'}, 0);         else if (e.keycode ==37 && $("#spelare").css("left") > 100)              $("#spelare").animate({left: '-=20px'}, 0);     });    setinterval(spawnfood,1000); });  function spawnfood(){    var spelplanwidth = $('#spelplan').width();    var foodposx = math.floor((math.random()*spelplanwidth));    var element = "<div class='food'></div>"    $(element).css('left',foodposx);    $("#spelplan").append(element); }