Question

我正在用jquery创建一个游戏，游戏的意义是你应该用一个元素（在这种情况下是一个桶＆＃34;＃spelare＆＃34;）捕获其他元素＆＃34; .food＆＃ 34;从上面掉下来的。我怎样才能让落下的元素触及（桶），它们会消失，你得到1分？

提前感谢我能得到的所有帮助！

以下是我的代码：

＆＃13;

 body{
            text-align: center;
            background-color:black;
        }

        #spelplan{
            width: 1000px;
            height:610px;
            position:absolute;
            margin-left:460px;
            box-shadow: inset 0px 0px 50px;
             background-color: green;
        }
        #spelare{
            width:110px;
            height: 12vh;
            position: relative;
            top:53.4vh;
            background-image:url(hink.png);
            background-size:cover;

        }


        .food{
            width:50px;
            height:50px;
            position:absolute;
            background-image:url(vattendroppe.png);
            background-size:cover;
            display:block;
        }

        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;

        }

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Jquery Spel</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(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);
            });

          setInterval(spawnFood,2000);
          setInterval(fall, 0);
          });


        function spawnFood(){
var spelplanWidth = $('#spelplan').width();
var randPosX = Math.floor((Math.random()*spelplanWidth));
var element = $("<div class='food'></div>").css('left',randPosX).css('bottom', '446px');
$("#spelplan").append(element);
}

function fall(){
    var elementFall = $(".food").animate({top: '+=20px'}, 500);
    $("#spelplan").append(elementFall);
}
    
    </script>
    
</head>
<body>
<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>

<div id="info"> 
<h1> Instruktioner: </h1>
<p> Spelet går ut på att du med hjälp av hinken och piltangenterna ska fånga alla vattendroppar! <br/> Du måste hålla ut i 40 sekunder, missa tre vattendroppar så förlorar du!  </p>
</div>


</body>
</html>

＆＃13;

Answer 1

您必须不断比较每个下降元素位置与铲斗位置。

一个不错的地方就在你的fall()功能中看看吧！

CodePen

$(document).ready(function(){


  var score=0;
  var fails=0;

  //Bucket movement
  $(document).keydown(function(e){ 
    //console.log(e.which);

    // if left or right keyboard arrow
    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);  
  });


  // Game init
  var spanfoodInterval = setInterval(spawnFood,2000);
  var fallInterval = setInterval(fall, 0);


  // Water append
  function spawnFood(){
    var spelplanWidth = $('#spelplan').width();
    var randPosX = Math.floor((Math.random()*spelplanWidth));
    var element = $("<div class='food'></div>").css('left',randPosX).css('bottom', '446px');
    $("#spelplan").append(element);
  }

  // dropping object animation
  function fall(){
    var elementFall = $(".food").animate({top: '+=20px'}, 500);
    //$("#spelplan").append(elementFall);

    $(".food").each(function(){

      if( typeof($(this)) !="undefined" && typeof($("#spelare"))!="undefined" ){

        // item position
        var thisPosition = $(this).position();
        var thisWidth = $(this).width();

        // Bucket position and width
        var bucketPosition = $("#spelare").position();
        var bucketWidth = $("#spelare").width();
        var bucketHeight = $("#spelare").height();


        // If object and bucket at same position
        if( thisPosition.top >= bucketPosition.top 
           && thisPosition.left >= bucketPosition.left
           && thisPosition.left <= bucketPosition.left + bucketWidth ){

          $(this).remove();
          score++;
          //console.log(score);

          // Update the score display
          $("#score").html(score);
        }

        // Food not catched...
        if( thisPosition.top >= bucketPosition.top + bucketHeight){
          $(this).remove();
          fails++;
          //console.log("FAILS: "+fails);
        }

        // if more than 3 miss => Game over.
        if(fails>3){
          $("#failMsg").show();
          $("#spelare").remove();
          $(".food").remove();
          clearInterval(spanfoodInterval);
          clearInterval(fallInterval);
        }
      }
    });
  }


}); // ready

body{
  text-align: center;
  background-color:black;
}

#spelplan{
  width: 1000px;
  height:610px;
  position:absolute;
  margin-left:460px;
  box-shadow: inset 0px 0px 50px;
  background-color: green;
}
#spelare{
  width:110px;
  height: 12vh;
  position: relative;
  top:53.4vh;
  background-image:url(https://placehold.it/350x150);    /* hink.png); */
  background-size:cover;

}


.food{
  width:50px;
  height:50px;
  position:absolute;
  background-image:url(https://placehold.it/350x150);  /* vattendroppe.png); */
  background-size:cover;
  display:block;
}

p{
  position:relative;
  font-family: 'Electrolize', sans-serif;
}

#failMsg{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(50% 50%);
  color:white;
  font-size:4em;
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
    

<h2 style="color:white">jQuery GAMES - Your score: <span id="score">0</span></h2><!-- 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>

<div id="info"> 
  <h1> Instructions: </h1>
  <p> The game is that you are using the bucket and the arrow keys to catch all the drops of water! <br/> You have to hold out for 40 seconds, missing three water drops, you lose! </p>
</div>

<div id="failMsg">Game over!</div>

JQuery游戏，元素在与另一个元素问题接触时消失

1 个答案: