So bin ich fast am Ende meines Schulhausaufgabenprojekts. Ich vermisse nur zwei wichtige Dinge, die ich nicht herausfinden kann:

1.Wie man die Pipe-Hindernisse mit einer zufälligen Position für die Lücke erscheinen lässt, damit der Vogel durchfliegen kann (es wird empfohlen, eine Funktion zu verwenden, die die Css-Richtigkeit des Pipe-Div für die Lückenposition ändert) und die Pipe zu entfernen wenn es am unteren Bildschirmrand ausgeht. (Es ist ein umgekehrtes Flappy Bird-Spiel wie btw ..)

2.Zweitens brauche ich Hilfe bei der Kollisionserkennung, damit ich weiß, wann das Spiel vorbei ist (dies ist weniger wichtig, da ich denke, ich kann es herausfinden, nachdem ich das erste Problem gelöst habe).

$(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);
}
});

Überprüfen Sie dies :http: //jsfiddle.net/u38ratk9/6