jQuery的產卵股利和碰撞檢測

Question

所以幾乎在我的學校的作業項目IM的結束只是缺少兩個主要的事情我似乎無法弄清楚IM：

1.How用隨機產卵管障礙位置，以便鳥可以飛過（使用一個函數來改變管道div的css'right'attr位置），並在管道離開屏幕底部時移除管道。 （它是一個倒立的飛鳥遊戲，如btw ..）

2.Second我需要一個幫助與碰撞檢測功能，所以我知道什麼時候比賽結束（這是不太重要的艱難，因爲我認爲我可以找出後生病解決第一個問題）

$(document).ready(function(){ 
//Variables 
var screenWidth = $(window).width();//Screen width 
var screenHeight = $(window).height();//Screen height 
var birdWidth = $("#bird").width();//bird width 
var y = 0;//Background y position 
var astY = 0;//Pipe position 

var bird = {//bird properties 
    goingLeft: false, 
    goingRight: false, 
    lspeed: 0, 
    rspeed: 0, 
    maxSpeed: 10 
}; 

setBirdPosition(screenWidth/2 - birdWidth/2, screenHeight/1.3 - birdWidth/2); 
startBackgroundMovement(); 
spawnPipe(); 


//Start move the screen 
function startBackgroundMovement(){ 
    setInterval(function() 
    { 
     y+=1; 
    $('body').css('background-position-y',y + 'px'); 
    }, 10); 
} 


//bird starting position 
function setBirdPosition(posX, posY) { 
    $("#bird").css("left", posX); 
    $("#bird").css("top", posY); 
    bird.position = posX; 
} 
(function birdLoop() { 
    if (bird.goingLeft) { 
     bird.lspeed = Math.min(bird.lspeed *1.1 || 1, bird.maxSpeed); 
    } else { 
     bird.lspeed = Math.max(bird.lspeed - 0.5, 0); 
    } 
    if (bird.goingRight) { 
     bird.rspeed = Math.min(bird.rspeed *1.1 || 1, bird.maxSpeed); 
    } else { 
     bird.rspeed = Math.max(bird.rspeed - 0.5, 0); 
    } 
    bird.position = bird.position + (bird.rspeed - bird.lspeed); 
    $("#bird").css('left', bird.position); 
    requestAnimationFrame(birdLoop); 
}()); 

//Move bird 
$(document).keydown(function(e){ 
    switch(e.which){ 
     case 37://left 
      bird.goingLeft= true; 
      //left edge of screen 
     if (bird.position < 0) { 
     bird.position = 0; 
     } 
     break; 
     case 39://right 
      bird.goingRight= true; 
      //right edge of screen 
     if (bird.position > screenWidth - birdWidth) { 
     bird.position = screenWidth - birdWidth; 
     } 
     default: return;  
    e.preventDefault();//not sure if needed 
    } 
}).keyup(function(e){ 
    switch(e.which){ 
     case 37://left 
      bird.goingLeft= false; 
      //left edge of screen 
     if (bird.position < 0) { 
     bird.position = 0; 
     } 
      break; 
     case 39://right 
      bird.goingRight= false; 
      //right edge of screen 
     if (bird.position > screenWidth - birdWidth) { 
     bird.position = screenWidth - birdWidth; 
     } 
     default: return;  
    e.preventDefault();//not sure if needed 
    } 
}); 

function spawnPipe()//spawn pipes 
{ 
    setInterval(function() 
    { 
     astY += 1; 
     $("#fullPipe").css("top", astY);    
    }, 10); 
} 
}); 

檢查：http://jsfiddle.net/u38ratk9/6/

Answer 1

如何產卵管障礙

管道以固定間隔或距離發生。您可以檢查已過的時間，也可以檢查現有管道的行駛距離。

其次我需要與碰撞檢測

管道具有寬度和高度，以及位置的幫助。基本上，你的管道是盒子。這對鳥來說也是一樣。我相信它被稱爲「邊界框」。您可以檢查鳥的任何邊緣是否與箱子的邊緣相交。

Answer 2

首先，我已經改變了你的CSS來安排代碼併爲管道設置不同的寬度組類（'.zero'，'.one'等），你可以添加更多的寬度組或稍後進行編輯，但請注意管側寬度與鳥寬度之間的比率。

#bird 
{ 
    position:absolute; 
    width:4%; 
    height: auto; 
    right:0; 
} 

#fullPipe 
{ 
    position:absolute; 
    width:100%; 
    left:0%; 
    height: 10%; 
} 

#leftPipe, #rightPipe 
{ 
    position:absolute; 
    top:0; 
    width:48%; 
    height: 100%; 
} 

#leftPipe 
{ 
    left:0%; 
} 

#rightPipe 
{ 
    right:0%; 
} 

.zero #leftPipe, .zero #rightPipe 
{ 
    width:48%; 
} 

.one #leftPipe 
{ 
    width:8%; 
} 

.one #rightPipe 
{ 
    width:88%; 
} 

.two #leftPipe 
{ 
    width:28%; 
} 

.two #rightPipe 
{ 
    width:68%; 
} 

.three #leftPipe 
{ 
    width:58%; 
} 

.three #rightPipe 
{ 
    width:38%; 
} 

.four #leftPipe 
{ 
    width:88%; 
} 

.four #rightPipe 
{ 
    width:8%; 
} 

#leftPipe img, #rightPipe img 
{ 
    width:100%; 
    height: 100%; 
} 

在JS

，注意的setInterval（）中的條件，我將它設置爲現在以「700」爲示範，但是之後您將設置碰撞準備好了，你可以與如果條件更換管道和身體不碰撞（超出框架），然後重置管道並設置新的寬度組類。

var PipesRandom; 
    var PipesWidth = ['zero', 'one', 'two', 'three', 'four']; 
    function spawnPipe(astY){ //spawn asteroids 
     $('#fullPipe').css("top", astY); 
    } 
    setInterval(function(){ 
     astY += 1; 
     if(astY < 700){ 
      spawnPipe(astY); 
     } 
     else { 
      astY = -100; 
      PipesRandom = PipesWidth[Math.floor(Math.random() * PipesWidth.length)]; 
      $('#fullPipe').removeClass('zero one two three four'); 
      $('#fullPipe').addClass(PipesRandom); 
      spawnPipe(astY); 
     } 
    } ,10); 

例如：http://jsfiddle.net/u38ratk9/8/

關於碰撞，有很多的選擇，你可以檢查，例如這個問題：Please recommend a JQuery plugin that handles collision detection for draggable elements

或：Basic 2d collision detection

有很多，只是搜索。