-1

だから、学校の宿題プロジェクトの終わりに近づいているので、理解できないように見える2つの主要なことが欠けています。

1.鳥が飛ぶことができるようにギャップのランダムな位置でパイプの障害物をスポーンする方法（ギャップ位置のパイプdivのcss 'right'属性を変更する関数を使用することを考えました）、およびパイプを削除するときにパイプを削除します画面下部からはみ出します。（ところで、その逆のゆるい鳥のゲーム..）

2.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/

4

2 に答える 2

2

パイプの障害物をスポーンする方法

パイプは一定の間隔または距離で発生します。経過時間を確認するか、既存のパイプが移動した距離を確認できます。

次に、衝突検出の助けが必要です

パイプには幅と高さ、および位置があります。基本的に、パイプは箱です。これは鳥にとっても同じことです。「バウンディングボックス」と呼ばれるものだと思います。鳥がボックスの端と交差する場合、鳥の端のいずれかを確認できます。

于 2014-12-27T08:50:17.197 に答える
1

まず、CSS を少し変更してコードを配置し、パイプにさまざまな幅グループ クラス ('.z​​ero'、'.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 衝突検出

たくさんあるので検索してみてください。

于 2014-12-28T21:18:38.850 に答える