Jquery, timeinterval 및 if 문

Question

jQuery 게임을하고 있고 붙어있어. 나는 두 가지 도움이 필요하다.

1. 나는 플레이어가있는 게임 보드가 있습니다. 플레이어는 키보드의 화살표를 사용하여 움직이고 있습니다. 내 문제는 플레이어가 게임 보드 밖으로 나가는 것을 원하지 않는다는 것입니다. 상자 밖으로 나오지 못하게하려면 어떻게해야합니까?

2. 나는 새로 고침 할 때마다 임의의 X 위치에서 생성되는 일종의 "음식"을 만들었습니다. 그러나 나는 그것이 예를 들어 1 초마다 임의의 위치에 산란하기를 원하며 따라서 보드에 하나 이상의 "음식"이있을 수 있습니다. 여기

내가 무엇을 가지고 :

$(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>

Answer 1

1) 너무 멀리 이동 플레이어를 유지하려면 각을 이동하기 전에 if 문에 조건을 추가 할 필요가 방향을 선택하여 게임 보드를 초과하지 않도록하십시오.

2) setTimeout 대신 setInterval을 사용하십시오. setTimeout은 설정 한 기간 후에 함수를 한 번 호출합니다. setInterval은 clearInterval()에 들르기 전까지 영원히 반복됩니다. 필요한 경우 나중에 액세스 할 수있는 변수에 setInterval 함수를 할당해야합니다.

$(document).ready(function(){ 
    $(document).keydown(function(e){ 
     if (e.keyCode ==39 && $("#spelare").css("left") < 800) //or whatever your right most position is 
      $("#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); 
}