0

作業中の Java Snake ゲームを JavaScript に移植して、人々が私の Web サイトでプレイできるようにしようとしています。

DEMO TO GAME HERE ... 矢印キーを押して、スプライトの上を走ってみてください。

このスネークでは、カメラのコツをつかみたいと思っていたので、スネークを追うカメラを実装しました (スネークは真ん中にあります)。カメラが「世界」の端に到達すると、ヘビは世界の端に到達するまで進み続けることができます。

通常、配列内の最後の要素を取得して新しいセグメントをスネークの最後に追加し、x,y最後のセグメントが移動したら、新しいセグメントをそのセグメントに設定します。すべてのセグメントをテールとして移動するには、移動前のセグメントを保存してx,yから、すべてのセグメントをその前のセグメントに設定します。

何かのようなもの：

function getPrevCoords()  {
for (i = 1; i < players.length; i++) {
    prevX[i] = players[i-1].x;
    prevY[i] = players[i-1].y;
}   
}

function moveTail() {
//just need to move head, and set rest of player containers to the last position of head..
for (j = 1; j < players.length; j++) {
    players[j].x = prevX[j];
    players[j].y = prevY[j];
}
}

私の質問:カメラと、すべてのオブジェクトをカメラ座標とワールド座標の関係に配置することで、私はうんざりします。

カメラを世界の端に移動させてからプレイヤーを移動し続けるには、次のロジックを使用します。

    if (direction == "right") {
        if (camX < (world.w - camW) && (players[0].x == camW/2)) {
            camX+=velocity;
        }
        else {
            if (players[0].x < (camW-15)) {
                players[0].x += velocity;   
                moveTail();
            }
            else {
                console.log("HIT RIGHT WALL. GAME OVER.");
                reset();
            }
        }   
    }

これに関する問題は、新しいセグメントを追加するときに、x,y移動後にその前のセグメントに設定することです。上記のように、カメラを移動するときは、カム座標のみを移動し、プレーヤーx,yをカメラの中央に設定する必要があります。x,yカメラが世界の端に到達し、プレーヤーが動き続ける必要がある場合にのみ、プレーヤーを変更します。したがって、余分なボディ セグメントは、プレーヤーが更新されたときにのみずらして落下することに気付くでしょうx,y...カムが動いているとき、プレーヤーはx,y変化しないため、すべてのボディ セグメントはx,y互いに等しくなります。

それを解決する方法についてのアイデアはありますか？

更新されたコード:

含めるように更新しましたcenterViewTo...写真からわかるように、すべてを左上に配置するだけです。

function createPlayers() {
    playerBMP = new createjs.Bitmap("Images/cat_sit.png");      
    playerContainer = new createjs.Container(); 

    playerContainer.addChild(playerBMP);
    centerViewTo(stage.canvas, stage, playerContainer, {x:0, y:0, width:bg.image.width, height:bg.image.height});

    stage.addChild(playerContainer);    
}

function createNPCs() {
    npcBMP = new createjs.Bitmap("Images/myBmp.png");
    npcBMP2 = new createjs.Bitmap("Images/myBmp.png");

    npcContainer = new createjs.Container();
    npcContainer2 = new createjs.Container();   

    npcContainer.addChild(npcBMP);
    npcContainer2.addChild(npcBMP2);

    centerViewTo(stage.canvas, stage, npcContainer, {x:0, y:0, width:bg.image.width, height:bg.image.height});
    centerViewTo(stage.canvas, stage, npcContainer2, {x:0, y:0, width:bg.image.width, height:bg.image.height});

    stage.addChild(npcContainer);
    stage.addChild(npcContainer2);
}

ここに画像の説明を入力

4

1 に答える 1

1

「カメラ」を作ろうとして多大な労力を費やしたことを少し残念に思います（しかし、良い面として、あなたは確かに多くのことを学んだと思います）

camつまり、基本的に: -変数 ( camX, camY, ect...)は必要ありません。

これは、オブジェクトをステージの中央に配置するために私が常に使用している小さな方法です: (仕組みの説明は以下にあります)

function centerViewTo(viewPort,container,object,bounds) {
    var containerPosition = object.localToLocal(0,0,container),
        pw = viewPort.width || 0,
        ph = viewPort.height || 0;

    if ( bounds ) {
        var minX = bounds.x + pw / 2,
            maxX = bounds.x + bounds.width - pw / 2,
            minY = bounds.y + ph / 2,
            maxY = bounds.y + bounds.height - ph / 2;
        containerPosition.x = Math.max(minX, Math.min(containerPosition.x, maxX));
        containerPosition.y = Math.max(minY, Math.min(containerPosition.y, maxY));
    }

    container.regX = containerPosition.x;
    container.regY = containerPosition.y;
    container.x = pw / 2;
    container.y = ph / 2;
}

メソッドが行うことは、位置container(ステージである可能性が最も高いobject) を、ビューポート (キャンバスである可能性が最も高い)に対するの位置に配置しviewPortます。めったに私は他のケースを持っていませんでした。canvascontainerstage

あなたの場合、次のように使用できます。 centerViewTo(stage.canvas,stage,playerBMP,{x:0,y:0,width:bg.image.width,height:bg.image.height});

ただし、コードにいくつかの変更を加える必要があります。すべてのコンテナとオブジェクトの位置は 0 ベースである必要があります。たとえば、bg は (0|0) に配置し、playerContainer は (0|0) に配置する必要があります。

この方法のもう 1 つの良い点は、いつでもステージを回転させることができ、スケーリングと同様に、現在の中心にあるオブジェクトを中心に自動的に回転することです。

これがあなたを混乱させる以上に役立つことを願っています;）

*編集：メソッドが何をするかを視覚化するのに役立つことを願ってグラフィックを追加しました. メソッドは、オブジェクトを保持するコンテナー (最も単純なケースではステージ) の位置を除いて、位置を変更したり、オブジェクトを配置したりしません。

ここに画像の説明を入力

于 2013-08-13T10:35:33.163 に答える