jQuery产生div和碰撞检测

所以即使在我学校的家庭作业项目结束时，我只是遗漏了两件似乎无法弄清楚的重大事情：

1.如何用间隙的随机位置产生管道障碍物，这样鸟就可以飞过（使用改变管道div的css’right’attr的function，用于间隙位置），然后移除管道它从屏幕底部消失。 （这是一个像btw一样倒置的飞鸟游戏..）

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

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

关于碰撞，有很多选项，你可以查看这个问题例如： 请推荐一个处理可拖动元素碰撞检测的JQuery插件

或： 基本2d碰撞检测

有很多，只是搜索。