画布滚动与碰撞检测

时间:2013-08-27 05:13:54

标签: javascript html5 canvas scroll collision-detection

我是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/

1 个答案:

答案 0 :(得分:0)

你不能用不在可视区域内的物体进行碰撞。图像未在该部分中渲染到画布上,因此它始终具有0不透明度。

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

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

我已经完成了两种方式,在内存利用方面最好的是tilemap方法。

Here is a great tutorial explaining the tilemap approach