jquery，timeinterval和if语句

Question

我在做某种jQuery游戏并卡住了。我需要帮助两件事。

1. 我有一个玩家玩板。玩家正在键盘上的箭头帮助下移动。我的问题是玩家不在游戏板之外，我不想要这个。我该怎么做才能使它无法在盒子外面出现。

2. 我做了某种“食物”，每次刷新时随机产生一个X位置。但是我希望它每隔一秒产生一个随机位置，因此在板上可以有多个“食物”。

以下是我有：

$(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）使用setInterval而不是setTimeout。 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); 
}