如何使用javascript在画布中找到上下文的坐标？

Question

我正在开发一个角色必须穿过屏幕中随机出现的砖块（障碍）的游戏。

面对挑战

我想得到角色的坐标，以便找出这个角色是否已经击中砖块 这是我的code

gamer = (function () {
    //global function
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var blocks = c.getContext('2d');
    var marioArray = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0],
        [0, 0, 0, 3, 3, 3, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0],
        [0, 0, 3, 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
        [0, 0, 3, 1, 3, 3, 1, 1, 1, 1, 3, 1, 1, 1, 0, 0, 0],
        [0, 0, 3, 3, 1, 1, 1, 1, 1, 3, 3, 3, 3, 0, 0, 0, 0],
        [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
        [0, 0, 2, 2, 2, 4, 2, 2, 4, 2, 0, 0, 0, 0, 0, 0, 0],
        [0, 2, 2, 2, 2, 4, 2, 2, 4, 2, 2, 2, 0, 0, 0, 0, 0],
        [2, 2, 2, 2, 2, 4, 4, 4, 4, 2, 2, 2, 2, 0, 0, 0, 0],
        [1, 1, 1, 2, 4, 1, 4, 4, 1, 4, 2, 1, 1, 0, 0, 0, 0],
        [1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 1, 1, 1, 0, 0, 0, 0],
        [1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0],
        [0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0],
        [0, 0, 4, 4, 4, 4, 4, 0, 4, 4, 4, 4, 0, 0, 0, 0, 0],
        [0, 4, 4, 4, 4, 4, 4, 0, 4, 4, 4, 4, 4, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

    ];

    var width = 3;
    var height = 3;
    var motion = 5;
    var globalX = 0;
    var globalY = 0;
    this.canvasWidth = c.width;
    this.canvasHeight = c.height;
    this.structureHeight = height * marioArray.length;
    this.structureWidth = width * marioArray.length;
    var flightStrength = 40;
    drawMario = (x, y) => {
        this.xPos = x;
        this.yPos = y;
        globalX = x;
        globalY = y;
        // starting position   
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        for (var i = 0; i < marioArray.length; i++) {
            for (var r = 0; r < marioArray[i].length; r++) {
                ctx.fillRect(xPos, yPos, width, height);
                //black
                if (marioArray[i][r] === 0) {
                    ctx.fillStyle = "#000000";
                }
                //flesh
                if (marioArray[i][r] === 1) {
                    ctx.fillStyle = "#FFCC66";
                }
                //red
                if (marioArray[i][r] === 2) {
                    ctx.fillStyle = "#FF0000";
                }
                //brown
                if (marioArray[i][r] === 3) {
                    ctx.fillStyle = "#663300";
                }
                //blue 
                if (marioArray[i][r] === 4) {
                    ctx.fillStyle = "#66CCFF";
                }
                //move over 32px   
                xPos += width;
            }//end internal for loop
            //once ctx reaches end on canvas reset xPos to 0
            xPos = x;
            //move down 32px
            yPos += height;
        }//end for loop
        // ctx.drawImage(image, 0, 0, 10, 10, 10, 10);
    };

    keyPressEvent = () => {
        document.onkeydown = function (e) {
            switch (e.keyCode) {
                case 37:
                    //left
                    if (globalX <= 0)
                        return false;


                    globalX -= motion;
                    drawMario(globalX, globalY);
                    break;
                case 38:
                    //up

                    if (globalY < (c.height - (structureHeight + flightStrength))) {
                        bringDown();
                    } else {
                        globalY -= motion;
                        drawMario(globalX, globalY);
                    }
                    break;
                case 39:
                    //right
                    if (globalX >= (canvasWidth - structureWidth))
                        return false;

                    globalX += motion;
                    drawMario(globalX, globalY);
                    break;
                case 40:
                    alert('down');
                    break;
            }
        };
        bringDown = () => {
            var interval = setInterval(function () {
                if (globalY <= (this.canvasHeight - this.structureHeight)) {
                    drawMario(globalX, globalY);
                    globalY += motion;
                } else {
                    globalY = (this.canvasHeight - this.structureHeight);
                    clearInterval(interval);
                }

            }, 80)
        };
        document.onkeyup = function (e) {
            switch (e.keyCode) {
                case 38:
                    bringDown();
                    break;
            }
        }
    };


    return {
        mario: drawMario,
        key: keyPressEvent
    }
})();

gamer.mario(0, (this.canvasHeight - this.structureHeight));
gamer.key();

在上面的代码中，我正在创建一个新的上下文

  

var blocks = c.getContext（＆＃39; 2d＆＃39;）;

并将放置在画布中的某个位置，我想知道我的角色是否已经击中了对象，我怎样才能找到坐标