Question

我正在尝试构建简单的画布游戏，我遇到了一些问题。

假设您正在绘制正方形或圆形并移动它，我试图找出一种方法，如何点击正在绘制的元素，就像你可以做的那样。

所以你可以点击一个正方形，它会突出显示并弹出子菜单，你可以选择与项目的一些互动。

到目前为止，我最好的想法是在点击的点{ mouse.x, mouse.y }和所有元素之间进行碰撞检查。但这似乎是一种非常缓慢的方法，也许有人有更好的方法。

以下是一些在某些区域周围绘制圆圈的code。

＆＃13;

var cvs, ctx, w, h, x, y, loop, mouse, pool;
    
	cvs = document.querySelector('canvas');
	ctx = cvs.getContext('2d');
    w = cvs.width = 400;
    h = cvs.height = 400;
    x = w / 2;
    y = h / 2;
    mouse = {x: x, y: y};
    pool = [];
    rnd = (min, max) => Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
    
for(var i = 0; i < 10; i++) {
	pool[i] = {
    	x: rnd(5, w - 5),
        y: rnd(5, h - 5),
        r: rnd(10, 20)
    };
}

var draw_bg = function() {
	ctx.fillStyle = '#f3f5f6';
    ctx.fillRect(0, 0, w, h);
};

var draw_circle = function(_x, _y, _r, _c) {
	ctx.beginPath();
    ctx.arc(_x, _y, _r, 0, Math.PI * 2);
    ctx.strokeStyle = _c;
    ctx.stroke();
};

(loop = function() {
	draw_bg();
    
    for(var i = 0; i < pool.length; i++) {
    	if(pool[i].x < 0) { pool[i].x = w; }
        if(pool[i].x > w) { pool[i].x = 0; }
        if(pool[i].y < 0) { pool[i].y = h; }
        if(pool[i].y > h) { pool[i].y = 0; }

    	draw_circle(pool[i].x, pool[i].y, pool[i].r, '#5dd5dd');
    }
    
    window.requestAnimationFrame(loop);
})();

cvs.onmousemove = function(e) {
	mouse.x = e.offsetX;
    mouse.y = e.offsetY;
};

＆＃13;

canvas {
    width:400px;
    height:400px;
    position:absolute;
    left:calc(50% - 200px);
    top:calc(50% - 200px);
    border:solid 1px #ccc;
}

＆＃13;

<canvas></canvas>

＆＃13;

单击画布中绘制的元素

0 个答案: