4

私はグーグルで私の質問に対する答えを見つけるのに苦労しているので、idの投稿を考えました.

HTML5、JavaScript、jqueryのみを使用して、トップダウンのタイルベースのRPGゲームを構築しています。

配列に画像を設定しました。マップを配列に設定し、それをループしてタイルを画面に表示します。

大きな地図の 750px x 600px のセクションをキャンバスに表示したいのですが、プレーヤーが 4 つの境界のいずれかに移動すると、地図が更新されて地図の次の部分が表示されます。地図が利用できない場合はそのままです。

これをどのように実装しますか??

私が何を尋ねているのか理解できない場合は、より良い説明を試みてください:pしかし、私のコードは次のとおりです:

$(document).ready(function(){

var canvas = $("#TBG");
var context = canvas.get(0).getContext("2d");

var canvasWidth = canvas.width();
var canvasHeight = canvas.height();

//Player Controls -------------------------------------------------------------------------
$(window).keydown(function(e){
   var keyCode = e.keyCode;
    if (keyCode == arrowRight){
        Player.moveRight = true;
    }
    else if (keyCode == arrowLeft){
        Player.moveLeft = true;
    }
    else if (keyCode == arrowUp){
        Player.moveUp = true;
    }
    else if (keyCode == arrowDown) {
        Player.moveDown = true;
    }
});
$(window).keyup(function(e){
    var keyCode = e.keyCode;
    if (keyCode == arrowRight){
        Player.moveRight = false;
    }
    else if (keyCode == arrowLeft){
        Player.moveLeft = false;
    }
    else if (keyCode == arrowUp){
        Player.moveUp = false;
    }
    else if (keyCode == arrowDown) {
        Player.moveDown = false;
    }
});

function player() {

    this.x = 100;
    this.y = 100;
    this.vX = 0;
    this.vY = 0;

    var moveRight = false;
    var moveLeft = false;
    var moveUp = false;
    var moveDown = false;
}

var Player = new player();

var arrowLeft = 37;
var arrowUp = 38;
var arrowRight = 39;
var arrowDown = 40;

//End Player controls ------------------------------------------------------------------------------

//Map initialisation -------------------------------------------------------------------------------------

var images = new Array(3);

images[0] = new Image();
images[0].src = "images/player.png";

images[1] = new Image();
images[1].src = "images/wall.png";

images[2] = new Image();
images[2].src = "images/grass.png";

images[3] = new Image();
images[3].src = "images/floor.png";

var tileMap = [
    [3,1,3,3,3,3,3,3,3,3],
    [3,1,1,2,2,2,2,2,2,3],
    [3,1,1,1,2,2,2,2,2,3],
    [3,2,1,1,1,2,2,2,2,3],
    [3,2,2,1,1,1,2,2,2,3],
    [3,2,2,2,1,1,1,1,1,3],
    [3,2,2,2,2,1,1,1,1,3],
    [3,2,2,2,2,1,1,1,1,3],
    [3,2,2,2,2,1,1,1,1,3],
    [3,3,3,3,3,3,3,3,3,3]
];

//Animate Loop -------------------------------------------------------------------------------------------
function animate () {

    context.clearRect(0,0,canvasWidth,canvasHeight);

    Player.vX = 0;
    Player.vY = 0;

    //Player Animation
    if (Player.moveRight) {
        Player.vX =2;
    };
    if (Player.moveUp) {
        Player.vY = -2;
    };
    if (Player.moveDown) {
        Player.vY = 2;
    };
    if (Player.moveLeft) {
        Player.vX = -2;
    };

    Player.x += Player.vX;
    Player.y += Player.vY;

    if (Player.x < 0){
        Player.x = 0;
        Player.vX *= -2;
    }
    else if (Player.x + 64 > canvasWidth) {
        Player.x = canvasWidth - 64;
        Player.vX *= -2;
    };
    if (Player.y < 0){
        Player.y = 0;
        Player.vY *= -2;
    }
    else if (Player.y + 64 > canvasHeight) {
        Player.y = canvasWidth - 64;
        Player.vY *= -2;
    };

    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++){

            var tileId = tileMap[i][j];
            var tileWidth = 32;
            var tileHeight = 32;

            context.drawImage(images[tileId],i * tileWidth, j * tileHeight);
        }

    }
    context.drawImage(images[0], Player.x, Player.y);

    setTimeout(animate, 0);
}
// End Loop ------------------------------------------------------------------------------------------------

animate();

});

Javascript は得意ではありませんが、プログラミングについて十分な知識と知識を持っています。

前もってありがとうトム

4

2 に答える 2

2

（アクティビティ開発の場合のように）それを行うための特定の方法は実際にはありませんが、フロア中心のアクティビティを作成しているので、おそらく私はいくつかの支援を提供できます。フロアレイヤーに固有のものは実際にはありません。これは、チャートに付けられたフレーズであり、互いに重ねることができます。アクティビティ全体に1つの部分を含めることもできますが、それがどのように実行されないかを確認できます。芝生の5X5の位置があり、その上に低木を置きたい場合は、前にあった芝生の床を変更したため、区画の間に資格の色が表示されます。一部の個人は、低木を配置するための別の部分を含めることによってこれに対処します。そうすれば、最初の部分には芝生があり、低木は上にあるように見えます。ただし、必要な影響を与えるには、実際のいくつかの植物にいくつかのレベルを使用する必要がある場合があります。個人的には、私の活動にはおそらく1つのフロア部分しかありません。これは、芝生やほこりなどの主要な風景のものになります。次に、事前に作成されたオブジェクト（植物、花、悪い個人、家など）を作成するアイテム部分を作成し、モーターがそれらを取得します。役割とそれらをスケッチする方法を理解します。

初心者の場合、あなたの個性をディスプレイの側面と衝突させる可能性があります。たとえば、表示の残りの部分と競合する場合は、パフォーマーのx位置が0未満であるかどうかを調べ、そうである場合は0に設定します。

次に、ディスプレイにフローリングをスケッチできるようにします。整数の範囲を使用してフロアマップを示すことができます。異なる数字は、スケッチしなければならない異なる床のデザインを意味します。したがって、3X3の範囲の「0」は3X3の芝生の床の線を象徴するマップになり、「1」の範囲は水などになります。これらの図は、テキスト/バイナリコンピューターファイルまたはXMLコンピューターファイルなどから取得できます。XMLについて考えていたので、これは通常、人間が読める形式で詳細を購入する方法にすぎません。XMLの詳細は（ある意味では）実際には何もしません。それを理解するのはシステム次第です。

もう1つの推奨事項は、SFMLを使用しているため、「ビュー」を使用して写真カメラを移動できることです。それらの使用方法については、SFMLWebページを調べてください。

今、私の最高の推薦のために。私の出版物は比較的説明されていませんが、私が説明したものはすべて、ChipGravelynのフロアモーターガイドで保護されています。これはC＃で公開されており、フロアマネージャーの開発にはさらに多くのことを行っていますが、C ++/SFMLアクティビティに彼のことを実装することもできます。オンラインで「NIckGravelyn」を検索してください。com。

于 2012-11-09T19:24:18.480 に答える
2

あなたはもうすぐそこにいます！最近、自分のゲームのタイル レンダラーに似たようなものを実装しました。

このループでは:

for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
        var tileId = tileMap[i][j];
        var tileWidth = 32;
        var tileHeight = 32;

        context.drawImage(images[tileId],i * tileWidth, j * tileHeight);
    }
}

カメラを「中心」にする必要があります。私のゲームでは、プレイヤーが移動するたびにその位置を中心にしていますが、これは好きなように行うことができます。描画時にワールド座標にオフセットを適用することで、カメラを中央に配置できます。

for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
        var tileId = tileMap[i + yOffset][j + xOffset] || tileIdForEmptyCell;
        var tileWidth = 32;
        var tileHeight = 32;

        context.drawImage(images[tileId],i * tileWidth, j * tileHeight);
    }
}

あなたのコードでは、 i と j は画面のタイル座標を表し、それらは決して変わりません。世界を「シフト」するには、世界座標にオフセットを適用するだけです。これは、タイル マップへのルックアップを実行するために使用されます。

マップがいつ終了するかを考慮する必要があります。これは、|| tileIdForEmptyCellビットが行うことです。

于 2012-11-09T19:28:15.670 に答える