Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.09.2017, 16:10
Аспирант
Отправить личное сообщение для Zombie_Killer Посмотреть профиль Найти все сообщения от Zombie_Killer
 
Регистрация: 20.06.2017
Сообщений: 38

Как определить координаты элемента в 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_676fd508a4 d87

Последний раз редактировалось Zombie_Killer, 17.09.2017 в 18:10. Причина: ели что это canvas
Ответить с цитированием
  #2 (permalink)  
Старый 17.09.2017, 16:31
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

if(e.target == "ваш_элемент") func()(
Ответить с цитированием
  #3 (permalink)  
Старый 17.09.2017, 17:09
Аспирант
Отправить личное сообщение для Zombie_Killer Посмотреть профиль Найти все сообщения от Zombie_Killer
 
Регистрация: 20.06.2017
Сообщений: 38

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('cl ick', 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();
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2017, 17:10
Аспирант
Отправить личное сообщение для Zombie_Killer Посмотреть профиль Найти все сообщения от Zombie_Killer
 
Регистрация: 20.06.2017
Сообщений: 38

j0hnik,
я скинул код посмотри пожалуйса
Ответить с цитированием
  #5 (permalink)  
Старый 17.09.2017, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 17.09.2017, 17:14
Аспирант
Отправить личное сообщение для Zombie_Killer Посмотреть профиль Найти все сообщения от Zombie_Killer
 
Регистрация: 20.06.2017
Сообщений: 38

рони,
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();
Ответить с цитированием
  #7 (permalink)  
Старый 17.09.2017, 17:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Zombie_Killer,
ок но можно было исправить прежнее сообщение
Ответить с цитированием
  #8 (permalink)  
Старый 17.09.2017, 17:43
Аспирант
Отправить личное сообщение для Zombie_Killer Посмотреть профиль Найти все сообщения от Zombie_Killer
 
Регистрация: 20.06.2017
Сообщений: 38

рони,
поможешь?
Ответить с цитированием
  #9 (permalink)  
Старый 17.09.2017, 19:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как определить активное окно/вкладку? Chameleon Events/DOM/Window 5 19.03.2012 08:59
Координаты элемента n1ko jQuery 5 28.11.2011 11:11
Определить координаты объекта в таблице ner2000 Events/DOM/Window 2 14.06.2008 01:56
как определить позицию элемента относительно окна scuter Events/DOM/Window 5 07.05.2008 18:47