jQuery를 산란 DIV 및 충돌 감지

Question

거의 두 주요 것들을 내가 알아낼 수없는 우리 학교 숙제 프로젝트 메신저의 끝에 그래서 메신저

:

1.How 무작위로 파이프 장애물을 산란을 새가 날아갈 수 있도록 틈새 위치 (틈새 위치에 대한 파이프 div의 CSS '오른쪽'속성을 변경하는 기능 사용) 및 화면 맨 아래로 가면 파이프 제거. (그것의 거꾸로 flappy 버드 게임처럼 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

우선 코드를 정렬하고 파이프에 대해 다양한 너비 그룹 클래스 ('.zero', '.one'등)를 설정하기 위해 CSS를 조금 변경했습니다. 너비 그룹을 더 추가 할 수 있습니다 또는 나중에 편집하지만 파이프 측면 너비와 새 너비 간의 비율을 확인하십시오. JS에서

#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%; 
} 

이의에서는 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); 

예 : Please recommend a JQuery plugin that handles collision detection for draggable elements

나 : http://jsfiddle.net/u38ratk9/8/ 충돌에 대한

, 선택의 여지가 당신이 예를 들어이 질문에 확인할 수있다 많이있다 Basic 2d collision detection

을, 그냥 검색.