jquery - jQuery产生div和碰撞检测

因此，在我的学校作业项目快要结束时，我只是错过了我似乎无法弄清的两件主要事情：

1，如何在缝隙的随机位置处生成管道障碍物，以便鸟可以飞过（想像一下如何使用函数来更改缝隙位置的div的css'right'attr），并在出现以下情况时移除管道它从屏幕底部消失。 （它是像btw。这样的倒盘状飞禽游戏。）

2.其次，我需要碰撞检测功能的帮助，因此我知道游戏结束的时间（这是次重要的困难原因，我认为在解决第一个问题后可以解决）

$(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/

最佳答案

如何产生管道障碍


管道以规则的间隔或距离发生。您可以检查经过的时间，也可以检查现有管道的行进距离。


  其次，我需要碰撞检测方面的帮助


管道具有宽度和高度以及位置。本质上，您的管道是盒子。这对鸟来说也一样。我相信它被称为“边界框”。您可以检查鸟的边缘是否与盒子的边缘相交。

关于jquery - jQuery产生div和碰撞检测，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27642471/