jQuery生成div和冲突检测

因此，我的学校作业项目快结束了，我错过了两件我似乎无法理解的主要事情：

1.如何生成带有随机位置的管道障碍物，以便鸟可以飞过去（尽管使用了一个函数，该函数可以更改管道div的css“right”属性，使其位于间隙位置），并在管道离开屏幕底部时移除管道。（顺便说一句，这是一个倒立的飞禽游戏）

2.第二，我需要一个碰撞检测功能的帮助，以便我知道游戏何时结束（这不太重要，因为我想我可以在解决第一个问题后解决）

$（文档）.ready（函数（）{
//变数
var screenWidth=$（窗口）.width（）；//屏幕宽度
var screenHeight=$（window）.height（）；//屏幕高度
var birdWidth=$（“#bird”）.width（）；//bird width
变量y=0；//背景y位置
var astY=0；//管道位置
var bird={//bird属性
戈因格夫特：错，
正确：错误，
速度：0，
rspeed:0，
最高速度：10
};
立根位置（屏幕宽度/2-鸟宽/2，屏幕高度/1.3-鸟宽/2）；
开始背景运动（）；
产卵管（）；
//开始移动屏幕
函数startBackgroundMovement（）{
setInterval（函数（）
{
y+=1；
$（'body'）.css（'background-position-y'，y+'px'）；
}, 10);
}
//鸟的起始位置
函数设置位置（posX、posY）{
$（“#鸟”）.css（“左”，posX）；
$（#bird”）.css（“top”，posY）；
bird.position=posX；
}
（函数birdLoop（）{
if（鸟鸣）{
bird.lspeed=Math.min（bird.lspeed*1.1 | | 1，bird.maxSpeed）；
}否则{
bird.lspeed=Math.max（bird.lspeed-0.5,0）；
}
如果（鸟向右转）{
bird.rspeed=Math.min（bird.rspeed*1.1 | | 1，bird.maxSpeed）；
}否则{
bird.rspeed=Math.max（bird.rspeed-0.5,0）；
}
bird.position=bird.position+（bird.rspeed-bird.lspeed）；
$（“#bird”）.css（'左'，bird.position）；
请求动画帧（birdLoop）；
}());
//移鸟
$（文档）.keydown（函数（e）{
开关（e.which）{
案例37://左
bird.goingLeft=真；
//屏幕左边缘
如果（鸟位置<0）{
bird.position=0；
}
打破
案例39://对
伯德：正确=正确；
//屏幕右边缘
如果（bird.position>screenWidth-birdWidth）{
bird.position=屏幕宽度-鸟宽；
}
默认：返回；
e、 preventDefault（）；//不确定是否需要
}
}).keyup（功能（e）{
开关（e.which）{
案例37://左
bird.goingLeft=false；
//屏幕左边缘
如果（鸟位置<0）{
bird.position=0；
}
打破
案例39://对
bird.goingRight=false；
//屏幕右边缘
如果（bird.position>screenWidth-birdWidth）{
bird.position=屏幕宽度-鸟宽；
}
默认：返回；
e、 preventDefault（）；//不确定是否需要
}
});
函数spawnPipe（）//生成管道
{
setInterval（函数（）
{
astY+=1；
$（“fullPipe”）.css（“top”，astY）；
}, 10);
}
});

选中此项：

如何生成管道障碍物

管道以固定的间隔或距离铺设。可以检查经过的时间，也可以检查现有管道经过的距离

第二，我需要一个碰撞检测的帮助

---

管道具有宽度、高度和位置。本质上，你的管道是盒子。这也意味着同样的鸟。我相信这叫做“包围盒”。您可以检查鸟的任何边缘是否与框的边缘相交。

首先，我更改了您的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);

var-PipesRandom；
var PipesWidth=['0'，'1'，'2'，'3'，'4']；
函数spawnPipe（astY）{//spawn小行星
$（'fullPipe'）.css（“top”，astY）；
}  
setInterval（函数（）{
astY+=1；
如果（astY<700）{
产卵管（astY）；
} 
否则{
astY=-100；
PipesRandom=PipesWidth[Math.floor（Math.random（）*PipesWidth.length）]；
$（“#fullPipe”）.removeClass（'01234'）；
$（#fullPipe'）.addClass（PipesRandom）；
产卵管（astY）；
}
} ,10);

例如：

关于碰撞，有很多选项，您可以检查此问题，例如：

或：

---

有很多，只需搜索。

碰撞检测是通过获取一个元素的所有四个角的坐标位置来完成的-这很容易用jQuery完成-然后你可以比较另一个元素的角是否在第一个元素的“框”内。我刚刚将一个合并到这个问题中。请不要继续发布类似的重复问题。我试图做一些samiliar，但没有使用if astY<700，而是尝试使用Screenheight变量，这样它就不会溢出，但没有成功。嗯，你没有解决我所有的问题，但你让我回到了正确的轨道上。感谢神秘的程序员你没有弄错，您可以获取窗口高度并将其放入一个变量（var WindowHeight=$（window）.height）中，然后检查“#fullPipe”的位置top是否小于WindowHeight（astY 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);