Question

我正在进行某种jQuery游戏而被卡住了。我需要帮助两件事。

我有一个玩家的游戏板。玩家正在借助键盘上的箭头移动。我的问题是玩家走出了游戏板，我不想这样。我应该怎么做才能使它无法走出困境。
每次刷新时，我都会在随机的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);
}

Jquery，timeinterval和if语句

1 个答案: