1

私は html5+canvas が初めてで、私の問題に関する詳細情報が見つからないため、ここで質問することにしました...

キャンバス 400x300px で 2800x1500px の大きな地図をスクロールし、キャンバスの外側にある「見えない領域」で衝突を検出するのに助けが必要です。

このような：
http://i.stack.imgur.com/NI59z.png

私のコードからのいくつかの関数

function Map()
{
    this.img = new Image();
    this.img.src = "img/map.jpg"; //map picture on main canvas
    this.gimg = new Image();

    //map with opacity on "ghost" canvas for collision detecting
    this.gimg.src = "img/gmap.png";
    this.draw = function(ctx,gctx)
    {
        ctx.drawImage(this.img,-offset.x,-offset.y);    
        gctx.drawImage(this.gimg,-offset.x,-offset.y);  
    }
}
function init()
{
    var gameLoop = setInterval(function() {
        draw(ctx,gctx);

    }, 1000/fps);
}
function draw(ctx,gctx)
{
    ctx.save();
    gctx.save();
    ctx.clearRect(-offset.x,-offset.y,2800,1500);
    gctx.clearRect(-offset.x,-offset.y,2800,1500);  
    map.draw(ctx,gctx); 
    ctx.translate(offset.x,offset.y); //scrolling canvas
    gctx.translate(offset.x,offset.y); //scrolling ghost canvas
    ctx.restore();
    gctx.restore();
}

//collision detecting function
function hitTest(obj,gctx)
{
    var imageData = gctx.getImageData(obj.x,obj.y,1,1);
    if( imageData.data[3]==255)
    {
        return true;
    }
    else return false;
}

マップをスクロールするには、その例を使用します:
http://jsfiddle.net/hKrrY/

私のプロジェクト:
http://game.com.hostinghood.com/

4

1 に答える 1

0

表示可能な領域にないオブジェクトとの衝突をそのように行うことはできません。画像はその部分のキャンバスにレンダリングされていないため、常に不透明度が 0 になります。

2 つの方法があります。1 つは、コリジョン マップと同じ幅と高さの別のインメモリ キャンバスにコリジョン マップをレンダリングし、アクティブなアクティブ キャンバス上の敵の座標をコリジョン マップ上の領域と比較することです。コードを確認した後、これがおそらく最も簡単な方法です。

2 番目のアプローチは、タイルマップを使用することです。基本的には、各要素が領域を表す 2 次元配列があり、1 の場合は衝突可能で、0 の場合は通過できます。これには、敵の位置をアレイ上の領域に変換してチェックすることが含まれます。

私は両方の方法でそれを行いましたが、メモリ使用率の点で最も優れているのはタイルマップ アプローチです。

これは、タイルマップのアプローチを説明する素晴らしいチュートリアルです

于 2013-08-28T03:22:15.520 に答える