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。

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

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

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

这是一个很好的教程，解释了 tilemap 方法

于 2013-08-28T03:22:15.520 回答