1

我正在开发 HTML 5 中的迷宫游戏。

这是我用来在画布上绘制“X”的函数（使用触摸板，用户将通过迷宫导航 X）。

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

问题出在checkcollision 函数中，主要是这段代码：

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

我正在寻找一种最佳方式来检查画布上“X”占用的所有空间。

我使用的代码中有更多注释。

问题： 1. 有时，X 稍微超出边界 2. 有时，X 没有靠近，在它和边界之间留出一些像素。

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;
    }

我相信 getImageData 得到一个矩形，它从角落的 x,y 位置开始。

所以也许有一种方法可以使用 checkx 和 checky 作为中心的坐标来绘制它并检索一个 16 像素宽的正方形

4

1 回答 1

-1

哇，写下问题就清楚了：

var imgd = ctx.getImageData(checkx - xdim, checky - xdim, 16, 16);

伙计们

于 2013-08-07T18:36:34.613 回答