Question

我正在制作HTML 5中的迷宫游戏。

这是我用来绘制＆＃34; X＆＃34;在画布上（使用触摸板，用户将通过迷宫导航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);

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

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

的问题： 有时候，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像素宽的正方形

Answer 1

哇，写这个问题说清楚了：

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

Ty人

在HTML5画布上绘制X形状并检查与边框的碰撞

1 个答案: