Question

Soo，我正在使用HTML5 Canvas重新制作curvefever（http://curvefever.com/）但是，我得到了碰撞，但它始终发生碰撞，从上一步开始：

无论如何要做到这一点，不能够在最后一个时间步的位置发生碰撞？

Answer 1

你需要向前看能够正确测试，否则，你总会得到一个真正的答案。

只需使用常规的cos / sin代码即可获得当前玩家的位置：

// if dist is the distance ahead  
ahead.x = player.x + dist * Math.cos ( angle ) ;
ahead.y = player.y + dist * Math.sin ( angle ) ;  // !! and not - as you did

并且无需测试整个区域，单个像素测试就足够了，正如您将在这个小提琴上看到的那样： http://jsbin.com/xenujaja/2/edit?js,output

（左上角现在表示没有碰撞/碰撞）

function getCIDCol(pl, ctx) {
    next.x = player.x + Math.cos(player.a) * player.r ;
    next.y = player.y + Math.sin(player.a) * player.r ;

    var id = ctx.getImageData(next.x, next.y ,1,1 );

    return (id.data[3]) ; 
}
var next = {x:0, y:0 }; 

function update() {
    RAF(update);

    if (keys[39]) {
        player.a += player.t
    }
    if (keys[37]) {
        player.a -= player.t
    }

    player.x += Math.cos(player.a) * player.s
    player.y += Math.sin(player.a) * player.s        

    if (player.ht == null) {
        if (Math.floor(Math.random() * 100) == 1) {
            player.ht = setTimeout(function() {
                player.ht = null;
            }, player.h)
        }
    }

  // draw collision status
    if (getCIDCol(player, ctx)) {
        ctx.fillStyle='#F00';
    } else ctx.fillStyle='#0F0';
   ctx.fillRect(4,4, 16,16);

    render()        
}

Pixeldata curvefever碰撞

1 个答案: