jQuery派生div和碰撞检测 [英] jQuery spawning div and collision detection
问题描述
所以我几乎在我的学校家庭作业项目结束时,只是失去了两个主要的东西,我似乎无法想出:
So im almost at the end of my school homework project im just missing two major things i can't seem to figure out:
1.如何产生管道障碍物具有用于间隙的随机位置,从而鸟可以飞过(使用改变管道分段的css'右侧attr用于间隙位置的功能),并且当管道离开屏幕底部时移除管道。 (它是一个颠倒的flappy鸟游戏喜欢btw ..)
1.How to spawn the pipe obstacles with a random position for the gap so the bird can fly through (tought of using a function which changes the css 'right' attr of the pipe div for the gap position), and removing the pipe when it goes off screen bottom . (Its a inverted flappy bird game like btw..)
2.第二,我需要帮助碰撞检测功能,所以我知道当游戏结束重要的艰难的原因,我想我可以找出后,解决了第一个问题)
2.Second i need a help with the collision detection function so i know when game is over (this is less important tough cause i think i can figure it out after ill solve the first problem)
$(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/
推荐答案
如何产生管道障碍
How to spawn the pipe obstacles
管道以固定间隔或距离发生。您可以检查经过的时间,或者您可以检查现有管道的行驶距离。
The pipes happen at a regular interval or distance. You can either check the time elapsed or you can check the distance traveled by existing pipes.
第二,我需要帮助碰撞检测
Second i need a help with the collision detection
管道有宽度和高度,以及位置。基本上,你的管道是盒子。这也意味着同样的鸟。我相信它被称为边界框。您可以检查鸟的任何边缘是否与盒子的边缘相交。
Pipes have width and height, as well as position. Essentially, your pipes are boxes. This also means the same for the bird. I believe it's called a "bounding box". You can check if any of the edges of the bird if it intersects with the edges of the box.
这篇关于jQuery派生div和碰撞检测的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!