javascript - 带碰撞检测的 Canvas 滚动

Question

我是 html5+canvas 的新手，我找不到有关我的问题的更多信息，我决定在这里提问...

我需要帮助滚动大 map - 2800x1500px 在 Canvas 400x300px 和碰撞检测 Canvas 外的“不可见区域”。

像这样:

我的代码中的几个函数

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;
}

对于滚动 map ，我使用该示例:
http://jsfiddle.net/hKrrY/

我的项目:
http://game.com.hostinghood.com/

Answer 1

您不能以这种方式与不在可视区域中的对象进行碰撞。该部分的图像不会渲染到 Canvas 上，因此它的不透明度始终为 0。

有两种方法可以做到这一点。一种方法是在单独的内存 Canvas 上渲染碰撞贴图，该 Canvas 与碰撞贴图的宽度和高度相同，然后将事件 Canvas 上敌人的坐标与碰撞贴图上的区域进行比较。在查看代码后，这可能是最简单的方法。

第二种方法是使用瓦片 map 。你基本上会有一个二维数组，其中每个元素代表一个区域，比如 32x32，如果它是 1，它是可碰撞的，如果它是 0，你可以通过。这将涉及将敌人的位置转换到阵列上的区域进行检查。

我已经用两种方法完成了，就内存利用率而言最好的是tilemap方法。

Here is a great tutorial explaining the tilemap approach