Javascript-форум - Как определить координаты элемента в canvas

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как определить координаты элемента в canvas (https://javascript.ru/forum/misc/70585-kak-opredelit-koordinaty-ehlementa-v-canvas.html)

Как определить координаты элемента в canvas

у меня есть мини-игра в которой нужно кликнуть на квадрат. Этот квадрат постоянно перемещается в рандомное направление. Если пользователь кликнул на квадрат то должна срабатывать функция. Как проверить кликнул пользователь именно по элементу?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="js.js" defer></script>
</head>
<body>

<canvas id="c1" width="400" height="200"></canvas>


</body>
</html>

code_6905edac2d 1db

if(e.target == "ваш_элемент") func()(

j0hnik,
я скинул код посмотри пожалуйса

Zombie_Killer,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони,

var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');

var x = 200;
var y = 100;
var stepCount = 0; //кол-во шагов в одном напралении
var direction; // направление движения
var timer;
var myX;
var myY;

function drawDot() {
    ctx.clearRect(0, 0, 400, 200);
    if (x < 0 || x > 400 || y < 0 || y > 200) {
        x = Math.floor(Math.random() * (400 - 0 + 1)) + 0;
        y = Math.floor(Math.random() * (200 - 0 + 1)) + 0;;
    }
    if (stepCount == 0) {
        stepCount = Math.floor(15 * Math.random());
        direction = Math.floor(8 * Math.random()); // 0-7
    } else {
        stepCount--;
    }
    switch (direction) {
        case 0:
            // вверх
            y = y - 4;
            break;
        case 1:
            // вправо
            x = x + 4;
            break;
        case 2:
            // вниз
            y = y + 4;
            break;
        case 3:
            // влево
            x = x - 4;
            break;
        case 4:
            // вправо вверх
            x = x + 4;
            y = y - 4;
            break;
        case 5:
            // вправо вниз
            x = x + 4;
            y = y + 4;
            break;
        case 6:
            // влево вниз
            x = x - 4;
            y = y + 4;
            break;
        case 7:
            // влево вверх
            x = x - 4;
            y = y - 4;
            break;
    }
    
//    document.getElementById('c1').addEventListener('click', function(event){
//        if
//    }
    
    var tsel = ctx.fillRect(x - 3, y - 3, 6, 6);
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(myX, myY);
    ctx.stroke();
    timer = setTimeout(drawDot, 10);
}
drawDot();

Zombie_Killer,
ок но можно было исправить прежнее сообщение

рони,
поможешь?

Zombie_Killer,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<canvas id="c1" width="400" height="200"></canvas>
<script>
  var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var color = "#008000";
var x = 200;
var y = 100;
var stepCount = 0; //кол-во шагов в одном напралении
var direction; // направление движения
var timer;
var myX;
var myY;

function drawDot() {
    ctx.clearRect(0, 0, 400, 200);
    if (x < 0 || x > 350 || y < 0 || y > 150) {
        x = Math.floor(Math.random() * (350 - 0 + 1)) + 0;
        y = Math.floor(Math.random() * (150 - 0 + 1)) + 0;;
    }
    if (stepCount == 0) {
        stepCount = Math.floor(15 * Math.random());
        direction = Math.floor(8 * Math.random()); // 0-7
    } else {
        stepCount--;
    }
    switch (direction) {
        case 0:
            // вверх
            y = y - 4;
            break;
        case 1:
            // вправо
            x = x + 4;
            break;
        case 2:
            // вниз
            y = y + 4;
            break;
        case 3:
            // влево
            x = x - 4;
            break;
        case 4:
            // вправо вверх
            x = x + 4;
            y = y - 4;
            break;
        case 5:
            // вправо вниз
            x = x + 4;
            y = y + 4;
            break;
        case 6:
            // влево вниз
            x = x - 4;
            y = y + 4;
            break;
        case 7:
            // влево вверх
            x = x - 4;
            y = y - 4;
            break;
    }


    ctx.fillStyle = color;
    ctx.fillRect(x - 3, y - 3, 50, 50);
    ctx.stroke();
    timer = setTimeout(drawDot, 50);
}
drawDot();
 canvas.addEventListener("click", function(evt) {
            myX = evt.pageX - canvas.offsetLeft;
            myY = evt.pageY - canvas.offsetTop;
 if (
        myX < x + 50 &&
        myX > x &&
        myY < y + 50 &&
        myY > y)  color = "red" // запуск вашей функции


            })
</script>
</body>
</html>

здесь решение от Rise, строка 27 функция collide вычисляет столкновение
https://javascript.ru/forum/project/...tml#post464453