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

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

面对挑战

我想得到角色的坐标，以确定角色是否击中了砖块 这是我的

gamer=（函数（）{
//全局函数
var c=document.getElementById（“画布”）；
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宽度=3；
var高度=3；
var运动=5；
var globalX=0；
var-globalY=0；
这个.canvasWidth=c.width；
这个.画布高度=c.高度；
this.structurehight=高度*marioArray.length；
this.structureWidth=width*marioArray.length；
var飞行强度=40；
drawMario=（x，y）=>{
this.xPos=x；
this.yPos=y；
globalX=x；
globalY=y；
//起始位置
ctx.clearRect（0，0，画布宽度，画布高度）；
for（var i=0；i{
document.onkeydown=函数（e）{
开关（如钥匙代码）{
案例37：
//左
if（globalX=（画布宽度-结构宽度））
返回false；
globalX+=运动；
drawMario（环球，环球）；
打破
案例40：
警惕（“下降”）；
打破
}
};
布林登=（）=>{
var interval=setInterval（函数（）{
if（globalY）为什么尝试从画布确定字符位置？为什么不将位置存储在其他位置？这将导致我创建许多全局变量，两个变量（x，y）对于一个对象，这将很难在将来维护，这有意义吗，或者我做错了什么吗？没有理由创建一组全局变量。只需创建一个具有播放器属性的播放器对象。如果需要多个播放器，请将它们存储在一个数组中。
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();