Ich arbeite an einem Labyrinthspiel in HTML 5.

Hier ist die Funktion, mit der ich ein "X" auf die Leinwand zeichne (mit dem Touchpad navigiert der Benutzer das X durch das Labyrinth).

dim = 8;

function rect(x,y,xdim){
    ctx.beginPath();
    ctx.moveTo(x - xdim, y - xdim);
    ctx.lineTo(x + xdim, y + xdim);
    ctx.moveTo(x + xdim, y - xdim);
    ctx.lineTo(x - xdim, y + xdim);
    ctx.strokeStyle = '#FF5000';
    ctx.stroke();       
}

Das Problem liegt in derCheckcollision-Funktion, hauptsächlich in diesem Code:

ctx.getImageData(checkx, checky, 16, 16);

Ich bin auf der Suche nach einer optimalen Möglichkeit, den gesamten Speicherplatz zu überprüfen, der vom "X" auf der Leinwand belegt wird.

Der verwendete Code enthält weitere Kommentare.

Probleme: 1. Manchmal passiert das X die Grenze ein wenig. 2. Manchmal kommt das X nicht näher und lässt ein paar Pixel zwischen sich und der Grenze.

function checkcollision(checkx, checky){
        var collision = 0;
        /*
            User presses an arrow key

            Calculate where that would move the square to.

            Look at all of the pixels on the maze image that the square will cover
            in its new position (our square is 15x15 so we look at 225 pixels)

            Are any of the pixels black (the maze is white with black borders. 
            If a pixel is black that means the square would collide with a border)

            YES: then do not move

            NO: then move
        */
        var imgd = ctx.getImageData(checkx, checky, 15, 15);
        pix = imgd.data;
        for (var i = 0; n = pix.length, i < n; i += 4){
            if (pix[i] == 0) {
                collision = 1;
            } else if(pix[i] == 255 && pix[i + 1] == 0){
                winner = "yes";
            }
        }
        return collision;
    }

Ich glaube, dass getImageData ein Rechteck erhält, das von der x, y-Position in einer Ecke ausgeht.

Vielleicht gibt es eine Möglichkeit, es mit checkx und checky als Koordinaten für das Zentrum zu zeichnen und ein Quadrat mit einer Breite von 16 Pixeln abzurufen