JQuery遊戲中，元素在與另一個元素聯繫時消失

-1

我正在用jquery創建一個遊戲，遊戲的意思是你應該用一個元素（本例中爲「#spelare」）抓住其他元素從上面掉下來的「食物」。我怎麼能讓下降的元素碰到（桶）時，他們消失了，你得到1分？JQuery遊戲中，元素在與另一個元素聯繫時消失

在此先感謝您爲我提供的所有幫助！

這裏是我有個大氣壓代碼：

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; 
 

 
     }

<!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>

來源

2017-04-16 beckman

你必須constently比較與剷鬥位置每個下降元素位置。

一個不錯的地方是你的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>

來源

2017-04-16 21:04:30

JQuery遊戲中，元素在與另一個元素聯繫時消失

回答

相關問題