Pixeldata curvefever collision

Question

Soo, je fais un remake de curvefever (http://curvefever.com/) en utilisant HTML5 Canvas cependant, je suis la collision, mais il entre en collision tous les temps, de l'étape précédente:

http://jsbin.com/xenujaja/1/edit

est-il de toute façon pour le faire, pas être en mesure d'entrer en collision par où il était dans le dernier pas?

Answer 1

Vous devez regarder en avant pour être en mesure de tester correctement, sinon, vous aurez toujours une vraie réponse.

Il suffit d'utiliser le code régulier cos/sin pour obtenir une position à l'avance joueur actuel:

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

Et pas besoin de tester une zone, un seul test de pixel est suffisant, comme vous le verrez sur ce violon: http://jsbin.com/xenujaja/2/edit?js,output

(carré supérieur gauche dit maintenant collision/collision)

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()   
}